打字小游戏（二）

/* 浏览器和标签都有默认的样式 清除默认样式 */
*{
    margin: 0;padding: 0
}
/* 清除加粗标签的默认样式 */
b,strong{
    font-weight: normal
}
/* 清除倾斜标签的默认样式 */
i,em{
    font-style: normal
}
/* 清除默认下划线 */
a,u{
    text-decoration: none
}
/* 清除列表的默认符号样式 */
ul,ol,li{
    list-style: none
}
/* 万能清除法 解决高度塌陷 */
.clear-fix::after{
    content: '';
    display: block;
    width: 100%;
    height: 0;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}
/* 兼容写法 */
.clear-fix{
    zoom: 1 /* 兼容IE */
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./02-reset.css">
    <title>Document</title>
</head>
<style>
    body,
    html {
        height: 100%;
    }
    
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #000;
    }

    .div {
        width: 1000px;
        height: 350px;
        display: flex;
        flex-wrap: wrap;
        align-content: space-around;
        justify-content: center;

    }

    .row {
        width: 100%;
        height: 100px;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .row:nth-child(2) {
        width: 90%;
    }

    .row:nth-child(3) {
        width: 80%;
    }

    .row li {
        width: 80px;
        height: 80px;
        background-color: #fff;
        font-size: 22px;
        font-weight: 600;
        text-align: center;
        line-height: 80px;
        border-radius: 15px;
    }

    .row li.li1 {
        background-color: #c91a35;
    }

    .row li.li2 {
        background-color: #e36947;
    }

    .row li.li3 {
        background-color: #e67a36;
    }

    .row li.li4 {
        background-color: #f7d847;
    }

    .row li.li5 {
        background-color: #ede886;
    }

    .row li[name="xz"] {
        transform-style: preserve-3d;
        /* transform: scale(1.1); */
        background: none;
        color: #c91a35;
        border: 1px solid #e36947;
        animation: xz .3s infinite;
    }

    @keyframes xz {
        0% {
            transform: translate(0);
        }

        20% {
            transform: translate(-2px, 2px);
        }

        40% {
            transform: translate(-2px, -2px);
        }

        60% {
            transform: translate(2px, -2px);
        }

        80% {
            transform: translate(-2px, -2px);
        }

        100% {
            transform: translate(0);
        }
    }

    h2 {
        width: 100px;
        height: 30px;
        background-color: pink;
        position: absolute;
        top: 50px;
        left: calc(50% - 50px);
        text-align: center;
        line-height: 30px;
    }

    p {
        width: 300px;
        height: 50px;
        background-color: pink;
        position: absolute;
        top: 100px;
        left: calc(50% - 150px);
        text-align: center;
        line-height: 50px;
        font-size: 20px;
    }

    h3 {
        width: 200px;
        height: 30px;
        background-color: pink;
        position: absolute;
        top: 150px;
        left: calc(50% - 100px);
        text-align: center;
        line-height: 30px;
    }
</style>

<body>
    <h2></h2>
    <p>分数每累计 5 分，速度会提升</p>
    <h3></h3>
    <div class="div">
        <ul class="row">
            <li class="li1">Q</li>
            <li class="li2">W</li>
            <li class="li3">E</li>
            <li class="li4">R</li>
            <li class="li5">T</li>
            <li class="li5">Y</li>
            <li class="li4">U</li>
            <li class="li3">I</li>
            <li class="li2">O</li>
            <li class="li1">P</li>
        </ul>
        <ul class="row">
            <li class="li1">A</li>
            <li class="li2">S</li>
            <li class="li3">D</li>
            <li class="li4">F</li>
            <li class="li5">G</li>
            <li class="li4">H</li>
            <li class="li3">J</li>
            <li class="li2">K</li>
            <li class="li1">L</li>
        </ul>
        <ul class="row">
            <li class="li1">Z</li>
            <li class="li2">X</li>
            <li class="li3">C</li>
            <li class="li4">V</li>
            <li class="li3">B</li>
            <li class="li2">N</li>
            <li class="li1">M</li>
        </ul>
    </div>
</body>
<script src="./utils.js"></script>
<script>
    // 获取所有 li 标签
    var lis = document.querySelectorAll("li");
    // 定义一个26个字母
    var str = "ABCDEFGHIJKLNMOPQISTUVWXYZ"

    randomkey()

    // 创建函数 - 随机获得按键
    function randomkey() {
        //调用随机数
        var randomletter = getRandom(0, 26);
        // 遍历所有 li 标签
        for (var i = 0; i < lis.length; i++) {
            // 判断 随机字符 与 哪个 li 内容对等
            if (str[randomletter] === lis[i].innerText) {
                // console.log(str[randomletter])
                for (var j = 0; j < lis.length; j++) {
                    lis[j].setAttribute("name", "")
                }
                lis[i].setAttribute("name", "xz")
            }
        }
    }



    //定义一个计数器 - 分数
    var num = 0;
    // 定义一个变量a,接收定时器的执行时间
    var a = 3000;
    // 定义一个全局变量的timerId接收定时器 - 便于调用
    var timerId;
    // 定义定时器，每三秒换个键
    timerId = setInterval(randomkey, a)
    //获取h2标签
    document.querySelector("h2").innerText = "分数:" + num
    //获取 h3 标签 
    document.querySelector("h3").innerText = "现在速度:" + a + "毫秒"



    // 创建键盘按下事件
    document.addEventListener("keydown", function () {
        // 获取事件对象
        var evt = window.event
        // 获取键盘输出的字母
        var keyboard = String.fromCharCode(evt.keyCode)
        // 获取被选中的 li
        var li = document.querySelector(".row li[name=xz]")


        // 判断键盘输入的字母是否与选中li内容相等
        if (keyboard === li.innerText) {
            // 如果相等则分数+1
            //运行一次函数，更换下个键位
            randomkey();
            num++
            // 116 对应键盘上的 F5键
        }

        // 判断，如果输入的键位不符合则游戏失败
        // 116 对应键盘上的 F5键
        else if (evt.keyCode != 116) {
            clearInterval(timerId)
            num = 0
            a = 3000
            alert("游戏失败")
        }
        // // 如果分数够 30 则游戏通过
        // if (num === 30) {
        //     clearInterval(timerId)
        //     num = 0
        //     a = 3000
        //     alert("游戏通关")
        // }
        // 将分数放在 h2 中
        document.querySelector("h2").innerText = "分数:" + num
    })

    //创建键盘抬起事件
    document.addEventListener("keyup", function () {
        //每五次加速
        if (num % 5 == 0 && num !== 0) {
            if (a > 1000 ) {
                a -= 500
            } else if (a <= 1000) {
                a -= 100
                if (a === 200) {
                    a = 200
                }
            }
        }
        //获取 h3 标签 
        document.querySelector("h3").innerText = "现在速度:" + a + "毫秒"
        // 先停止定时器 -  解决定时器会造成 键位 的频繁切换
        clearInterval(timerId)
        // 从新定义新的定时器，继续循环
        timerId = setInterval(randomkey, a)
    })
</script>

</html>

/**
 * 获取随机数的函数
 * @param {number} a 代表范围的数字
 * @param {number} b 代表范围的数字
 * @return {number} 返回范围内的随机整数
 */
function getRandom(a, b){
    var max = a>b?a:b
    var min = a>b?b:a
    return parseInt(Math.random() * (max - min)) + min
}
/**
 * 获取16进制的随机颜色值
 */
function getColor(){
    var color = '#'
    for(var i=0;i<3;i++){
        var num = getRandom(0, 256)
        var hex = num.toString(16)
        hex = hex.length === 1 ? '0' + hex : hex;
        color += hex
    }
    return color
}
/**
 * 批量设置样式的函数
 * @param {node} ele 被设置样式的标签对象
 * @param {object} styleObj 要设置的样式组成的键值对
 */
function setStyle(ele, styleObj){
    for(var key in styleObj){
        ele.style[key] = styleObj[key]
    }
}

打字小游戏（二）

猜你喜欢