JavaScript 打地鼠游戲代碼說明

更新時間：2010年10月12日 18:47:56 作者：

打地鼠游戲代碼說明，喜歡用js開發(fā)游戲的朋友可以參考下。

演示地址：http://demo.jb51.net/js/mouse/index.html
打包下載地址 http://www.dbjr.com.cn/jiaoben/32434.html
這個是我無聊的時候?qū)懙?，先看看效?UI做得比較丑)：

說明：紅色的點擊得分100，藍色的點擊扣分100.

只是想用js來寫個小游戲，順便練練js的代碼。
先看html部分：
html

復(fù)制代碼代碼如下:

 
<style> 
#panel{height:300px;width:300px;background:#ccc;margin:50px 0 0 200px;} 
#panel ul{list-style:none;display:block;float:left;margin:0;padding:0;} 
#panel li{display:block;float:left;width:100px;height:100px; 
overflow:hidden;position:relative;text-align:center;} 
#panel li span{display:block;position:relative;left:0;top:60px; 
width:100px;height:40px;background:url(img/hole.gif) 0 -60px;z-index:100;} 
</style> 
</head> 
<body> 
<span>說明：紅色的點擊得分100，藍色的點擊扣分100.</span> 
<div id="panel"> 
<ul> 
<li><span></span></li> 
<li><span></span></li> 
<li><span></span></li> 
<li><span></span></li> 
<li><span></span></li> 
<li><span></span></li> 
<li><span></span></li> 
<li><span></span></li> 
<li><span></span></li> 
</ul> 
</div> 
<div>分數(shù)：<span id="score">0</span></div> 
<div>倒計時：<span id="time">60</span></div> 
<input type="button" value="開始" onclick="GameStart()" /> 

js部分：地鼠類

復(fù)制代碼代碼如下:

 
var Mouse = function(type){ 
//地鼠的具體dom元素，添加到頁面上的 
this.mouse = null; 
//地鼠的編號 
this.num = -1; 
//地洞的編號(地鼠藏身在哪個洞) 
this.hole = -1; 
//初始化,type為地鼠類型,好與壞 
this.init(type); 
} 
Mouse.prototype = { 
//地鼠類型，好，壞，好的被殺，壞的被殺 
mousetype: { 
"good": "img/good.gif", 
"bad": "img/bad.gif", 
"goodkill":"img/goodkill.gif", 
"badkill":"img/badkill.gif" 
}, 
//初始化地鼠 
init : function(type){ 
type = type || 'good'; 
var _this = this; 
//創(chuàng)建地鼠的dom元素 
this.mouse = document.createElement("div"); 
//擴展屬性--地鼠類型 
this.mouse.mousetype = type; 
//擴展類型--屬否活著 
this.mouse.islive = true; 
this.mouse.style.cssText = 'width:75px;height:100px;background:url('+this.mousetype[type]+');left:0;top:20px;\ 
position:relative;margin:auto;cursor:pointer;'; 
//綁定地鼠被點擊事件 
this.mouse.onclick = function(e){_this.beat(e);}; 
}, 
//地鼠被點中 
beat : function(e){ 
if(this.mouse.islive){ 
this.mouse.islive = false; 
this.onbeat(); 
this.mouse.style.background = "url("+this.mousetype[this.mouse.mousetype+"kill"]+")"; 
} 
}, 
//地鼠的動畫 
animation : function(speed){ 
speed = speed == 'fast'?20:speed == 'normal'?30:50; 
var obj = this.mouse,ost = obj.style,oTop = parseInt(ost.top,10),cut=5,_this = this; 
//讓地鼠從地洞冒出來 
var show = function(top){ 
top = top-cut; 
if(top >= -40){ 
ost.top = top + 'px'; 
setTimeout(function(){show(top);},speed); 
} 
else 
{ 
setTimeout(function(){hide(-40);},speed*10); 
} 
} 
//隱藏地鼠 
var hide = function(top){ 
top = top+cut; 
if(top <= oTop){ 
ost.top = top + 'px'; 
setTimeout(function(){hide(top);},speed); 
} 
else { 
_this.reset(); 
} 
} 
show(oTop); 
}, 
//重置地鼠,當?shù)厥鬂L回洞里的時候 
reset : function(){ 
this.mouse.islive =true; 
this.mouse.style.background = "url("+this.mousetype[this.mouse.mousetype]+")"; 
this.onend(); 
}, 
//擴展方法：地鼠被點中 
onbeat : function(){}, 
//擴展方法：地鼠動畫結(jié)束后 
onend : function(){} 
} 

接著是游戲控制類，控制游戲的邏輯：

復(fù)制代碼代碼如下:

 
//游戲控制類 
var Game = { 
//游戲時間,一分鐘 
time : 61, 
//地鼠地圖，總共有十只，其中兩只是壞的 
mouseMap : { 
1:'good', 
2:'bad', 
3:'good', 
4:'good', 
5:'bad', 
6:'good', 
7:'bad', 
8:'good', 
9:'good', 
10:'good' 
}, 
//所有的地鼠dom元素 
allMouse : [], 
//目前分數(shù) 
nowScore : 0, 
//目前有哪幾個地洞給占用 
hasHole : {}, 
//目前有哪幾只地鼠是活動的 
hasMouse : {}, 
//頁面的地洞集合 
lis : null, 
//初始化地鼠與地洞 
init : function(){ 
//獲取頁面的地洞集合 
this.lis = document.getElementById('panel').getElementsByTagName('li'); 
_this = this; 
//初始化10只地鼠 
for(var i=1;i <=10;i++){ 
var mouse = new Mouse(this.mouseMap[i]); 
//擴展地鼠被點中事件 
mouse.onbeat = function(){ 
//修改分數(shù) 
Game.changeScore(100 * (this.mouse.mousetype=='good'?1:-1)); 
} 
//擴展地鼠動畫結(jié)束事件 
mouse.onend = function(){ 
//移除地洞中的地鼠 
var li = _this.lis[this.hole]; 
li.removeChild(li.mouse.mouse); 
li.mouse = null; 
//清除對應(yīng)的地洞與地鼠 
_this.hasHole[this.hole] = null; 
_this.hasMouse[this.num] = null; 
} 
this.allMouse.push(mouse); 
} 
}, 
//修改游戲分數(shù) 
changeScore : function(score){ 
this.nowScore += score; 
document.getElementById('score').innerHTML = this.nowScore; 
}, 
//游戲開始 
start : function(){ 
if(this.time <= 0)return; 
var _this = this; 
//隨機地洞編號 
var random = parseInt(Math.random()*9,10); 
while(this.hasHole[random]){ 
random = parseInt(Math.random()*9,10); 
} 
//隨機地鼠編號 
var randomMouse = parseInt(Math.random()*10,10); 
while(this.hasMouse[randomMouse]){ 
randomMouse = parseInt(Math.random()*10,10); 
} 
//添加地鼠到地洞中 
this.allMouse[randomMouse].hole = random; 
this.allMouse[randomMouse].num = randomMouse; 
this.lis[random].appendChild(this.allMouse[randomMouse].mouse); 
this.lis[random].mouse = this.allMouse[randomMouse]; 
this.lis[random].mouse.animation('normal'); 
//記錄地鼠與地洞編號 
this.hasHole[random] = 'true'; 
this.hasMouse[randomMouse] = 'true'; 
setTimeout(function(){_this.start();},250); 
}, 
//倒計時 
startTime : function(){ 
this.time -= 1; 
var _this = this; 
document.getElementById('time').innerHTML = this.time; 
if(this.time > 0){ 
setTimeout(function(){_this.startTime()},1000); 
} 
}, 
//重置游戲設(shè)置 
reset : function(){ 
this.time = 61; 
this.allMouse = []; 
this.nowScore = 0; 
this.hasHole = {}; 
this.hasMouse = {}; 
this.lis = null; 
this.changeScore(0); 
} 
} 
//游戲開始函數(shù) 
function GameStart(){ 
if(Game.time > 0 && Game.time != 61){ 
alert("游戲尚未結(jié)束，不能重新開始哦！"); 
return; 
} 
Game.reset(); 
Game.init(); 
Game.start(); 
Game.startTime(); 
} 