js实现打地鼠小游戏


Posted in Javascript onFebruary 13, 2017

话不多说,请看代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>打地鼠</title>
 <style type="text/css">
 #content {
 width:960px;
 margin:0 auto;
 text-align:center;
 margin-top:40px;
 }
 #form1 {
 margin:20px 0;
 }
 table {
 margin:0 auto;
 cursor:url(http://cdn.attach.qdfuns.com/notes/pics/201702/12/115915n79d7hvffengpdxe.png),auto;
 }
 td {
 width:95px;
 height:95px;
 background:#00ff33;
 }
 </style>
 <script type="text/javascript">
 var td = new Array(),  //保存每个格子的地鼠
 playing = false,  //游戏是否开始
 score = 0, //分数
 beat = 0, //鼠标点击次数
 success = 0, //命中率
 knock = 0, //鼠标点中老鼠图片的次数
 countDown = 30, //倒计时
 interId = null, //指定 setInterval()的变量
 timeId = null; //指定 setTimeout()的变量
 //游戏结束
 function GameOver(){
 timeStop();
 playing = false;
  clearMouse();
 alert("游戏结束!\n 你获得的分数为:"+score+"\n 命中率为:"+success);
 success = 0;
 score = 0;
 knock = 0;
 beat = 0;
 countDown = 30;
 }
 //显示当前倒计时所剩时间
 function timeShow(){
 document.form1.remtime.value = countDown;
 if(countDown == 0){
 GameOver();
 return;
 }else{
 countDown = countDown-1;
 timeId = setTimeout("timeShow()",1000);
 }
 }
 //主动停止所有计时
 function timeStop() {
 clearInterval(interId);
 clearTimeout(timeId); 
 }
 //随机循环显示老鼠图片
 function show(){
 if(playing){
 var current = Math.floor(Math.random()*25);
 document.getElementById("td["+current+"]").innerHTML = '<img src="http://cdn.attach.qdfuns.com/notes/pics/201702/12/115915w6tluu1gq8l1b54h.png">';
 setTimeout("document.getElementById('td["+current+"]').innerHtml=''",3000); //使用 setTimeout()实现3秒后隐藏老鼠图片
 }
 }
 //清除所有老鼠图片
 function clearMouse(){
 for(var i=0;i<25;i++){
 document.getElementById("td["+i+"]").innerHTML="";
 }
 }
 //点击事件函数,判断是否点中老鼠
 function hit(id){
 if(playing == false){
 alert("请点击开始游戏!");
 return;
 }else{
 beat += 1;
 if(document.getElementById("td["+id+"]").innerHTML != ""){
 score += 1;
 knock += 1;
 success = knock/beat;
 document.form1.success.value = success;
 document.form1.score.value = score;
 document.getElementById("td["+id+"]").innerHTML = "";
 }else{
 score += -1;
 success = knock/beat;
 document.form1.success.value = success;
  document.form1.score.value = score;
 }
 }
 }
 //游戏开始
 function GameStart(){
 playing = true;
 interId = setInterval("show()",1000); 
 document.form1.score.value = score;
 document.form1.success.value = success;
 timeShow();
 } 
 </script>
</head>
<body>
 <div id="content">
 <input type="button" value="开始游戏" onclick="GameStart()" />
 <input type="button" value="结束游戏" onclick="GameOver()" />
 <form name="form1" id="form1">
  <label>分数:</label>
  <input type="text" name="score" size="5">
  <label>命中率:</label>
  <input type="text" name="success" size="10">
  <label>倒计时:</label>
  <input type="text" name="remtime" size="5">
 </form> 
 <table>
  <tr>
  <td id="td[0]" onclick="hit(0)"></td>  
  <td id="td[1]" onclick="hit(1)"></td>
  <td id="td[2]" onclick="hit(2)"></td>
  <td id="td[3]" onclick="hit(3)"></td>
  <td id="td[4]" onclick="hit(4)"></td>
  </tr>
  <tr>
  <td id="td[5]" onclick="hit(5)"></td>
  <td id="td[6]" onclick="hit(6)"></td>
  <td id="td[7]" onclick="hit(7)"></td>
  <td id="td[8]" onclick="hit(8)"></td>
  <td id="td[9]" onclick="hit(9)"></td>
  </tr>
  <tr>
  <td id="td[10]" onclick="hit(10)"></td>
  <td id="td[11]" onclick="hit(11)"></td>
  <td id="td[12]" onclick="hit(12)"></td>
  <td id="td[13]" onclick="hit(13)"></td>
  <td id="td[14]" onclick="hit(14)"></td>
  </tr>
  <tr>
  <td id="td[15]" onclick="hit(15)"></td>
  <td id="td[16]" onclick="hit(16)"></td>
  <td id="td[17]" onclick="hit(17)"></td>
  <td id="td[18]" onclick="hit(18)"></td>
  <td id="td[19]" onclick="hit(19)"></td>
  </tr>
  <tr>
  <td id="td[20]" onclick="hit(20)"></td>
  <td id="td[21]" onclick="hit(21)"></td>
  <td id="td[22]" onclick="hit(22)"></td>
  <td id="td[23]" onclick="hit(23)"></td>
  <td id="td[24]" onclick="hit(24)"></td>
  </tr>
 </table>
 </div>
</body>
</html>

流程设计:

  • 点击“开始游戏”按钮游戏开始,否则将提示“请点击开始游戏”字样
  • 分数、命中率显示重置为“0”,倒计时开始(默认为30秒)
  • 老鼠图片不断显示、隐藏,玩家可点击鼠标左键进行游戏
  • 当30秒倒计时结束或者玩家主动点击“结束按钮”时,游戏结束并显示游戏结果

实例中用到的图片附件下载

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
再谈IE中Flash控件的自动激活 ObjectWrap
Mar 09 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
Nov 08 Javascript
jQuery.extend()、jQuery.fn.extend()扩展方法示例详解
May 08 Javascript
javascript基于prototype实现类似OOP继承的方法
Dec 16 Javascript
JavaScript位置与大小(1)之正确理解和运用与尺寸大小相关的DOM属性
Dec 26 Javascript
jQuery 监控键盘一段时间没输入
Apr 22 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
React Native如何消除启动时白屏的方法
Aug 08 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
Oct 15 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
canvas实现钟表效果
Feb 13 #Javascript
深入理解Javascript箭头函数中的this
Feb 13 #Javascript
ES6学习之变量的解构赋值
Feb 12 #Javascript
AngularJS实现路由实例
Feb 12 #Javascript
jQuery文字轮播特效
Feb 12 #Javascript
jQuery Mobile漏洞会有跨站脚本攻击风险
Feb 12 #Javascript
jQuery、zepto、js常用小技巧
Feb 12 #Javascript
You might like
如何过滤高亮显示非法字符
2006/10/09 PHP
PHP中函数rand和mt_rand的区别比较
2012/12/26 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
深入PHP购物车模块功能分析(函数讲解,附源码)
2013/06/25 PHP
Zend Framework教程之分发器Zend_Controller_Dispatcher用法详解
2016/03/07 PHP
PHP7匿名类用法分析
2016/09/26 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
2015/03/05 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
JS实现的简单图片切换功能示例【测试可用】
2017/02/14 Javascript
js中的面向对象入门
2017/03/06 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
jQuery回调方法使用示例
2017/06/26 jQuery
jquery实现搜索框功能实例详解
2018/07/23 jQuery
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
python三元运算符实现方法
2013/12/17 Python
python使用点操作符访问字典(dict)数据的方法
2015/03/16 Python
python基于BeautifulSoup实现抓取网页指定内容的方法
2015/07/09 Python
Python自动登录126邮箱的方法
2015/07/10 Python
python实现备份目录的方法
2015/08/03 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
Pycharm 创建 Django admin 用户名和密码的实例
2018/05/30 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
跑鞋、网球鞋、网球拍、服装及装备:Holabird Sports
2016/09/19 全球购物
西班牙在线光学:Visual-Click
2020/06/22 全球购物
颇特女士:NET-A-PORTER(直邮中国)
2020/07/11 全球购物
商务英语毕业生自荐信范文
2013/11/08 职场文书
新护士岗前培训制度
2014/02/02 职场文书
加强机关作风建设心得体会
2014/10/22 职场文书
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android