乘风原创程序

  • js实现打地鼠游戏(快来一起试试吧!!!)
  • 2020/8/10 11:23:01
  • 使用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

    觉得不错的话记得点个赞哦,一起加油,一起进步!

    本文地址:https://blog.csdn.net/qq_46256556/article/details/107880282