JavaScript案例——打地鼠游戏及其实现

最新推荐文章于 2024-05-06 13:26:40 发布
最新推荐文章于 2024-05-06 13:26:40 发布
阅读量1.5w 收藏 96
点赞数 21
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Cl_Daisy/article/details/78226537
版权

这是一个打地鼠游戏，废话不多说，直接上代码


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <style>
            #game_div{
                position: absolute;
            }
            #zt_div{
                position: absolute;
                width: 100%;
                height: 100%;
                top: 0px;
                left: 0px;
                background-color: #eeeeee;
                z-index: 100;
                opacity: 0.6;
                display: none;
            }
        </style>

        <script>

            var tl,jg,sc,djs_span,df_span,ksBtn,ztBtn,tzBtn;
            var imgs;
            var djs_id,jg_id,tl_id,play_id;
            var isStart;//判断是否开始，游戏开始为true，游戏暂停为false
            var isZT = false;//是否为暂停
            var djs_data;//倒计时的时间
            var jxGame_sc;//继续游戏的总时长
            var isOneStart = true;//判断是否为第一次开始
            var dz=0,ld=0,df=0;//游戏计分

            window.onload = function(){
                //获取HTML元素
                tl = document.getElementById("tl");
                jg = document.getElementById("jg");
                sc = document.getElementById("sc");
                djs_span = document.getElementById("djs");
                df_span = document.getElementById("defen");
                ksBtn = document.getElementById("ksBtn");
                ztBtn = document.getElementById("ztBtn");
                tzBtn = document.getElementById("tzBtn");
                imgs = document.images;
                zt_div = document.getElementById("zt_div");

                //游戏开始事件
                ksBtn.onclick = function(){
                    tl_time = parseInt(tl.value);//停留时间
                    jg_time = parseInt(jg.value);//间隔时间
                    sc_time = parseInt(sc.value);//游戏时长

                    //设置第一次开始游戏
                    isOneStart = true;

                    //记录游戏开始时间
                    start_Time = new Date();

                    //执行倒计时方法
                    djs();
                    //执行地鼠出现的方法
                    mouse_show();

                    //禁止用户操作输入框
                    isStart = true;
                    jinzhi();

                }

                //游戏暂停事件
                ztBtn.onclick = function(){
                    if(isZT){
                        //继续游戏
                        isOneStart = false;
                        zt_div.style.display = "none";
                        ztBtn.textContent = "暂停游戏";
                        isZT = false;

                        //继续游戏开始的时间
                        jxGame_startTime = new Date();
                        game_jx();
                        //执行地鼠出现的方法
                        qingchang();
                        mouse_show();

                        //禁止用户操作输入框
                        jinzhi();

                    }else{
                        //暂停游戏

                        game_zt();
                    }


                }


                //游戏结束事件
                tzBtn.onclick = function(){

                    game_over();
                    jinzhi();
                }

            }

            //倒计时方法
            function djs(){
                //实时记录游戏时间
                var game_time = new Date();
                //计算倒计时
                djs_data = sc_time*60 - parseInt((game_time-start_Time)/1000);

                //显示倒计时
                djs_span.innerHTML = djs_data;

                if(djs_data < 1 ){

                    alert("游戏结束");
                    game_over();
                    return;
                }

                //倒计时的计时器
                djs_id = setTimeout("djs()",1000);


            }

            //游戏暂停方法
            function game_zt(){
                clearTimeout(djs_id);
                clearTimeout(jg_id);
                clearTimeout(tl_id);
                if(!isOneStart){
                    clearTimeout(jxDJS_id);
                }
                zt_div.style.display = "block";
                ztBtn.textContent = "继续游戏";
                isZT = true;

                //获取倒计时，作为继续游戏的总时长
                jxGame_sc = djs_data;

            }

            //游戏继续方法
            function game_jx(){

                //继续游戏进行时
                var jxGame_timming = new Date();

                //重新计算倒计时
                djs_data = jxGame_sc - parseInt((jxGame_timming - jxGame_startTime)/1000);
                djs_span.innerHTML = djs_data;

                if(djs_data < 1 ){

                    alert("游戏结束");
                    game_over();
                    return;
                }

                jxDJS_id = setTimeout("game_jx()",1000);

            }

            //游戏结束
            function game_over(){
                clearTimeout(tl_id);
                clearTimeout(jg_id);
                clearTimeout(djs_id);
                clearTimeout(play_id);
                if(!isOneStart){
                    clearTimeout(jxDJS_id);
                }
                isStart = false;
                djs_span.innerHTML = 0;

                //恢复游戏场地
                zt_div.style.display = "none";

                //地鼠清场
                qingchang();

            }

            //地鼠清场
            function qingchang(){
                for (var i=0;i<imgs.length;i++) {
                    imgs[i].src = "img/00.jpg";
                }
            }

            //地鼠出现方法
            function mouse_show(){
                //生成随机的数组下标
                var i = parseInt(Math.random()*imgs.length);
                //随机改变图片
                imgs[i].src = "img/01.jpg";

                //地鼠出现间隔
                jg_id = setTimeout("mouse_show()",jg_time*1000);
                //地鼠停留时间
                tl_id = setTimeout("mouse_hide("+i+")",tl_time*1000);

            }

            //地鼠消失，没打中
            function mouse_hide(i){

                var name = imgs[i].src.substr(imgs[i].src.length-5,1);

                if(name == 1){
                    imgs[i].src = "img/00.jpg";

                    //计分
                    ld++;
                    df--;
                    if(df<=0){
                        df = 0;
                    }
                    df_span.innerHTML = "打中"+dz+"只，漏掉"+ld+"只，得分"+df;
                }



            }

            //打中地鼠
            function play(obj){

                //获取图片的名称
                var name = obj.src.substr(obj.src.length-5,1);

                if(name == 1){
                    obj.src = "img/02.jpg";

                    //计分
                    dz++;
                    df+=2;
                    df_span.innerHTML = "打中"+dz+"只，漏掉"+ld+"只，得分"+df;


                    //打中后还原
                    play_id = setTimeout(function(){
                        obj.src = "img/00.jpg";
//                      clearTimeout(tl_id);
                    },500);

                }

            }

            //禁止用户操作方法
            function jinzhi(){
                if(isStart){
                    tl.disabled = true;
                    jg.disabled = true;
                    sc.disabled = true;
                    ksBtn.disabled = true;
                }else{
                    tl.disabled = false;
                    jg.disabled = false;
                    sc.disabled = false;
                    ksBtn.disabled = false;
                }
            }

        </script>
    </head>
    <body>

        地鼠停留时间：<input id="tl" type="text" size="5" value="1" />秒<br />
        地鼠出现间隔：<input id="jg" type="text" size="5" value="1" />秒<br />
        游戏时长：<input id="sc" type="text" size="5px" value="1" />分钟<br />
        游戏倒计时：<span id="djs"></span>秒<br />
        游戏得分：<span id="defen"></span><br />

        <button id="ksBtn">开始游戏</button>
        <button id="ztBtn" >暂停游戏</button>
        <button id="tzBtn">停止游戏</button>

        <hr />
        <!--游戏区域-->
        <div id="game_div">
            <div id="zt_div"></div>
        <table border="1px">
            <tr>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
            </tr>
            <tr>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
            </tr>
            <tr>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
            </tr>
            <tr>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
            </tr>
            <tr>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
                <td><img src="img/00.jpg" onclick="play(this)" /></td>
            </tr>
        </table>
        </div>

        <span id="str"></span>
    </body>
</html>

这个是代码中所用到的图片
土地

地鼠图片

打中地鼠图片
效果图如下
打地鼠游戏

Cl_Daisy
关注
  • 21
    点赞
  • 踩
  • 96
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
tkinter按钮button组件参数解说
u011451175的博客
05-23 171
tkinter按钮button组件各参数解说 - 简书
Web前端学习笔记——JavaScript之面向对象游戏案例：贪吃蛇
唯恋殊雨的博客
09-24 1582
面向对象游戏案例：贪吃蛇 案例相关源码以上传到 GitHub ：https://github.com/lipengzhou/new-snake 案例介绍 游戏演示 在线演示地址：贪吃蛇 案例目标 游戏的目的是用来体会js高级语法的使用 不需要具备抽象对象的能力，使用面向对象的方式分析问题，需要一个漫长的过程。 功能实现 搭建页面 放一个容器盛放游戏场景 div#map，设置样式 #map { ...
Python 使用Pygame库实现打地鼠游戏：在屏幕上显示随机位置的地鼠图片、当玩家点击地鼠将会随机移动到新的位置。
最新发布
程序熊的博客
05-06 315
在屏幕上显示随机位置的地鼠图片。当玩家点击地鼠时，地鼠将会随机移动到新的位置。游戏界面采用白色背景，简洁清晰。通过这个项目，我们学习了如何使用Python和Pygame库来创建一个简单的打地鼠游戏。希望这个项目能够帮助你进一步了解游戏开发的乐趣，并为你探索更复杂的游戏功能铺平道路。
分享 10 个基于 Three.js 实现的小游戏
前端达人
07-29 5577
今天给大家分享10个基于Three.js 实现的小游戏。只需一个浏览器，就可以「打开下方链接,部分支持移动端」在线玩耍，简直不要泰裤辣！该学的学、想玩的玩，今天星期五，祝大家周末愉快。《Slow Roads》3D赛车游戏01Slow Roads是一款程序生成的休闲驾驶游戏，可让您暂时脱离生活，无休止地奔向遥远的地平线。设置适合您心情的风景，播放一些音乐，然后开车就行了。只需一个浏览器，就能驾车从森...
js小游戏案例_一个简单的“贪吃蛇”小游戏
weixin_39845221的博客
12-03 1273
一个简单的“贪吃蛇”小游戏前些日子给各位带来的是一些总结性或者案例性的文章，今天给各位带来一篇趣味性的游戏案例的文章！那么就开始吧！游戏操作规则贪吃蛇我想大家都有玩过，操作也相当清楚，就是控制蛇的方向去吃食物。若在PC段打开，可使用键盘的↑↓←→按键进行操作方向，若在移动端打开。可使用手势的↑↓←→或者下方虚拟按钮的↑↓←→进行操作方向。下面我们提供一个可试玩的案例。长按二维码可试玩！案例试玩页面...
JavaScript实现打地鼠小游戏
10-19
主要为大家详细介绍了JavaScript实现打地鼠小游戏的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
前端结课设计——打地鼠游戏
06-10
【前端结课设计——打地鼠游戏】是一个利用HTML5、CSS3和JavaScript技术实现的互动小游戏，旨在展示前端开发者在课程结束时所掌握的技术能力。这个游戏基于经典的打地鼠玩法，用户需快速点击出现在随机位置的地鼠，...
JavaScript实现打地鼠下游戏源码
01-12
JavaScript实现的打地鼠小游戏是一种常见的网页互动游戏，它利用了JavaScript的核心编程概念和技术来创建动态的、响应用户操作的游戏体验。在这个项目中，我们主要会涉及到以下几个关键的知识点： 1. **DOM操作**：...
vue实现打地鼠小游戏
10-14
在本示例中，我们看到一个使用Vue.js框架开发的小游戏——打地鼠。这个小游戏的实现主要包括以下几个关键点： 1. **模板结构**：Vue组件的`<template>`部分定义了游戏界面的HTML结构。游戏包含一个标题、一个游戏...
js欢乐打地鼠小游戏代码
07-24
JavaScript欢乐打地鼠小游戏是一种常见的网页互动娱乐项目，它利用JavaScript编程语言来实现游戏逻辑，为用户带来趣味盎然的体验。在本游戏中，玩家需要快速点击从地面冒出的地鼠，以尽可能多地击中它们。下面我们将...
Html5游戏案例
12-06
该资源主要包含关于html5做的游戏案例，以实现对javascript的综合性应用，同时也对HTML5的应用实战有了更好地认识
史上最经典的js案例，多达200案例
11-28
新手的终极帮手，开发者不可或缺的帮手，代码非常好用，只需要copy，paste就可以了。
50个js经典案例
12-19
50个常用的js的案例，便于初学者更好的学习js
JavaScript游戏：实现打地鼠
YanHSama的博客
11-18 379
效果图显示 html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} body{ b...
js 编写的简单游戏代码,js小游戏游戏代码大全
chatgpt002的博客
10-18 5761
像素鸟曾经是一个火爆一时的小游戏，我们尝试用JavaScript来实现像素鸟的核心功能。操作方式：鼠标点击胜利条件：无失败条件：小鸟碰到了屏幕上下的水管就算失败看似是小鸟在向前飞行，实际上是水管在向后移动，以减少内存的消耗。对于水管的显示，使用背景图片的background-size属性，设置100% 100% 即可让背景图片完全覆盖随机高度的div。对于水管的移动，使用css3的动画属性，这可以很方便的控制水管移动的距离、速度与方向。
js实现的推箱子小游戏（转）
zhanghaibing0903的专栏
10-21 862
function $id(id){return document.getElementById(id)}; function $name(name){return document.getElementsByName(name)}; //定义地图开始 var box =[] var map1 = [ [0,0,0,1,1,1,0,0,0,0], [0,0,0,1,4,1,0,0,0,0
web前端之HTML篇
m0_67522355的博客
07-23 648
HTML简介、组成、标签等详细介绍，欢迎大家浏览，如果遇到错误或者不同的想法，希望大家可以提出意见，我们共同进步
web前端 打地鼠小游戏
Zy804129的博客
12-02 1787
<style> html,body{ height: 100%; } body{ margin: 0; overflow: hidden; background-image: url(image/bg.jpg); /* 用户不能选择内容 */ user-select...
使用js实现打地鼠游戏
12-10
以下是使用JavaScript实现打地鼠游戏的代码示例： ```html <!DOCTYPE html> <html> <head> <title>打地鼠游戏</title> <style type="text/css"> #container { width: 500px; height: 500px; border: 1px solid black; position: relative; } #mouse { width: 50px; height: 50px; background-color: brown; border-radius: 50%; position: absolute; display: none; } </style> </head> <body> <h1>打地鼠游戏</h1> <p>点击开始游戏按钮开始游戏</p> <button onclick="start()">开始游戏</button> <div id="container"></div> <script type="text/javascript"> var container = document.getElementById("container"); var mouse = document.getElementById("mouse"); var score = 0; var timer; function start() { timer = setInterval(showMouse, 1000); } function showMouse() { var left = Math.floor(Math.random() * 450); var top = Math.floor(Math.random() * 450); mouse.style.left = left + "px"; mouse.style.top = top + "px"; mouse.style.display = "block"; setTimeout(hideMouse, 500); } function hideMouse() { mouse.style.display = "none"; } function hitMouse() { score++; document.getElementById("score").innerHTML = "得分：" + score; hideMouse(); } mouse.onclick = hitMouse; container.appendChild(mouse); </script> <p id="score">得分：0</p> </body> </html> ``` 这个游戏的实现主要是通过JavaScript来控制地鼠的出现和消失，并且在地鼠被点击时增加得分。具体实现过程如下： 1. 首先在HTML文件中创建一个容器div，用来放置地鼠，以及一个按钮和一个得分显示区域。 2. 在CSS文件中设置容器div的样式，包括宽度、高度、边框等。 3. 在JavaScript文件中定义变量container和mouse，分别表示容器div和地鼠。 4. 定义变量score和timer，分别表示得分和计时器。 5. 定义函数start，用来启动游戏，其中使用setInterval函数来定时调用showMouse函数。 6. 定义函数showMouse，用来显示地鼠，其中使用Math.random函数来生成随机的left和top值，然后设置地鼠的位置和显示状态，并且使用setTimeout函数来定时调用hideMouse函数。 7. 定义函数hideMouse，用来隐藏地鼠。 8. 定义函数hitMouse，用来处理地鼠被点击的事件，其中增加得分并且隐藏地鼠。 9. 将hitMouse函数绑定到地鼠的onclick事件上。 10. 将地鼠添加到容器div中。 11. 在HTML文件中添加得分显示区域，并且在JavaScript文件中更新得分。
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值