js实现打地鼠游戏（快来一起试试吧！！！）_JavaScript

js实现打地鼠游戏（快来一起试试吧！！！）

使用js实现打地鼠游戏

相信很多小伙伴在学习js的路上充满了乐趣，因为可以用js写各种东西，当写出来的代码在浏览器中呈现想要的结果时，相信你们一定是充满成就感的，那么今天就来给大家介绍一下用js实现简单的童年游戏——打地鼠。是不是觉得好神奇，js还能这么玩，实际上小时候玩的很多种网页小游戏都可以用js来实现哦，话不多说，上代码，咻咻咻~

<!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: 325px;
            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: 30px;
        }
        
        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 = '30px';
            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;

        }
    </script>
</body>

</html>

当当当当~成品就是这样啦
在这里插入图片描述

这只是个简单的打地鼠，我们也可以给它增加关卡，比如当分数增加到指定的数，我们可以增加数量，或者加快时间，或者缩小地鼠的大小，还可以一次冒出多只地鼠，有兴趣的话可以试一试哦！
附有素材链接：链接：https://pan.baidu.com/s/1AWQ5jEwvF0lnkx2V_wmiDQ 提取码：c7bw