原生js实现【打地鼠】小游戏

芜湖起飞啦
276 阅读1分钟

一.整体效果

image.png

二.实现思路

1.使用表格标签，把整个容器划分为9个格子（也可以更多，思路一样数量变化）

  <div class="d1">
            <!-- 定义一个div标签用来存放分数 -->
            <div class="sorce">
                <p id="level">第1关</p>
                <p id="zong">总分：0</p>
            </div>
            <!-- 定义一个表格，存放坑位 -->
            <table id="box">
                <caption>
                    打地鼠
                </caption>
                <tr id="t">
                    <td><img src="images/keng.gif" alt="keng" /></td>
                    <td><img src="images/keng.gif" alt="keng" /></td>
                    <td><img src="images/keng.gif" alt="keng" /></td>
                </tr>
                <tr>
                    <td><img src="images/keng.gif" alt="keng" /></td>
                    <td><img src="images/keng.gif" alt="keng" /></td>
                    <td><img src="images/keng.gif" alt="keng" /></td>
                </tr>
                <tr>
                    <td><img src="images/keng.gif" alt="keng" /></td>
                    <td><img src="images/keng.gif" alt="keng" /></td>
                    <td><img src="images/keng.gif" alt="keng" /></td>
                </tr>
            </table>
        </div>

样式代码

            table {
                background-image: url("images/beijing.jpg");
                width: 335px;
                position: relative;
                left: 50%;
                top: 10px;
                transform: translate(-50%, 0);
            }

            table > caption {
                font-family: "微软雅黑";
                font-size: 20px;
            }

            table > td {
                width: 100px;
                height: 50px;
            }

            img {
                margin-top: 35px;
            }

            body {
                cursor: url("images/e.ico"), -moz-cell;
            }

            .sorce {
                width: 325px;
                height: 100px;
                background-color: rgb(166, 212, 253);
                /* float: left; */
                text-align: center;
                line-height: 40px;
                position: relative;
                left: 50%;
                transform: translate(-50%, 0);
            }

            .d1 {
                position: relative;
            }

2.每个td设置背景图，作为地鼠还未钻出时的背景图片。

3.封装四个方法

  •  地鼠出现方法

  •  地鼠消失方法

  •  击打地鼠方法

  •  地鼠没出来却击打了的惩罚方法

4.设置延时器，调用地鼠出现方法，出现方法内再调用消失方法，消失方法内再调用出现方法。代码如下

 function showin() {
                nums = Math.floor(Math.random() * dishus.length);
                dishus[nums].src = "images/dishu.gif";
                dishus[nums].style.marginTop = "auto";
                dishus[nums].setAttribute("onclick", "beat()");
                setTimeout(hideof, Math.random() * 500 + 1000);
            }


            function hideof() {
                dishus[nums].src = "images/keng.gif";
                dishus[nums].removeAttribute("onclick");
                dishus[nums].style.marginTop = "35px";
                setTimeout(showin, Math.random() * 500 + 1000);
            }

难点在于地鼠出现的洞口是随机出现，故考虑使用随机数

三.完整代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>打地鼠</title>
        <style>
            table {
                background-image: url("images/beijing.jpg");
                width: 335px;
                position: relative;
                left: 50%;
                top: 10px;
                transform: translate(-50%, 0);
            }

            table > caption {
                font-family: "微软雅黑";
                font-size: 20px;
            }

            table > td {
                width: 100px;
                height: 50px;
            }

            img {
                margin-top: 35px;
            }

            body {
                cursor: url("images/e.ico"), -moz-cell;
            }

            .sorce {
                width: 325px;
                height: 100px;
                background-color: rgb(166, 212, 253);
                /* float: left; */
                text-align: center;
                line-height: 40px;
                position: relative;
                left: 50%;
                transform: translate(-50%, 0);
            }

            .d1 {
                position: relative;
            }
        </style>
    </head>

    <body>
        <div class="d1">
            <!-- 定义一个div标签用来存放分数 -->
            <div class="sorce">
                <p id="level">第1关</p>
                <p id="zong">总分：0</p>
            </div>
            <!-- 定义一个表格，存放坑位 -->
            <table id="box">
                <caption>
                    打地鼠
                </caption>
                <tr id="t">
                    <td><img src="images/keng.gif" alt="keng" /></td>
                    <td><img src="images/keng.gif" alt="keng" /></td>
                    <td><img src="images/keng.gif" alt="keng" /></td>
                </tr>
                <tr>
                    <td><img src="images/keng.gif" alt="keng" /></td>
                    <td><img src="images/keng.gif" alt="keng" /></td>
                    <td><img src="images/keng.gif" alt="keng" /></td>
                </tr>
                <tr>
                    <td><img src="images/keng.gif" alt="keng" /></td>
                    <td><img src="images/keng.gif" alt="keng" /></td>
                    <td><img src="images/keng.gif" alt="keng" /></td>
                </tr>
            </table>
        </div>

        <script>
            //获取数据
            var dishus = document.getElementsByTagName("img");
            var nums = 0;
            var sum = 0;
            var box = document.getElementById("box");
            var t = document.getElementById("t");
            var res = document.getElementsByTagName("tr");
            // alert(dishus.length);
            if (sum == 0) {
                setTimeout(showin, 1000);
            }
            //地鼠显示方法
            function showin() {
                nums = Math.floor(Math.random() * dishus.length);
                dishus[nums].src = "images/dishu.gif";
                dishus[nums].style.marginTop = "auto";
                dishus[nums].setAttribute("onclick", "beat()");
                setTimeout(hideof, Math.random() * 500 + 1000);
            }

            //地鼠隐藏方法

            function hideof() {
                dishus[nums].src = "images/keng.gif";
                dishus[nums].removeAttribute("onclick");
                dishus[nums].style.marginTop = "35px";
                setTimeout(showin, Math.random() * 500 + 1000);
            }

            //击打地鼠方法

            function beat() {
                dishus[nums].src = "images/shang.gif";
                sum += 10;
                dishus[nums].style.marginTop = "0px";

                document.getElementById("zong").innerHTML = "总分：" + sum;
            }

            for (var i = 0; i < dishus.length; i++) {
                // 由于在循环时 ，当我们页面打开时，一瞬间 循环已经完成，因此此时的i就是最后一个数，所以我们选中的一直是最后一个img
                //此处可用let声明变量或每次循环时保存当前i值
                dishus[i].index = i;
                console.log(dishus[i].index)

                dishus[dishus[i].index].addEventListener("click", function () {
                    console.log(this);
                    console.log(this.src.indexOf("dishu"));
                    var flag = this.src.indexOf("dishu");
                    if (flag == -1) {
                        sum -= 10;
                        document.getElementById("zong").innerHTML =
                            "总分：" + sum;
                    }
                })
        </script>
        <hr />
    </body>
</html>
avatar
文章
阅读
粉丝