打字游戏（一）


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<button class="startBtn">开始</button>
<div class="score">得分：<b>0</b></div>
</body>
<script src="./js/utils.js"></script>
<script>
var b = document.querySelector('.score b');
// 打字游戏
/*
1.随机创建一个span
2.设置样式
3.设置定时器向下移动
4.绑定键盘事件 - 打掉他 - 重新再创建一个
5.判断是否到底 - GAME OVER

6.得分
7.开始按钮
*/
// var span
var arr = []
// var timerId

// 通过定时器调用createSpan - 每隔一会就创建一个span
var time
document.querySelector('.startBtn').onclick = function(){
    createSpan()
    time = setInterval(createSpan, 1500)
}
// 出问题：多个span一起出现，但是他们的变量名都叫span，多个定时器叠加操作同一歌后面的span。前面的span不能移动了，后面的span越走越快

// 解决：
/*
1.将多个span放在一个集合中 - 定义span变量要换成一个集合()
*/


function createSpan(){
    // 创建span
    var span = document.createElement('span')
    // 设置随机字符
    var code = getRandom(65, 91)
    // 将阿斯克码转成字符，放在span中
    span.innerText = String.fromCharCode(code)
    // 将span放在body中
    document.body.appendChild(span)
    // 获取随机的left值
    var left = getRandom(0, document.documentElement.clientWidth - 30)
    // 设置样式
    setStyle(span, {
        width: '30px',
        height: '30px',
        borderRadius: '50%',
        backgroundColor: '#f00',
        textAlign: 'center',
        lineHeight: '30px',
        position: 'absolute',
        top: 0,
        left: left + 'px',
        fontWeight: 'bold',
        color: '#fff'
    })
    // 设置定时器让span向下移动
    var timerId = setInterval(function(){
        // 获取top
        var t = span.offsetTop
        // 加大
        t++
        // 判断t的最大值
        if(t >= document.documentElement.clientHeight - 30){
            t = document.documentElement.clientHeight - 30
            // 提示游戏结束
            alert('GAME OVER')
            // 停止定时器
            clearInterval(timerId)
            // 清空所有定时器
            for(var i=0;i<arr.length;i++){
                clearInterval(arr[i].timer)
            }
            clearInterval(time)
        }
        // 将t设置给top样式
        span.style.top = t + 'px'
    }, 20)
    // 将span和timerId放在一个对象中
    arr.push({
        ele: span, 
        timer: timerId
    })
}
// 给浏览器绑定键盘事件
document.onkeyup = function(){
    // 获取键盘码
    var keycode = window.event.keyCode
    // 将键盘码转为字符
    var word = String.fromCharCode(keycode).toUpperCase()
    // 判断是否输入的span中的字符
    // if(word === span.innerText){
    //     // 删除span
    //     span.parentElement.removeChild(span)
    //     // 清除定时器
    //     clearInterval(timerId)
    //     // 再次创建
    //     createSpan()
    // }

    // 从arr中遍历判断word是哪个span的innerText
    for(var i=0;i<arr.length;i++){
        if(arr[i].ele.innerText === word){
            // 删除span
            arr[i].ele.parentElement.removeChild(arr[i].ele)
            // 清除对应的定时器
            clearInterval(arr[i].timer)
            // 将arr[i]对象中数组中删除
            arr.splice(i, 1)
            // 将分数+1
            b.innerText = +b.innerText + 1
            break
        }
    }
}
/*

*/
</script>
</html>
猜你喜欢
