HTML+CSS+JS 前端基础学习打字小游戏

罗罗诺亚D路飞

已于 2023-02-17 16:40:42 修改

阅读量195

点赞数 1

分类专栏：前端基础打字小游戏文章标签： html css javascript 游戏

于 2023-02-17 16:29:59 首次发布

本文链接：https://blog.csdn.net/weixin_72923430/article/details/129089510

版权

前端基础同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

打字小游戏

1 篇文章 0 订阅

订阅专栏

这是一个介绍如何使用HTML、CSS和JavaScript创建基本打字游戏的博客文章。代码示例展示了如何生成随机字母、移动小球以及处理用户输入来消除匹配的字母。游戏的目标是防止小球越过红线，当成功匹配字母时，分数会增加。

摘要由CSDN通过智能技术生成

前端基础学习打字小游戏

html+css+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>Document</title>
    <style>
        .box {
            width: 600px;
            height: 600px;
            background-color: rgb(158, 194, 194);
            position: relative;
            margin: auto;
        }

        .zm {
            width: 30px;
            height: 30px;
            font-size: 18px;
            float: left;
        }

        .zm2 {
            width: 90px;
            height: 30px;
            font-size: 18px;
            float: left;
        }

        .mb {
            font-size: 18px;
            text-align: center;
            /* display: none; */
            text-align: center;
        }
        .yxsb{
            position: absolute;
            top: 450px;
            left: 100px;
            width: 200px;
            border: 1px solid #000;
            display: none;
        }
        .qd{
            font-size: 16px;
        }
        .hx{
            width: 100%;
            font-size: 16px;
            color: red;
            border-top: 2px solid rgb(255, 0, 0);
            position: absolute;
            top: 400px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="zm">

        </div>
       
        <div class="hx">
            不要让小球越过红线
        </div>
        <div class="zm2">
            已被消除
        </div>
        <div class="zm3">
            0
        </div>
        <div class="yxsb">
            游戏失败  <br>
            <a href="">
                <div class="qd">
                    点击确定重新开始
                </div>
            </a>
        </div>
    </div>
</body>
<script>
    var box = document.querySelector(".box")
    var zmsz = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']
    var ab = setInterval(runabc, 300)
    function runabc() {

        for (var i = 0; i < 1; i++) {
            var $a = Math.floor(Math.random() * 26);
            var $b = Math.floor(Math.random() * 400);
            var $c = Math.floor(Math.random() * 500);
            var $d = Math.floor(Math.random() * 255);
            var $e = Math.floor(Math.random() * 255);
            var $f = Math.floor(Math.random() * 255);
          

            var $qq = document.createElement("div");

            $qq.style.cssText = ("width:" + 35 + "px;height: " + 35 + "px;border-radius: 50%; background-color: rgb(" + $d + ", " + $e + ", " + $f + ");position: absolute;  top:" + $b + "; left: " + $c + "px;");
            $qq.classList.add("mb")

            box.append($qq);

            // 获取元素
            var p1 = document.querySelectorAll(".mb")
            p1[p1.length - 1].innerHTML = zmsz[$a]
            for (let j = 0; j < p1.length; j++) {
                // 获取p的属性,目的为不断的刷新，新的位置
                var top1 = window.getComputedStyle(p1[j], null).top;
             

                for (let q = 0; q < top1.length; q++) {
                    if (parseInt(top1) > 370) {
                      var yxsb=document.querySelector(".yxsb")
                      yxsb.style.cssText+="display: block;"
                      clearInterval(ab);
                      return

                    }
                }



                p1[j].style.transition = "top  1.5s";
                p1[j].style.top = parseInt(top1) + 13 + 'px';
            }
        }

    }
    var zm = document.querySelector(".zm")
    var zm3 = document.querySelector(".zm3")
    var xmsl=0
    //当键盘按下时
    document.addEventListener("keydown", taa, false);
    function taa(e) {
        //获取小球数组
        var mb = document.querySelectorAll(".mb")
        let mbarr=[]
        //循环小球
        for (let k = 0; k < mb.length; k++) {
            //如果小球的内容和按下键内容相等
            if (mb[k].innerHTML == zmsz[e.keyCode - 65]) {
                mbarr.push(mb[k])
                console.log('小球',mbarr);
                console.log(mbarr[mbarr.length-1]);
            }
        }
        if(mbarr.length>0){
            xmsl+=1
            zm3.innerHTML =xmsl
            box.removeChild(mbarr[0])

            zm.innerHTML = zmsz[e.keyCode - 65]
        }
        //提示那个字母被消除


       
    }



</script>

</html>