一、实验说明
本文详细出自实验楼http://www.shiyanlou.com/courses/48,如转载，请注明出处
1. 环境介绍
本实验环境采用Ubuntu Linux桌面环境，实验中会用到桌面上的程序：
- Xfce终端: Linux命令行终端，打开后会进入Bash环境，可以使用Linux命令
- Firefox及Opera：浏览器，可以用在需要前端界面的课程里，只需要打开环境里写的HTML/JS页面即可
- gvim：非常好用的Vim编辑器，最简单的用法可以参考课程Vim编辑器
- 其他编辑器：如果Vim不熟悉可以使用gedit或brackets，其中brackets比较适合开发前端代码。
二、项目简介
本项目名为打地鼠，是大家耳熟能详的一款经典的小游戏。游戏最终将会以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 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: center;
}
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" value="开始游戏" onclick="GameStart()">
<input type="button" value="结束游戏" onclick="GameOver()">
<form name="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>
这样打地鼠小游戏的结构设计就完成了，可以保存后通过Firefox浏览器查看当前效果。
3. 功能逻辑实现
代码配上详细注解：
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);//clearInterval()方法返回setInterval()方法的id
clearTimeout(timeId);//clearTime()方法返回setTimeout()的id
}
//随机循环显示老鼠图片
function show(){
if(playing)
{
var current = Math.floor(Math.random()*25);
//这里的路径也需要根据自己的实际文件路径来修改
document.getElementById("td["+current+"]").innerHTML = '<img src="img/mouse.png">';
//使用setTimeout()实现3秒后隐藏老鼠图片
setTimeout("document.getElementById('td["+current+"]').innerHTML=''",3000);
}
}
//清除所有老鼠图片
function clearMouse(){
for(var i=0;i<=24;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();
}
现在就可以让老鼠动起来了。
4. 总结
到此，整个游戏从设计到制作就完全介绍完了。运行一下自己制作的小游戏，虽然简单，但是其中的乐趣是不言而喻的。
再看看代码，也没有很多晦涩难懂的复杂算法或逻辑，这也是JavaScript容易入门的原因。但是JavaScript是一门弱类型语言，语法很灵活，所有要真真掌握JavaScript还是需要花一点功夫。
最后，游戏虽然完成了，但是代码的优化也是每一个项目所必须的。例如：在html代码中每个<td>标签都绑定了onclick事件对象，这样繁琐的代码显然不是我们想要的，但当我们使用js库，比如最受人欢迎的jQuery,我们的代码会更加简洁。像这样需要优化的代码还有很多，希望大家能有自己的创新，不断的完善、优化这个小游戏！
在最后留给大家几个思考题：
**
思考题1：
界面的美观优化，大开你的脑洞，把打地鼠的游戏界面能设计得更美观得体。
**
**
思考题2：
在命中率结果显示处，未做精确控制，显得数据不好看，希望大家能思考一下，能把结果控制在两位小数。
**
**
思考题3：
修改最后的结果提示，去掉alert( )，自己尝试写一个结果提示的弹出特效吧。
**
**
思考题4：
游戏不过瘾，试试添加更多的关卡限制，丰富你的打地鼠小游戏吧，做完这题，相信你能收获很多。
**
网友评论