打字游戏利用js的事件监听

最新推荐文章于 2023-01-28 14:13:12 发布

小粗腿Cc

最新推荐文章于 2023-01-28 14:13:12 发布

阅读量3.4k

点赞数 1

文章标签： vscode javascript 前端 html5

本文链接：https://blog.youkuaiyun.com/weixin_45249263/article/details/123810166

版权

本文介绍了一个使用JavaScript编写的简单打字游戏。通过事件监听技术，该游戏能够检测用户的键盘输入，并根据输入正确与否给出反馈，同时记录分数。文章提供了完整的源代码及注释。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文主要讲述如何利用javascript的事件监听来编写一个相对简单的打字游戏

代码里已有较详细的注释，故此就不再多说什么啦！

打字游戏

（其中有我自己封装的数学工具js文件，在最下面，需要将该JS文件引用才能实现打字游戏噢，当然这个封装好的数学工具JS文件，大家都可以拿去直接用的，虽然内容没有多少，但是常用）

<!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">
    <title>打字游戏</title>
    <script src="../W2/03mathtool.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        h1 {
            margin: 100px 0 20px 70px;
            font-size: 73px;
        }

        p {
            margin: 0px 0 0px 50px;
        }

        .normal {
            color: black;
        }

        .right {
            color: rgb(1, 247, 255);
            font-size: 40px;
        }

        .wrong {
            color: rgb(255, 193, 216);
            font-size: 40px;
        }

        button{
            width: 100px;
            height: 40px;
            font-size: 20px;
            letter-spacing: 5px;
            font-weight: 800;
            margin: 40px 0 0 50px;
        }
    </style>
</head>

<body>
    <h1></h1>
    <p>来吧，同志露一手给Ye看看！</p>
    <button>重来</button>
    <script>
        var chars = "abcdefghijklmnopqrstuvwxyx"

        var letter = ""
        var score = 0

        var h1 = document.querySelector("h1")
        var p = document.querySelector("p")
        var btn = document.querySelector("button")

        // 封装一个0-24的随机数随机选择1个字母 
        function getRandomLeter() {
            letter = chars[getRandom(0, 24)]
            h1.innerText = letter
            // console.log("letter",letter);
            h1.style.color = getRandomColor1()
        }
        getRandomLeter()

        window.
        // 监听键盘点击事件
        document.onkeyup = function (ke) {
            // console.log("通过键盘按了：",ke.key);

            if (ke.key === "Escape") {
                var ret = window.confirm("同志，你确定要结束战斗吗？")
                if (ret) {
                    document.onkeyup = null
                    h1.innerText = "溜了溜了，欢迎下次光临！"
                    p.innerText = "您本轮的得分为：" + score
                    return

                } else {
                    window.alert("很好，那就继续战斗！")
                }
            }

            if (ke.key === letter) {
                p.classList.add("right")
                score += 1
                p.innerText = `哎哟不错喔，再来！得分：${score}`
            } else {
                p.classList.add("wrong")
                score -= 1
                p.innerText = `捞仔，就这？得分：${score}`
                if (score < 0) {
                    p.innerText = `捞仔，就这？得分：${score}</br>负数啦，还有很大的提升空间！`
                }
            }
            getRandomLeter()
        }

        btn.onclick = function(){
            location.reload()
            p.innerText = "Come on!"
        }
    </script>
</body>

</html>

数学工具03mathtool.js

/* 取[a,b]之间的随机整数 [1,10]*/
function getRandom(a, b) {
    return a + Math.round(Math.random() * (b - a))
    // return a + parseInt(Math.random() * (b - a + 1));
}

// 根据rgb（255,0，0）格式修改背景颜色
function getRandomColor() {
    var red = getRandom(0, 255)
    var green = getRandom(0, 255)
    var blue = getRandom(0, 255)
    var randomColor = `rgb(${red},${green},${blue})`
    // console.log(randomColor);
    return randomColor
}

// 根据十六进制 #58bc58 格式修改背景颜色 
// function getRandomColor2() {
//     var red = getRandom(0, 255)
//     var green = getRandom(0, 255)
//     var blue = getRandom(0, 255)

//     red = red.toString(16)
//     green = green.toString(16)
//     blue = blue.toString(16)

//     var randomColor = `#${red}${green}${blue}`
//     // console.log(randomColor);
//     return randomColor
// }

function css(css) {
    var style = document.createElement("style");
    style.type = "text/css";
    try {
        style.appendChild(document.createTextNode(css));
    } catch (ex) {
        style.styleSheet.cssText = css;
    }
    document.getElementsByTagName('head')[0].appendChild(style);
}

//点击页面任意位置，生成爱心效果 
function loveWheel() {
    (function (window, document, undefined) {
        var hearts = [];
        window.requestAnimationFrame = (function () {
            return window.requestAnimationFrame ||
                window.webkitRequestAnimationFrame ||
                window.mozRequestAnimationFrame ||
                window.oRequestAnimationFrame ||
                window.msRequestAnimationFrame ||
                function (callback) {
                    setTimeout(callback, 1000 / 60);
                }
        })();
        init();

        function init() {
            css(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: absolute;}.heart:after{top: -5px;}.heart:before{left: -5px;}");
            attachEvent();
            gameloop();
        }

        function gameloop() {
            for (var i = 0; i < hearts.length; i++) {
                if (hearts[i].alpha <= 0) {
                    document.body.removeChild(hearts[i].el);
                    hearts.splice(i, 1);
                    continue;
                }
                hearts[i].y--;
                hearts[i].scale += 0.004;
                hearts[i].alpha -= 0.013;
                hearts[i].el.style.cssText = "left:" + hearts[i].x + "px;top:" + hearts[i].y + "px;opacity:" + hearts[i].alpha + ";transform:scale(" + hearts[i].scale + "," + hearts[i].scale + ") rotate(45deg);background:" + hearts[i].color;
            }
            requestAnimationFrame(gameloop);
        }

        function attachEvent() {
            var old = typeof window.onclick === "function" && window.onclick;
            window.onclick = function (event) {
                old && old();
                createHeart(event);
            }
        }

        function createHeart(event) {
            var d = document.createElement("div");
            d.className = "heart";
            hearts.push({
                el: d,
                x: event.clientX - 5,
                y: event.clientY - 5,
                scale: 1,
                alpha: 1,
                color: getRandomColor()
            });
            document.body.appendChild(d);
        }
    })(window, document);
}