今日は何もすることがないので、疑似タイピングゲームをしてみたいと思います。以下はタイピングを記録して判定するレンダリングです。周辺に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 中国語 Web サイトの他の関連記事を参照してください。