打字游戏

效果图如下：

打字游戏

html结构代码：

<style>
.box{
    width: 600px;
    height: 400px;
    background-color: hotpink;
    position: relative;

}
</style>
<button class="start">开始</button>
&nbsp;&nbsp;    得分：<span class="scoreBox">0</span>分
<div class="box"></div>

js逻辑代码：

// 获取所有标签
var startBtn = document.querySelector('.start');
var scoreBox = document.querySelector('.scoreBox');
var box = document.querySelector('.box');
// 定义大定时器变量
var timerId;
// 点击开始按钮，开始游戏
startBtn.addEventListener('click', click);
function click() {
    // 分数从0开始计算
    scoreBox.innerText = 0;
    // 间隔很短的时间，从上向下下来一个文字，这个文件不停的向下移动
    timerId = setInterval(function() {
        // 创建一个b标签
        var b = document.createElement('b');
        // 给b标签中放入随机小写字母 - 小写字母的阿斯克码是 97~122
        var code = getRandom(97, 123);
        // 将随机的阿斯克码转成小写字母
        var word = String.fromCharCode(code);
        // 将小写字符放入b标签中
        b.innerText = word;
        // 定义b标签的top值
        var t = 0;
        // 设置b标签样式
        setStyle(b, {
            width: '30px',
            height: '30px',
            backgroundColor: '#00f',
            color: '#fff',
            borderRadius: '50%',
            textAlign: 'center',
            lineHeight: '30px',
            position: 'absolute',
            top: t,
            left: getRandom(0, box.clientWidth - 30 + 1) + 'px'
        })
        // 将b标签放入box盒子中
        box.appendChild(b)
        // 让b标签向下移动
        // 将每个小定时器放在被移动的b标签属性中
        b.timer = setInterval(function() {
            // 让top值变量t，每隔20毫秒增加2px
            t += 2;
            // 限制top值
            if(t > box.clientHeight - 30) {
                t = box.clientHeight - 30;
                // 将大定时器停止，将所有小定时器停止，弹出游戏结束
                clearInterval(timerId);
                alert('游戏结束')
                // 遍历所有b标签，停止每个b标签上的定时器 - 并删除所有b标签
                for(var i = box.children.length - 1; i >= 0; i--) {
                    clearInterval(box.children[i].timer);
                    box.removeChild(box.children[i])
                }
            }
            // 将增加后的t设置到b标签的top
            b.style.top = t + 'px';
        }, 20)
    }, 1000)
}
// 鼠标抬起时，判断按下的键，是否在所有b标签内容中的1个，是的话就得分1，停止这个b标签的定时器，删除这个b标签
document.addEventListener('keyup', keyup);
function keyup() {
    // 获取事件对象
    var e = window.event;
    // 获取键盘码
    var keycode = e.keyCode || e.which;
    // 将键盘码转成小写字母
    var word = String.fromCharCode(keycode).toLowerCase();
    // 判断这个字母是否是b标签内容中的一个
    for(var i = 0; i < box.children.length; i++) {
        if(word === box.children[i].innerText) {
            // 得分加1
            var score = +scoreBox.innerText + 1;
            // 将分数放进得分盒子中
            scoreBox.innerText = score;
            // 停止这个b标签的定时器
            clearInterval(box.children[i].timer);
            // 删除这个b标签
            box.removeChild(box.children[i]);
            break;
        }
    }
}
// 获取随机数的函数
function getRandom(a, b = 0) {
    var max = a;
    var min = b;
    if(a < b) {
        max = b;
        min = a;
    }
    return Math.floor(Math.random() * (max - min)) + min;
}
// 批量设置样式的函数
function setStyle(ele, styleObj) {
    for(var attr in styleObj) {
        ele.style[attr] = styleObj[attr];
    }
}