本文介绍如何使用原生 JavaScript 实现一个简易的打字练习小游戏。通过随机生成英文字母，监听键盘按键事件判断输入是否正确，并统计得分。当输入错误时弹出游戏结束提示及当前得分。代码包含 HTML 结构、CSS 样式及核心 JS 逻辑，适合初学者学习 DOM 操作与事件处理。
打字游戏实现概述
今天尝试制作一个模拟打字游戏，效果如上图所示。程序会实时判断用户的打字输入，若在外层包裹 setInterval 函数，即可进一步实现打字速度测试功能。
HTML 结构如下：
HTML 页面结构
<div class="wrapper">
<div id="text">A</div>
<input type="text" id="ipt">
</div>CSS 样式定义：
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;
}JavaScript 核心逻辑：
JavaScript 交互逻辑
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 = '';
}
}以上即为该打字小游戏的完整实现内容，希望能为各位的学习提供便利，也欢迎继续支持本站获取更多技术分享。