Javascript实现打地鼠小游戏_第1页
Javascript实现打地鼠小游戏_第2页
Javascript实现打地鼠小游戏_第3页
Javascript实现打地鼠小游戏_第4页
Javascript实现打地鼠小游戏_第5页
已阅读5页，还剩3页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、JavaScrip便现打地鼠小游戏本项目名为打地鼠，是大家耳熟能详的一款经典的小游戏。 游戏最终将会以html 文件形式完成，需要使用Firefox等浏览器打开才能看到游戏的最终效果。止匕外， 游戏将会采用JavaScript实现整个逻辑流程，所以建议没有 JavaScript基础的同 学首先学习javaScript教程。游戏最终效果截图如下：分数】0 命中率t 0倒计时t 22:、核心方法介绍在打地鼠小游戏中将会多次用到JavaScript中的计时函数：? setTimeout() ? setInterval()这两个函数的作用很大，不仅仅在本次的小游戏中，在很多的JavaScript程序中

2、都会有 他们”的身影。接下来将会详细的剖析这两个函数。1. setTimeout()用于在指定的毫秒数后调用函数或计算表达式(只执行一次，可通过创建一个函数循环重复调用setTimeout ,来实现重复操作)用法示例? setTimeout("functionName()",1000);? setTimeout(functionName,1000);调用一个无参的方法很简单，但当我们需要调用一个带有参数的函数时，问题就来了。解决的方法就是再写一个函数，该函数返回一个不带参数的函数。示例如下：function show(name) alert(name +", 你好

3、！ ");function returnFun(name) return function() show(name); setTimeout(returnFun("小明")，1000);clearTimeout()立即终止setTimeout() 方法。示例：var timeId = set Timeout(.);clearTimeout(timeId);2. setInterval()可按照指定的周期(毫秒)来调用函数或计算表达式。与setTimeout() 不同，不论调用的函数或计算表达式需要多长时间才能执行完, 它都只是简单的每隔一定时间就重复执行一次那个函

4、数或计算表达式。用法示例? setInterval("functionName()",1000);? setInterval(functionName,1000);clearInterval()立即终止setInterval() 方法。示例：var interld =set Interval，.)；clearlnterval(interld);、游戏制作3. 功能逻辑设计功能包括：? 得分统计? 计算成功率? 老鼠图片的隐藏、显示? 判断是否点中老鼠? 最终结果显不'? 错误提示流程设计：? 点击开始游戏”按钮游戏开始，否则将提示 请点击开始游戏”字样? 分数、命中

5、率显示重置为 “0,”倒计时开始(默认为 30秒)? 老鼠图片不断显示、隐藏，玩家可点击鼠标左键进行游戏? 当30秒倒计时结束或者玩家主动点击结束按钮”时，游戏结束并显示游戏结果游戏设计简单， 并未添加其他丰富的游戏设计， 也没有添加动画、 声音等特殊效果，其目的是想带领大家从简洁的游戏逻辑设计中清楚地体会到从设计到开发、完善的乐趣，能通过简单的几行代码也能轻松实现一个属于自己制作的小游戏。4. 框架设计游戏通过 html 文件实现，自然离不开html 标签，常见的打地鼠游戏都是规则的几个固定位置随机出现老鼠，因此本次游戏设计将会采用 <table> 标签来布局，得分、命中率等结果

6、显示将使用<input>标签。html代码(包括cs§如下：<!DOCTYPE html><html><head><title> 打地鼠 </title><meta http-equiv="Content-Type" content="text/html;charset=utf-8"/><style type="text/css">#content width: 960px;margin: 0 auto;text-align: c

7、enter;table margin: 0 auto;table:hover cursor: url('img/chuizi.png'),auto;/此处图片路径要依据自己的路径来修改td width: 95px;height: 95px;background-color: #00ff33;</style><script> / 下一节将会详细讲解</script></head><body><div id="content"><input type="button"

8、; value=" 开始游戏 " onclick="GameStart()"><input type="button" value=" 结束游戏 " onclick="GameOver()"><form name="form1"><label> 分数：</label><input type="text" name="score" size="5">&l

9、t;label> 命中率：</label><input type="text" name="success" size="10"><label> 倒计时：</label><input type="text" name="remtime" size="5"></form><table><tr><td id="td0" onclick="hit

10、(0)"></td><td id="td1" onclick="hit"></td><td id="td2" onclick="hit(2)"></td><td id="td3" onclick="hit(3)"></td><td id="td4" onclick="hit(4)”></td></tr><t

11、r><td id="td5" onclick="hit(5)"></td><td id="td6" onclick="hit(6)"></td><td id="td7" onclick="hit(7)"></td><td id="td8" onclick="hit(8)"></td><td id="td9" o

12、nclick="hit(9)"></td></tr><tr><td id="td10" onclick="hit(10)"></td><td id="td11" onclick="hit(11)"></td><td id="td12" onclick="hit(12)"></td><td id="td13" oncli

13、ck="hit(13)"></td><td id="td14" onclick="hit(14)”></td></tr><tr><td id="td15" onclick="hit(15)"></td><td id="td16" onclick="hit(16)"></td><td id="td17" onclick="

14、;hit(17)"></td><td id="td18" onclick="hit(18)"></td><td id="td19" onclick="hit(19)"></td></tr><tr><td id="td20" onclick="hit(20)"></td><td id="td21" onclick="hi

15、t(21)"></td><td id="td22" onclick="hit(22)"></td><td id="td23" onclick="hit(23)"></td><td id="td24" onclick="hit(24)"></td></tr></table></div></body></html>这样打地

16、鼠小游戏的结构设计就完成了，可以保存后通过Firefox 浏览器查看当前效果。5. 功能逻辑实现代码配上详细注解：var td =playing =score =beat =success =knock =countDown =interId =timeId =/ 游戏结束 timeStop();playing = clearMouse();new Array (), false , 0, 0,0,0,30, null , null ;/ 保存每个格子的地鼠/ 游戏是否开始/ 分数/ 鼠标点击次数/ 命中率/ 鼠标点中老鼠图片次数/ 倒计时/ 指定 setInterval() 的变量/ 指定

17、setTimeout() 的变量function GameOver() false ;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 =

18、countdown-1;timeId = setTimeout("timeShow()" , 1000);/ 主动停止所有计时 function timeStop() clearInterval(interId);/clearInterval() 方法返回 setInterval() 方法的 idclearTimeout(timeId);/clearTime() 方法返回 setTimeout() 的 id/ 随机循环显示老鼠图片 function show() if (playing)var current =Math.floor(Math.random()*25);/

19、这里的路径也需要根据自己的实际文件路径来修改document.getElementById("td" +current+ "" ).innerHTML = '<imgsrc="img/mouse.png">' ;/ 使用 setTimeout() 实现 3 秒后隐藏老鼠图片setTimeout( "document.getElementById('td" +current+ "').innerHTML=''" 3000);/ 清除所有老

20、鼠图片 function clearMouse() for ( var i= 0;i<= 24;i+)document.getElementById("td" +i+ "" ).innerHTML= "" ;/ 点击事件函数，判断是否点中老鼠function hit(id) if (playing= false )alert( "请点击开始游戏" );return ; elsebeat +=1;if ( document.getElementById("td" +id+ "&qu

21、ot; ).innerHTML!= "" )score +=1;knock +=1;success = knock/beat;document.form1.success.value = success;document.form1.score.value = score;document.getElementById("td" +id+ "" ).innerHTML= "" ;elsescore += -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();

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论