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 相关文章推荐
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
Jquery Ajax学习实例6 向WebService发出请求,返回DataSet(XML) 异步调用
Mar 18 Javascript
js中巧用cssText属性批量操作样式
Mar 13 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
angular json对象push到数组中的方法
Feb 27 Javascript
vue实现路由切换改变title功能
May 28 Javascript
JS实现点击发送验证码 xx秒后重新发送功能
Jul 30 Javascript
Angular value与ngValue区别详解
Nov 27 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
Jan 04 Javascript
手写实现JS中的new
Nov 07 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
用PHP读取IMAP邮件
2006/10/09 PHP
PHP 在线翻译函数代码
2009/05/07 PHP
php初始化对象和析构函数的简单实例
2014/03/11 PHP
php支持断点续传、分块下载的类
2016/05/02 PHP
Yii框架弹出窗口组件CJuiDialog用法分析
2017/01/07 PHP
浅谈PHP进程管理
2019/03/08 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
JQuery UI皮肤定制
2009/07/27 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
JS实现屏蔽shift,Ctrl,alt等功能键的方法
2015/06/01 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
详解Node.js中的事件机制
2016/09/22 Javascript
js编写三级联动简单案例
2016/12/21 Javascript
前端构建工具之gulp的语法教程
2017/06/12 Javascript
Windows安装Node.js报错:2503、2502的解决方法
2017/10/25 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
JS array数组检测方式解析
2020/05/19 Javascript
Python中断言Assertion的一些改进方案
2016/10/27 Python
Python字符编码与函数的基本使用方法
2017/09/30 Python
python 实现敏感词过滤的方法
2019/01/21 Python
python爬虫 2019中国好声音评论爬取过程解析
2019/08/26 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
css3学习之2D转换功能详解
2016/12/23 HTML / CSS
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
西部世纪.net笔试题面试题
2014/04/03 面试题
终端业务员岗位职责
2013/11/27 职场文书
致长跑运动员广播稿
2014/01/31 职场文书
电气个人求职信范文
2014/02/04 职场文书
银行求职自荐书
2014/06/25 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
简单聊聊TypeScript只读修饰符
2022/04/06 Javascript