别踩白块

最新推荐文章于 2021-06-02 17:59:44 发布

weixin_46370867

最新推荐文章于 2021-06-02 17:59:44 发布

阅读量339

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_46370867/article/details/109831120

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

人生的胜者决不会在挫折面前失去勇气

下面是对别踩白块小游戏的案例，希望可以帮助到有需要的小伙伴。
当然，我的代码还有很多不足，希望大佬指点。

别踩白块

静态界面

一个表格，用来表示游戏的白块和黑块

一个用来表示分数的div

一个用来表示时间的div

代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>别踩白块</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .bg {
            width: 400px;
            height: 700px;
            background-color: aquamarine;
            margin: 0 auto;
        }

        .bg p {
            font-size: 50px;
            text-align: center;
        }

        .bg .ge {
            width: 305px;
            height: 410px;
            background-color: #fff;
            margin: 0 auto;
            border: rgb(17, 4, 138) 5px solid;

        }

        .bg .top #score {
            width: 100px;
            height: 50px;
            background-color: aquamarine;
            float: left;
            margin-top: -53px;
        }

        .bg .top #score span {
            font-size: 20px;
            color: chocolate;
            font-weight: bold;
        }


        .bg .top #timer span {
            font-size: 20px;
            color: red;
            font-weight: bold;
        }


        td {
            width: 100px;
            height: 100px;
            border-collapse: collapse;
            border-top: 1px solid rgb(80, 4, 4);
            border-right: 1px solid rgb(80, 4, 4);
            /* 如果给table加上 border-collapse: collapse; 样式，向下移动的最后一行不会隐藏  */
            /* 为了达到效果，单独给td设置上边框和右边框 */
        }

        #mytable {
            width: 300px;
            height: 400px;
            /* 将表格的单元格合为一条边框 最后一行不会被隐藏 */
            /* border-collapse: collapse; */
            margin: 0 auto;
        }




        .ge {
            width: 300px;
            height: 400px;
        }



        #anjian {
            color: red;
        }

        #anjian #a {
            width: 95px;
            height: 40px;
            background-color: teal;
            margin-top: 20px;
            margin-left: 53px;
            text-align: center;
            line-height: 40px;
            font-size: 35px;
        }

        #anjian #s {
            width: 95px;
            height: 40px;
            background-color: rgb(193, 206, 7);
            margin-top: -40px;
            margin-left: 153px;
            text-align: center;
            line-height: 40px;
            font-size: 35px;
        }

        #anjian #d {
            width: 95px;
            height: 40px;
            background-color: rgb(147, 9, 160);
            margin-top: -40px;
            margin-left: 255px;
            text-align: center;
            line-height: 40px;
            font-size: 35px;
        }

        .bg .top #count {
            width: 150px;
            height: 80px;
            /* background-color: rgb(207, 11, 198); */
            color: blue;
            text-align: center;
            line-height: 80px;
            font-size: 30px;
            margin-top: 10px;
        }

        .bg .top #timer {
            float: right;
            margin-top: -53px;
            width: 150px;
            height: 80px;
            /* background-color: rgb(207, 11, 198); */
            color: blue;
            text-align: center;
            line-height: 80px;
            font-size: 30px;
            margin-top: -80px;
        }
    </style>
</head>

<body>
    <div class="bg">

        <p>别踩白块</p>

        <div class="top">
            <div id="count">分数:0</div>
            <!-- <div id="timer"><span>00:00:00</span></div> -->
            <div id="timer">00:00:00</div>

        </div>

        <div class="ge">
            <!-- cellspacing 设置内容到边框的距离 -->
            <table id="mytable" cellspacing="0">
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>

                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>

                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>

                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </table>
        </div>
        <div id="anjian">
            <div id="a">A</div>
            <div id="s">S</div>
            <div id="d">D</div>
        </div>
    </div>
</body>

</html>

动态界面

通过随机数，将每一行中某一列的方块变成黑色

在表格的第一行的前面生成新的一行

表格的最后一行向下移动，当完全移动完一行后将移动出去的一行隐藏，

同时，前面新生成的一行会进入表格的大边框中

键盘事件：点击每一行的黑色方块，点击到黑方块就加分，点击到白方块游戏结束

键盘点击的时候表格会变化，游戏开始。

时间：计时器

分数：函数让分数自增

游戏结束：表格不再变化，显示最终时间，显示最终分数

代码：

<script>
        // 分数
        var score = 0;
        var sco = document.getElementById('count');
        // 时间
        var time = document.getElementById('timer');
        // 创建新的一行
        newhang = document.createElement('tr');
        // 获取表格的第一行
        var tab = document.getElementsByTagName('table')[0];
        // 控制移动
        var btn = 1;
        // 时 分 秒
        var hour = 0;
        var min = 0;
        var sec = 0;
        // 统计分数  
        var int;
        // 设置初始状态
        var bool = true;
        // 获取行
        var hang = document.getElementsByTagName("tr");

        // 随机改变每行中一列的颜色

        // 第1行随机一列
        hang[0].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
        // 第2行随机一列
        hang[1].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
        // 第3行随机一列
        hang[2].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
        // 第4行随机一列
        hang[3].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';

        // 键盘按下
        onkeydown = function (event) {
            if (bool == true) {
                // 设置下移速度 // 每十毫秒调用一次times函数
                int = setInterval(times, 10);
                // 结束执行
                bool = false;
            }

            // 用户点击最后一行（第4行）的黑块
            window.onclick = function () {
                switch (event.key) {
                    case 'a':
                        if (hang[3].children[0].style.background == 'black') {
                            speed();
                        } else {
                            over();
                        }
                        break;
                    case 's':
                        if (hang[3].children[1].style.background == 'black') {
                            speed();
                        } else {
                            over();
                        }
                        break;
                    case 'd':
                        if (hang[3].children[2].style.background == 'black') {
                            speed();
                        } else {
                            over();
                        }
                        break;
                }
            }()

        }


        // 新增行 -- 新增行的方法相当于 
        /*
            <tr>
                <td>
                <td>
                <td>
            </tr>
        */
        function adds() {
            // 创建一行
            // inserRow()方法 - 向表格中的指定位置插入一行  table调用该方法
            // 新增的一行要放在表格的最上面
            mytable.insertRow(0);
            for (var i = 0; i < 3; i++) {
                // 新增td三次，新增了三列
                // insertCell()方法 在表格的一行的指定位置插入一个空的方块(td元素)
                hang[0].insertCell();
            }
            // 改变最上面 新增的一行中，随机一列的颜色
            hang[0].children[Math.ceil(Math.random() * 3) - 1].style.background = 'black';
        };

        function scores() {
            score += 1;
            sco.innerHTML = "分数:" + score;
        };

        // 整体移动的效果
        function speed() {
            adds();
            scores();
            xiayi();
            hang[4].style.opacity = 0;
        }
        // 最后一行向下移动
        function xiayi() {

            // 如果正好向下移动了(一个小方块的高度)100px
            // 设置btn的初始值为1，小方块的高度是100，
            // btn每次都要变大，直到btn的值为100，就向下移动了一个小方块
            if (btn % 100 != 0) {
                // 这是操纵了表格的样式中的底边的值
                // 最后一行向下移动的同时，表格的大边框会向上移动，当最后一行完全向下移动出去
                // (即向下移动了一行的高度(100px)),表格的大边框就会相对于 向下移动的那一行的底边 向上移动100px，也会把最上面生成的一行包括进table的大边框中
                // bottom属性 - 把表格边框的最底边 设置在其包含格边框的最底边的 上面 101 像素高的位置：
                mytable.style.bottom = -btn - 1 + 'px';
                btn++;
                // 计算时间
                /*
                    setTimeout(xiayi, 10); 没10毫秒调用一次xiayi函数
                    setTimeout(code,millisec)
                    code : 必需。要调用的函数后要执行的 JavaScript 代码串
                    millisec : 必需。在执行代码前需等待的毫秒数
                    注意：setTimeout() 只执行 code 一次。如果要多次调用，可以用 setInterval() 或者让 code 自身再次调用 setTimeout()
                */
                setTimeout(xiayi, 10);
            } else {
                // 时间停止
                clearTimeout(xiayi);
                btn++;
            };
        }

        // 计时器
        // 每十毫秒时间的显示的数字就会加一
        // 因为 int = setInterval(times, 10);
        function times() {
            // 秒数加1
            sec++;
            // sec的初始值为0，当sec等于59的时候，sec加了60次，即60秒，此时就是1分钟了,将秒数重置为0
            if (sec > 59) {
                sec = 0;
                min++;
            }
            // min的初始值为0，当min等于59的时候，min加了60次，即60分钟，此时就是1小时了,将分钟数重置为0
            if (min > 59) {
                min = 0;
                hour++;
            }
            // 显示该时间

            time.innerHTML = (hour < 10 ? "0" + hour : hour) + ":" + (min < 10 ? "0" + min : min) + ":" + (sec < 10 ? "0" + sec : sec);
        }

        // 游戏结束
        function over() {
            //innerHTML 属性可以设置或者在页面上显示 内容 
            //innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
            alert('游戏结束,得分：' + score + ';用时' + time.innerHTML);
            //clearInterval() 方法可取消由 setInterval() 设置的 timeout。
            //clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
            clearInterval(int);
            //重置各个值
            time.innerHTML = ("00" + ":" + "00" + ":" + "00");
            score = 0;
            //innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。
            sco.innerHTML = "分数:" + score;
            bool = true;
        }

    </script>