HTML+js实现简单的打地鼠小游戏

首先是内容和样式
这里是建立了3*3的方格
statu属性用于记录是否砸中了地鼠

 <style type="text/css">*{margin: 0;padding: 0;}.main{width: 300px;height: 300px;margin:100px auto;}tr{height: 100px;}td{width: 100px;}</style><body><div class="main"><form><div class="curResult"><input type="text" id="time" value="剩余时间"/><input type="text" id="put" value="打到0个"/></div><div><table frame="box" rules="all"><tr><td id="0" onclick="onClick(this)" state="no"></td><td id="1" onclick="onClick(this)" state="no"></td><td id="2" onclick="onClick(this)" state="no"></td></tr><tr><td id="3" onclick="onClick(this)" state="no"></td><td id="4" onclick="onClick(this)" state="no"></td><td id="5" onclick="onClick(this)" state="no"></td></tr><tr><td id="6" onclick="onClick(this)" state="no"></td><td id="7" onclick="onClick(this)" state="no"></td><td id="8" onclick="onClick(this)" state="no"></td></tr></table></div><input type="button" onclick="start()" value="开始"/></form><div/></body>

然后是script

<script>var curCount;var ranCount;var curTotal=0;var Count = document.getElementsByTagName("td");var time = 10;  //初始时间为10var overRandom;var overClear;var overSub;function randomCount(){var ran = Math.random()*9|0;//随机一个1到9的数curCount = document.getElementById(ran);curCount.style.backgroundImage="url(img/1.jpg)"; //背景图片为地鼠出现curCount.style.backgroundSize="cover";curCount.state="yes";                            ranCount=ran;}//清空9个方格function clear(){for(var i=0;i<9;i++){var forCount = document.getElementById(i);forCount.style.backgroundImage="url(img/0.jpg)";forCount.style.backgroundSize="cover";forCount.state="no";}}//点击砸中地鼠function onClick(v){if(v.state=="yes"){v.style.backgroundImage="url(img/2.jpg)";v.style.backgroundSize="cover";curTotal++;document.getElementById("put").value="打到"+curTotal+"个";}}//时间减少function timeSub(){time--;document.getElementById("time").value="剩余时间"+time+"s";if(time<=0){window.clearInterval(overRandom);window.clearInterval(overClear);window.clearInterval(overSub);clear();alert("游戏结束，你打到了"+curTotal+"个");}}//用定时器周期生成和清空地鼠function start(){time=10;curTotal=0;overRandom = window.setInterval("randomCount()",600);overClear = window.setInterval("clear()",2100);overSub = window.setInterval("timeSub()",1000);}</script>

效果演示

HTML+js实现简单的打地鼠小游戏相关推荐

js实现简单的俄罗斯方块小游戏
js实现简单的俄罗斯方块小游戏开始 1. 创建一个宽为 `200px`,高为 `360px` 的背景容器 2. 在该容器上创建一个 `20 * 20` 的块元素 3. 控制该元素的移动,每次移动 ` ...
php掷骰子游戏,js实现简单掷骰子小游戏
本文实例为大家分享了js掷骰子小游戏的具体代码,供大家参考,具体内容如下实现方法: 方法一:通过background-position.background-image.backg-repeat三个 ...
html与js简单小游戏,JS实现简单贪吃蛇小游戏
本文实例为大家分享了JS实现简单贪吃蛇游戏的具体代码,供大家参考,具体内容如下 1.使用语言 HTML+CSS+JavaScript 2.使用工具 visual studio code 3.GitHu ...
打地鼠小游戏（HTML5+CSS+JS）
打地鼠小游戏(HTML5+CSS+JS) 文章目录打地鼠小游戏(HTML5+CSS+JS) 预设有两个文件(htlm和css)加一个文件夹(放图片) 设置基本界面 (1)背景图 (2)开始按钮 (3 ...
【180730】WinForm打地鼠小游戏源码
本源码是采用WinForm进行开发的一个并非简单的打地鼠小游戏,有动画效果哈!有打地鼠.计分.过关等功能. 菜单功能: 1.运行游戏后,输入玩家姓名,点击开始 2.用鼠标点击从洞中钻出的地鼠给予打击 ...
原生JS实现一个简单的打字小游戏
原生JS实现一个简单的打字小游戏利用javascript制作一个简单的打字小游戏之前写了一个贪吃蛇小游戏好像反响不错今天我来写一个比贪吃蛇更low更简单的打字小游戏打字小游戏原理接下来咋们直 ...
linux打地鼠游戏代码,JavaScript实现打地鼠小游戏
一.实验说明 1. 环境介绍本实验环境采用Ubuntu Linux桌面环境,实验中会用到桌面上的程序: Xfce终端: Linux命令行终端,打开后会进入Bash环境,可以使用Linux命令 Fir ...
用DW敲-打地鼠小游戏
相信大部分的道友们都玩过打地鼠的游戏吧,游戏的机制非常简单,所以今天我就分享一个极其不完善的打地鼠小游戏的代码给大家. 为什么是极其不完善的呢?因为该有的功能基本有,不该有的功能当然没有啦! 说人话部 ...
java 打地鼠源代码_Java实现的打地鼠小游戏完整示例【附源码下载】
本文实例讲述了Java实现的打地鼠小游戏.分享给大家供大家参考,具体如下: 这里涉及到java线程和GUI的相关知识,一个简单的java小游戏打地鼠,有兴趣的朋友可以优化一下.先来看看运行效果: 具体 ...

HTML+js实现简单的打地鼠小游戏

HTML+js实现简单的打地鼠小游戏相关推荐

最新文章

热门文章