《实现打地鼠小游戏.docVIP

JavaScript实现打地鼠小游戏 一、项目简介 本项目名为打地鼠，是大家耳熟能详的一款经典的小游戏。游戏最终将会以html文件形式完成，需要使用Firefox等浏览器打开才能看到游戏的最终效果。此外，游戏将会采用JavaScript实现整个逻辑流程，所以建议没有JavaScript基础的同学首先学习javaScript教程。 游戏最终效果截图如下： 二、核心方法介绍 在打地鼠小游戏中将会多次用到JavaScript中的计时函数： setTimeout() setInterval() 这两个函数的作用很大，不仅仅在本次的小游戏中，在很多的JavaScript程序中都会有“他们”的身影。接下来将会详细的剖析这两个函数。 1. setTimeout() 用于在指定的毫秒数后调用函数或计算表达式（只执行一次，可通过创建一个函数循环重复调用setTimeout，来实现重复操作） 用法示例 setTimeout(functionName(),1000); setTimeout(functionName,1000); 调用一个无参的方法很简单，但当我们需要调用一个带有参数的函数时，问题就来了。 解决的方法就是再写一个函数，该函数返回一个不带参数的函数。 示例如下： function show(name){ alert(name + ，你好！); } function returnFun(name){ return function(){ show(name); }; } setTimeout(returnFun(小明),1000); clearTimeout() 立即终止setTimeout()方法。 示例： var timeId = setTimeout(...); clearTimeout(timeId); 2. setInterval() 可按照指定的周期（毫秒）来调用函数或计算表达式。 与setTimeout()不同，不论调用的函数或计算表达式需要多长时间才能执行完，它都只是简单的每隔一定时间就重复执行一次那个函数或计算表达式。 用法示例 setInterval(functionName(),1000); setInterval(functionName,1000); clearInterval() 立即终止setInterval()方法。 示例： var interId = setInterval(...); clearInterval(interId); 三、游戏制作 1. 功能逻辑设计 功能包括： 得分统计 计算成功率 老鼠图片的隐藏、显示 判断是否点中老鼠 最终结果显示 错误提示 流程设计： 点击“开始游戏”按钮游戏开始，否则将提示“请点击开始游戏”字样 分数、命中率显示重置为“0”，倒计时开始（默认为30秒） 老鼠图片不断显示、隐藏，玩家可点击鼠标左键进行游戏 当30秒倒计时结束或者玩家主动点击“结束按钮”时，游戏结束并显示游戏结果 游戏设计简单，并未添加其他丰富的游戏设计，也没有添加动画、声音等特殊效果，其目的是想带领大家从简洁的游戏逻辑设计中清楚地体会到从设计到开发、完善的乐趣，能通过简单的几行代码也能轻松实现一个属于自己制作的小游戏。 2. 框架设计 游戏通过html文件实现，自然离不开html标签，常见的打地鼠游戏都是规则的几个固定位置随机出现老鼠，因此本次游戏设计将会采用table标签来布局，得分、命中率等结果显示将使用input标签。html代码（包括css）如下： !DOCTYPE htmlhtml 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: center; } table { margin: 0 auto; } table:hover { cursor: url(img/chuizi.png),auto;//此处图片路径要依据自己的路径来修改 } td { width