Javascript实现打地鼠小游戏.docVIP

JavaScript实现打地鼠小游戏 一、项目简介 本项目名为打地鼠，是大家耳熟能详的一款经典的小游戏。游戏最终将会以html文件形式完成，需要使用Firefox等浏览器打开才能看到游戏的最终效果。此外，游戏将会采用JavaScript实现整个逻辑流程，所以建议没有JavaScript基础的同学首先学习javaScript教程。 游戏最终效果截图如下： 在打地鼠小游戏中将会多次用到JavaScript中的计时函数： setTimeout() setInterval() 这两个函数的作用很大，不仅仅在本次的小游戏中，在很多的JavaScript程序中都会有“他们”的身影。接下来将会详细的剖析这两个函数。 用于在指定的毫秒数后调用函数或计算表达式（只执行一次，可通过创建一个函数循环重复调用setTimeout，来实现重复操作） setTimeout(functionName(),1000); setTimeout(functionName,1000); 调用一个无参的方法很简单，但当我们需要调用一个带有参数的函数时，问题就来了。 解决的方法就是再写一个函数，该函数返回一个不带参数的函数。 示例如下： 立即终止setTimeout()方法。 示例： 可按照指定的周期（毫秒）来调用函数或计算表达式。 与setTimeout()不同，不论调用的函数或计算表达式需要多长时间才能执行完，它都只是简单的每隔一定时间就重复执行一次那个函数或计算表达式。 setInterval(functionName(),1000); setInterval(functionName,1000); clearInterval() 立即终止setInterval()方法。 示例： 三、游戏制作 1. 功能逻辑设计 功能包括： 得分统计 计算成功率 老鼠图片的隐藏、显示 判断是否点中老鼠 最终结果显示 错误提示 流程设计： 点击“开始游戏”按钮游戏开始，否则将提示“请点击开始游戏”字样 分数、命中率显示重置为“0”，倒计时开始（默认为30秒） 老鼠图片不断显示、隐藏，玩家可点击鼠标左键进行游戏 当30秒倒计时结束或者玩家主动点击“结束按钮”时，游戏结束并显示游戏结果 游戏设计简单，并未添加其他丰富的游戏设计，也没有添加动画、声音等特殊效果，其目的是想带领大家从简洁的游戏逻辑设计中清楚地体会到从设计到开发、完善的乐趣，能通过简单的几行代码也能轻松实现一个属于自己制作的小游戏。 游戏通过html文件实现，自然离不开html标签，常见的打地鼠游戏都是规则的几个固定位置随机出现老鼠，因此本次游戏设计将会采用table标签来布局，得分、命中率等结果显示将使用input标签。html代码（包括css）如下： 这样打地鼠小游戏的结构设计就完成了，可以保存后通过Firefox浏览器查看当前效果。 代码配上详细注解： 现在就可以让老鼠动起来了。 到此，整个游戏从设计到制作就完全介绍完了。运行一下自己制作的小游戏，虽然简单，但是其中的乐趣是不言而喻的。 再看看代码，也没有很多晦涩难懂的复杂算法或逻辑，这也是JavaScript容易入门的原因。但是JavaScript是一门弱类型语言，语法很灵活，所有要真真掌握JavaScript还是需要花一点功夫。 最后，游戏虽然完成了，但是代码的优化也是每一个项目所必须的。例如：在html代码中每个td标签都绑定了onclick事件对象，这样繁琐的代码显然不是我们想要的，但当我们使用js库，比如最受人欢迎的jQuery,我们的代码会更加简洁。像这样需要优化的代码还有很多，希望同学们能有自己的创新，不断的完善、优化这个小游戏！ 感谢你的学习。 看了来自Leetao同学的细心测评，在最后留给大家几个思考题： 思考题1： 界面的美观优化，大开你的脑洞，把打地鼠的游戏界面能设计得更美观得体。 思考题2： 在命中率结果显示处，未做精确控制，显得数据不好看，希望大家能思考一下，能把结果控制在两位小数。 思考题3： 修改最后的结果提示，去掉alert( )，自己尝试写一个结果提示的弹出特效吧。 思考题4： 游戏不过瘾，试试添加更多的关卡限制，丰富你的打地鼠小游戏吧，做完这题，相信你能收获很多。 再次感谢Leetao同学的细心评测，正是你们细心的评测付出，才能让我们的文档越来越丰富、实用，让大家学到想学的东西。因为不浪费大家的学习时间是我们的的宗旨，所以我们每一次都在努力进步，你们的声音就是支持我们进步的动力，由衷感谢各位。