快捷導(dǎo)航

用js做一個(gè)小游戲平臺(tái) (一)

更新時(shí)間：2009年12月29日 00:03:57 作者：

大體的意思就是想寫(xiě)一些js,使得網(wǎng)頁(yè)上能玩多個(gè)游戲。譬如：貪吃蛇、俄羅斯方塊、推箱子、坦克等等。

記得上班寫(xiě)代碼時(shí)，我們技術(shù)總監(jiān)總說(shuō)是要先“設(shè)計(jì)”，那就先“設(shè)計(jì)”吧。
ps：我是新手大家多多見(jiàn)諒。

.網(wǎng)頁(yè)游戲區(qū)域。就是說(shuō)需要知道游戲在網(wǎng)頁(yè)上的區(qū)域，如下：
在網(wǎng)頁(yè)中插入一個(gè)div，設(shè)定寬高和id，
<div id="GameFrame" style="width:400;height:400"></div>
然后再js中得到該對(duì)象，
var _GameFrame = document.getElementById("GameFrame");

.鍵盤(pán)參數(shù)對(duì)象：在游戲中會(huì)經(jīng)常獲取鍵盤(pán)的值，設(shè)定一個(gè)鍵值對(duì)應(yīng)的對(duì)象：
var _KeyParameters = { KeyEnter: 13, KeySpace: 32, KeyLeft: 37, KeyUp: 38, KeyRight: 39, KeyDown: 40, KeyESC: 27 };

.標(biāo)簽控制對(duì)象：用于控制、產(chǎn)生html標(biāo)簽，輔助生成對(duì)應(yīng)樣式的"控件"：

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

 
var _HtmlControl = 
{ 
//清空網(wǎng)頁(yè)游戲區(qū)域 
_ClearArea: function() { 
}, 
//創(chuàng)建一個(gè)div 
newDiv: function() { 
var div = document.createElement("div"); 
return div; 
}, 
//創(chuàng)建一個(gè)指定寬高的按鈕樣式標(biāo)簽 
newButton: function(w, h) { 
var div = this.newDiv(); 
div.style.width = w + "px"; 
div.style.height = h + "px"; 
div.select = function() { 
//被選中時(shí)的變化 
}; 
div.unselect = function() { 
//沒(méi)選中時(shí)的樣子 
}; 
return div; 
} 
//繼續(xù)... 
}; 

.動(dòng)畫(huà)類(lèi)：用于播放一些游戲跳轉(zhuǎn)動(dòng)畫(huà)：

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

 
var Animation = function(endFn) { 
//播放動(dòng)畫(huà) 
this._play = function() { 
　　　　//具體怎么放沒(méi)有想好。 
}; 
//播放結(jié)束事件 
this._palyEnd = endFn || function() { 
alert("動(dòng)畫(huà)播放結(jié)束"); 
}; 
}; 

.游戲類(lèi)：要有一個(gè)游戲名，
a.控制：1.邏輯控制、2.鍵盤(pán)控制
b.主界面：1.標(biāo)題、2.游戲區(qū)域、3.狀態(tài)顯示區(qū)、4.控制區(qū)
c.動(dòng)畫(huà)：1.開(kāi)場(chǎng)動(dòng)畫(huà)、2.過(guò)關(guān)動(dòng)畫(huà)、3.通關(guān)動(dòng)畫(huà)
d:事件：1.開(kāi)始、2.結(jié)束。
　　　　代碼大致如下：
代碼

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

 
var Game = function(name, logicalFn, keyFn) { 
//游戲名 
this._name = name || "未命名"; 
this._LControl = logicalFn || function() { 
//簡(jiǎn)單游戲邏輯控制 
}; 
this._KControl = keyFn || function(event) { 
//簡(jiǎn)單鍵盤(pán)邏輯 
}; 
//開(kāi)場(chǎng)動(dòng)畫(huà) 
this._AnmLoad = new Animation(null); 
//過(guò)關(guān)動(dòng)畫(huà) 
this._AnmNext = new Animation(null); 
//通關(guān)動(dòng)畫(huà) 
this._AnmEnd = new Animation(null); 
}; 

.游戲列表：就是游戲類(lèi)的對(duì)象列表。

.游戲選擇器：可以是一個(gè)游戲類(lèi)對(duì)象。
var _GameChoose = new Game("選擇器", null, null);
.頁(yè)面控制：用于注冊(cè)頁(yè)面事件，接受用戶響應(yīng)，并傳遞給游戲選擇器；
代碼

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

 
var _PageControl = { 
//8.a:線程控制 
_ThreadControl: function() { 
_GameChoose._LControl(); 
}, 
//8.b:鍵盤(pán)控制 
_KeyControl: function(event) { 
_GameChoose._KControl(event); 
}, 
//8.cc.事件注冊(cè) 
_StartRegedit: function() { 
//把this._ThreadControl添加到循環(huán)線程 
//把this._KeyControl注冊(cè)到document的鍵盤(pán)單擊 
} 
} 

最后，到了這一步，貌似就“設(shè)計(jì)”完了？暫且不管這是不是設(shè)計(jì)，姑且說(shuō)是一種邊敲代碼邊設(shè)計(jì)的設(shè)計(jì)吧。不過(guò)貌似真的就可行了。當(dāng)然它現(xiàn)在是不能運(yùn)行的。我們先把總體代碼貼出來(lái)看一下：
整體代碼

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

 
<script type="text/javascript"language="javascript"> 
/*** 
* 1.網(wǎng)頁(yè)游戲區(qū)域： 
* 2.鍵盤(pán)參數(shù)類(lèi) 
* 3.標(biāo)簽類(lèi)：用于控制、產(chǎn)生html標(biāo)簽 
* 4.動(dòng)畫(huà)類(lèi)：播放動(dòng)畫(huà)，播放結(jié)束事件 
* 5.游戲類(lèi)：游戲名 
* a.控制：1.邏輯控制、2.鍵盤(pán)控制 
* b.主界面：1.標(biāo)題、2.游戲區(qū)域、3.狀態(tài)顯示區(qū)、4.控制區(qū) 
* c.動(dòng)畫(huà)：1.開(kāi)場(chǎng)動(dòng)畫(huà)、2.過(guò)關(guān)動(dòng)畫(huà)、3.通關(guān)動(dòng)畫(huà) 
* d:事件：1.開(kāi)始、2.結(jié)束 
* 6.游戲列表 
* 7.游戲選擇器 
* 8.頁(yè)面控制：a.線程控制、b.鍵盤(pán)控制、c.事件注冊(cè) 
***/ 

window.onload = function() { 
//---------------------------------------------------- 
//1.網(wǎng)頁(yè)游戲區(qū)域： 
var _GameFrame = document.getElementById("GameFrame"); 
//---------------------------------------------------- 
//2.鍵盤(pán)參數(shù)類(lèi):可以根據(jù)需要把鍵值添加進(jìn)來(lái) 
var _KeyParameters = { KeyEnter: 13, KeySpace: 32, KeyLeft: 37, KeyUp: 38, KeyRight: 39, KeyDown: 40, KeyESC: 27 }; 
//---------------------------------------------------- 
//3.標(biāo)簽類(lèi)：用于控制、產(chǎn)生html標(biāo)簽 
var _HtmlControl = 
{ 
//清空網(wǎng)頁(yè)游戲區(qū)域 
_ClearArea: function() { 
}, 
//創(chuàng)建一個(gè)div 
newDiv: function() { 
var div = document.createElement("div"); 
return div; 
}, 
//創(chuàng)建一個(gè)指定寬高的按鈕樣式標(biāo)簽 
newButton: function(w, h) { 
var div = this.newDiv(); 
div.style.width = w + "px"; 
div.style.height = h + "px"; 
div.select = function() { 
//被選中時(shí)的變化 
}; 
div.unselect = function() { 
//沒(méi)選中時(shí)的樣子 
}; 
return div; 
} 
//繼續(xù)... 
}; 
//---------------------------------------------------- 
//4.動(dòng)畫(huà)類(lèi)：播放動(dòng)畫(huà)，播放結(jié)束事件 
var Animation = function(endFn) { 
//播放動(dòng)畫(huà) 
this._play = function() { 
}; 
//播放結(jié)束事件 
this._palyEnd = endFn || function() { 
alert("動(dòng)畫(huà)播放結(jié)束"); 
}; 
}; 
//---------------------------------------------------- 
//5.游戲類(lèi)： 
var Game = function(name, logicalFn, keyFn, startFn, endFn) { 
//游戲名 
this._name = name || "未命名"; 
//5.a.1:邏輯控制 
this._LControl = logicalFn || function() { 
//簡(jiǎn)單游戲邏輯控制 
}; 
//5.a.2:鍵盤(pán)控制 
this._KControl = keyFn || function(event) { 
//簡(jiǎn)單鍵盤(pán)邏輯 
}; 
//5.b.1:標(biāo)題區(qū)域 
this._FrameTitle; 
//5.b.2:游戲區(qū)域 
this._FrameMain; 
//5.b.3:狀態(tài)顯示區(qū) 
this._FrameState; 
//5.b.4:控制區(qū) 
this._FrameControl; 
//5.c.1:開(kāi)場(chǎng)動(dòng)畫(huà) 
this._AnmLoad = new Animation(null); 
//5.c.2:過(guò)關(guān)動(dòng)畫(huà) 
this._AnmNext = new Animation(null); 
//5.c.3:通關(guān)動(dòng)畫(huà) 
this._AnmEnd = new Animation(null); 
//5.d.1:開(kāi)始 
this._Start = startFn || function() { 
alert("游戲開(kāi)始"); 
}; 
//5.d.2:結(jié)束 
this._End = endFn || function() { 
alert("游戲結(jié)束"); 
}; 
}; 
//---------------------------------------------------- 
//創(chuàng)建游戲 
var game1 = new Game("貪吃蛇", null, null); 
var game2 = new Game("俄羅斯方塊", null, null); 
var game3 = new Game("推箱子", null, null); 
var game4 = new Game("賽車(chē)", null, null); 
var game5 = new Game("坦克大戰(zhàn)", null, null); 
//---------------------------------------------------- 
//6.游戲列表 
var _GameList = [game1, game2, game3, game4, game5]; 
//---------------------------------------------------- 
//7.游戲選擇器 
var _GameChoose = new Game("選擇器", null, null); 
//---------------------------------------------------- 
//8.頁(yè)面控制： 
var _PageControl = { 
//8.a:線程控制 
_ThreadControl: function() { 
_GameChoose._LControl(); 
}, 
//8.b:鍵盤(pán)控制 
_KeyControl: function(event) { 
_GameChoose._KControl(event); 
}, 
//8.cc.事件注冊(cè) 
_StartRegedit: function() { 
//把this._ThreadControl添加到循環(huán)線程 
//把this._KeyControl注冊(cè)到document的鍵盤(pán)單擊 
} 
} 
//---------------------------------------------------- 
} 
</script> 
<div id="GameFrame" style="width:400;height:400"> 
</div> 