JavaScript를 사용하여 타이핑 게임을 시뮬레이션해보세요!

오늘은 할 일이 없어서 시뮬레이션된 타이핑 게임을 해보고 싶습니다. 다음은 타이핑을 기록하고 판단하는 것입니다. 주변에 setInterval 함수를 추가하면 타이핑 속도를 테스트할 수 있습니다.

html

<div class="wrapper">
  <div id="text">A</div>
  <input type="text" id="ipt">
</div>

css

body,
html {
  width: 100%;
  height: 100%;
 }

 .wrapper {
  width: 400px;
  margin: 20px auto;
 }

 div {
  font-size: 100px;
  font-weight: 900;
  text-align: center;

 }
 input{
  width: 400px;
  margin: 20px auto;
 }

js

var str = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
var text = document.getElementById('text') 
var ipt = document.getElementById('ipt')
var res;
var newRes;
var random = Math.round(Math.random() * 25);
var count = 0
 window.onkeyup = function (e) {
  var random = Math.round(Math.random() * 25);
  newRes = str[random]
  res = text.innerHTML
  text.innerHTML = newRes
  if(e.keyCode == res.charCodeAt(0)){
   count++;
   ipt.value = '';
  }else{
   alert('game over' + '   ' +'您的得分是'+ ':' + count)
   count = 0;
   ipt.value = '';
  }

 }

관련 추천: [JavaScript 비디오 튜토리얼]

위 내용은 JavaScript를 사용하여 타이핑 게임을 시뮬레이션해보세요!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!