用js做一個小游戲平臺 (一)

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

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

記得上班寫代碼時，我們技術總監(jiān)總說是要先“設計”，那就先“設計”吧。
ps：我是新手大家多多見諒。

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

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

.標簽控制對象：用于控制、產生html標簽，輔助生成對應樣式的"控件"：

復制代碼代碼如下:

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

.動畫類：用于播放一些游戲跳轉動畫：

復制代碼代碼如下:

 
var Animation = function(endFn) { 
//播放動畫 
this._play = function() { 
　　　　//具體怎么放沒有想好。 
}; 
//播放結束事件 
this._palyEnd = endFn || function() { 
alert("動畫播放結束"); 
}; 
}; 

.游戲類：要有一個游戲名，
a.控制：1.邏輯控制、2.鍵盤控制
b.主界面：1.標題、2.游戲區(qū)域、3.狀態(tài)顯示區(qū)、4.控制區(qū)
c.動畫：1.開場動畫、2.過關動畫、3.通關動畫
d:事件：1.開始、2.結束。
　　　　代碼大致如下：
代碼

復制代碼代碼如下:

 
var Game = function(name, logicalFn, keyFn) { 
//游戲名 
this._name = name || "未命名"; 
this._LControl = logicalFn || function() { 
//簡單游戲邏輯控制 
}; 
this._KControl = keyFn || function(event) { 
//簡單鍵盤邏輯 
}; 
//開場動畫 
this._AnmLoad = new Animation(null); 
//過關動畫 
this._AnmNext = new Animation(null); 
//通關動畫 
this._AnmEnd = new Animation(null); 
}; 

.游戲列表：就是游戲類的對象列表。

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

復制代碼代碼如下:

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

最后，到了這一步，貌似就“設計”完了？暫且不管這是不是設計，姑且說是一種邊敲代碼邊設計的設計吧。不過貌似真的就可行了。當然它現(xiàn)在是不能運行的。我們先把總體代碼貼出來看一下：
整體代碼

復制代碼代碼如下:

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

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