原生JS实现打字游戏

最新推荐文章于 2023-09-04 10:46:54 发布

七月末丷

最新推荐文章于 2023-09-04 10:46:54 发布

阅读量306

点赞数

文章标签：游戏前端 javascript

本文链接：https://blog.csdn.net/aring1998/article/details/114830430

版权

一、实现效果

二、源码

主要的应用为：

1.获取对应键位的unicode

2.监听键盘按下（onkeydown）

3.淡进、淡出的动画

具体的实现过程在注释已经写的很详细了不再赘述，源码奉上：

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

<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" />
    <title>打字游戏</title>
    <style>
        html {
            margin: 0;
            padding: 0;
            background-color: rgba(255, 255, 255, 0.5);
        }

        .clearfix::before {
            content: "";
            display: table;
            clear: both;
        }

        .wrapper {
            margin: 10px auto;
            width: 500px;
            height: 700px;
            background-image: radial-gradient(gray, black);
        }

        .header {
            height: 50px;
        }

        .score-wrapper {
            height: 50px;
            margin-left: 20px;
        }

        .score-wrapper {
            float: left;
        }

        .game-again {
            float: right;
            margin-right: 20px;
            cursor: pointer;
        }

        .game-again span:hover {
            color: white;
        }

        .score-wrapper span,
        .game-again span,
        .tips {
            line-height: 50px;
            font-size: 20px;
            font-weight: 600;
            color: rgba(255, 255, 255, 0.5);
        }

        .body {
            height: 600px;
        }

        .letter {
            font-size: 450px;
            font-weight: 900;
            text-align: center;
            line-height: 600px;
            color: #c0c0c0ce;
            pointer-events: none;
        }

        .tips {
            text-align: center;
        }

        .fade-in {
            animation: fade-in 0.5s;
        }

        .fade-out-right {
            animation: fade-out-right 0.5s;
        }

        .fade-out-wrong {
            animation: fade-out-wrong 0.5s;
        }

        /* 淡入 */
        @keyframes fade-in {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
                color: #c0c0c0ce;
            }
        }

        /* 正确淡出 */
        @keyframes fade-out-right {
            0% {
                opacity: 1;
            }

            80% {
                opacity: 0;
                color: #00ff00ce;
            }

            100% {
                opacity: 0;
                color: #c0c0c0ce;
            }
        }

        /* 错误淡出 */
        @keyframes fade-out-wrong {
            0% {
                opacity: 1;
            }

            80% {
                opacity: 0;
                color: #ff0000ce;
            }

            100% {
                opacity: 0;
                color: #c0c0c0ce;
            }
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <div class="header">
            <div class="score-wrapper">
                <span>得分：</span><span id="score">0</span>
            </div>
            <div class="game-again" onclick="resetGame()">
                <span>重新开始</span>
            </div>
        </div>
        <div class="body">
            <div class="letter" id="letter">A</div>
        </div>
        <div class="footer">
            <div class="tips" id="tips">请在按键上按下屏幕上显示的字母</div>
        </div>
    </div>

    <script>
        const letter = document.getElementById("letter");
        const score = document.getElementById("score");
        const tips = document.getElementById("tips");

        let letterCode = Math.round(Math.random() * 26 + 64); //26个字母（大写）对应unicode编码
        let letterStr = String.fromCharCode(letterCode); //将unicode解码
        letter.innerHTML = letterStr; //开局写入随机字母
        let scoreValue = 0; //得分
        let keydownCount = 0; //按键次数
        let accuracy; //正确率

        //监听键盘按下
        document.onkeydown = function (event) {
            //不是输入26个字母时
            if (event.keyCode < 65 || event.keyCode >= 91) {
                return;
            }
            //输入正确时
            if (event.keyCode == letterCode) {
                rightKeydown(1);
            }
            //输入错误时
            else {
                scoreValue--; //与以下函数的得分自加抵消
                rightKeydown(0);
            }
        };

        //正确按下指定键
        function rightKeydown(isRight) {
            scoreValue++;
            keydownCount++;
            accuracy = scoreValue / keydownCount; //正确率 = 得分 / 按键次数
            score.innerHTML = scoreValue;
            tips.innerHTML = "正确率：" + toPercent(accuracy);
            randomLetter(isRight);
        }

        //随机字母
        function randomLetter(isRight) {
            letterCode = Math.ceil(Math.random() * 26) + 64;
            letterStr = String.fromCharCode(letterCode);
            letterAnimation(isRight);
        }

        //字母淡入淡出动画
        function letterAnimation(isRight) {
            if (isRight == 1) {
                letter.classList.add("fade-out-right");  //上一个字母淡出
                letter.style.opacity = 0;  //淡出后透明度为0
                setTimeout(function () {
                    letter.innerHTML = letterStr;  //写入随机字母
                    letter.classList.remove("fade-out-right");  //移除淡出动画
                    letter.classList.add("fade-in");  //此时下一个字母淡入
                    letter.style.opacity = 1;  //淡入后恢复透明度
                }, 500);
            } else if (isRight == 0) {
                letter.classList.add("fade-out-wrong");
                letter.style.opacity = 0;
                setTimeout(function () {
                    letter.innerHTML = letterStr;
                    letter.classList.remove("fade-out-wrong");
                    letter.classList.add("fade-in");
                    letter.style.opacity = 1;
                }, 500);
            }
        }

        //重新开始游戏
        function resetGame() {
            scoreValue = 0;
            keydownCount = 0;
            score.innerHTML = 0;
            tips.innerHTML = "请在按键上按下屏幕上显示的字母";
            randomLetter(1);
        }

        //小数转百分数
        function toPercent(point) {
            var str = Number(point * 100).toFixed(1);
            str += "%";
            return str;
        }
    </script>
</body>

</html>

七月末丷

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生JS实现打字游戏

一、实现效果二、源码主要的应用为：1.获取对应键位的unicode2.监听键盘按下（onkeydown）3.淡进、淡出的动画具体的实现过程在注释已经写的很详细了不再赘述，源码奉上：<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=e
复制链接

扫一扫