欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js实现打地鼠游戏(快来一起试试吧!!!)

程序员文章站 2022-06-24 11:21:42
使用js实现打地鼠游戏​ 相信很多小伙伴在学习js的路上充满了乐趣,因为可以用js写各种东西,当写出来的代码在浏览器中呈现想要的结果时,相信你们一定是充满成就感的,那么今天就来给大家介绍一下用js实现简单的童年游戏——打地鼠。是不是觉得好神奇,js还能这么玩,实际上小时候玩的很多种网页小游戏都可以用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>

当当当当~成品就是这样啦
js实现打地鼠游戏(快来一起试试吧!!!)

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

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

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