简单的打地鼠游戏

最新推荐文章于 2024-05-06 13:26:40 发布

小七的笔记

最新推荐文章于 2024-05-06 13:26:40 发布

阅读量1.3k

点赞数

分类专栏： html5 文章标签：游戏 html 打地鼠网页代码

本文链接：https://blog.csdn.net/qq_36159785/article/details/77871221

版权

html5 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

首先要准备材料：一张只有洞口没有地鼠，一张地鼠把头伸出洞口，一把打地鼠的锤子

<html>
    <head>
        <!-- 脚本 -->
        <script>
            var timer = 0;  // 声明变量timer，其初始值为0
            var isRun = false;// 声明变量isRun，用于判断是否正在运行
            var t1,t2;      // t1-表示计时 t2-老鼠出现
            var before = 0;// 上一个
            var score =0;
            function changeTime(){
                if(isRun == false){// 判断是否没有运行
                    isRun = true;   // 正在运行了
                    timer = 0;// 还原计时
                    score = 0;
                        document.getElementById("tR").innerHTML="积分："+score+"分";
                    running();// 调用running
                    displayMouse();// 出现老鼠
                }
            }
            function running(){
                timer++;    // 变量timer的值加1
                document.getElementById("tL").innerHTML = "时间:"+timer+"秒";// 修改id为tL的内容
                t1 = setTimeout("running()",1000);// 在1秒之后，调用方法running()
            }
            function stop(){
                isRun = false;// 表示停止
                clearTimeout(t1);// 停止t1表示的那个运行
                clearTimeout(t2);// 停止老鼠出现
                document.getElementById("t"+before).src = "ddsbj.png";// 结束的时候，消除老鼠
            }
            function displayMouse(){
                document.getElementById("t"+before).src = "ddsbj.png";// 把上一个老鼠去掉
                // Math.Random()-随机产生0~1,例如0.32
                before = parseInt(Math.random()*49012)%9;// 随机数(0~8的整数)(位置)
                document.getElementById("t"+before).src = "ddsm.png";// 把同id的src属性值改为ddsm.png
                t2 = setTimeout("displayMouse()",Math.random()*500+400);// 随机时间，随机位置，产生老鼠
            }
            function clickM(mouse){
                if(mouse.src.match("ddsm.png")){
                score++;
                document.getElementById("tR").innerHTML="积分："+score+"分";
                mouse.src="ddsbj.png";
                }
            }
        </script>
    </head>
    <body>
        <div id="main" style="width:600;margin:auto;cursor:url('h1.cur'),auto"> //设置锤子
            <!-- 上面 -->
            <div id="top" style="height:40">
                <div style="width:280;float:left">
                    <span id="tL" style="font-size:35">
                        时间:0秒
                    </span>
                </div>
                <div style="width:280;float:right;text-align:right">
                    <span id="tR" style="font-size:35;text-align:right">
                        积分:0分
                    </span>
                </div>
            </div>
            <!-- 中间 -->
            <div id="middle" style="height:360">
                <img onclick="clickM(this)" id="t1" src="ddsbj.png" style="width:200">
                <img onclick="clickM(this)" id="t2" src="ddsbj.png" style="width:200">
                <img onclick="clickM(this)" id="t3" src="ddsbj.png" style="width:200">
                <img onclick="clickM(this)" id="t4" src="ddsbj.png" style="width:200">
                <img onclick="clickM(this)" id="t5" src="ddsbj.png" style="width:200">
                <img onclick="clickM(this)" id="t6" src="ddsbj.png" style="width:200">
                <img onclick="clickM(this)" id="t7" src="ddsbj.png" style="width:200">
                <img onclick="clickM(this)" id="t8" src="ddsbj.png" style="width:200">
                <img onclick="clickM(this)" id="t0" src="ddsbj.png" style="width:200">
            </div>
            <br/>
            <!-- 下面 -->
            <div id="bottom" style="height:40">
                <table style="width:600;text-align:center"><tr><td>
                    <input type="button" value="开始" onclick="changeTime()" \
                         style="width:80;background-color:white;font-size:30">
                    <input type="button" value="结束" onclick="stop()" \
                         style="width:80;background-color:white;font-size:30">
                    <input type="button" value="暂停" \
                         style="width:80;background-color:white;font-size:30">
                </td></tr></table>
            </div>
        </div>
    </body>
</html>

注释很详细了，就不解释了，
代码地址：http://download.csdn.net/download/qq_36159785/9967356

小七的笔记

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
简单的打地鼠游戏

首先要准备材料：一张只有洞口没有地鼠，一张地鼠把头伸出洞口，一把打地鼠的锤子<html> <head>  <script> var timer = 0; // 声明变量timer，其初始值为0 var isRun = false;// 声明变量isRun，用于判断是否正在运行
复制链接

扫一扫

专栏目录