用javascript做一個小游戲平臺 (二) 游戲選擇器

更新時間：2010年01月01日 01:17:51 作者：

昨天晚上“設計”了n久，那些代碼都還沒有運行起來，有點心急、有點郁悶。

今天先預覽一下今晚的成果，如下（挫了點，別扔磚頭）：

今天主要設計了下選擇器，就是進入游戲時展現游戲列表，然后用來選擇游戲的一個白癡的功能。

選擇器建立在昨天的游戲類基礎上，針對昨天的代碼我作了部分修改：

復制代碼代碼如下:

 
//5.游戲類：名稱，邏輯方法，鍵盤方法，開始方法，開始關卡方法,結束方法 
var Game = function(name, logicalFn, keyFn, startFn, loadFn, endFn) { 
//游戲名 
this._name = name || "未命名"; 
//5.a.1:邏輯控制 
this._LControl = logicalFn || function(date) { 
//簡單游戲邏輯控制 
if (this._FrameMain) { 
var innHTML = "游戲時間：" + date.getSeconds() + "秒" + date.getMilliseconds(); 
innHTML += "<br/>當前游戲沒有編寫，您可以按Esc退出該游戲；"; 
this._FrameMain.innerHTML = innHTML; 
} 
}; 
//5.a.2:鍵盤控制 
this._KControl = keyFn || function(event) { 
//簡單鍵盤邏輯 
alert("您敲擊了" + event.keyCode + "鍵"); 
}; 
//5.b.1:標題區(qū)域 
this._FrameTitle = null; 
//5.b.2:游戲區(qū)域 
this._FrameMain = null; 
//5.b.3:狀態(tài)顯示區(qū) 
this._FrameState = null; 
//5.b.4:控制區(qū) 
this._FrameControl = null; 
//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 = function() { 
this._AnmLoad = this._AnmLoad || new Animation(null); 
var temp = this; //得到當前對象 
this._AnmLoad._palyEnd = this._AnmLoad._palyEnd || function() { 
startFn && startFn(); 
temp._Load(); 
}; 
this._AnmLoad._play(); 
}; 
//5.d.2:結束 
this._End = endFn || function() { 
alert("游戲結束"); 
}; 
//5.d.3:加載：每次開始游戲時(關卡開始) 
this._Load = function() { 
this._AnmNext = this._AnmNext || new Animation(null); 
var temp = this; //得到當前對象 
this._AnmNext._palyEnd = this._AnmNext._palyEnd || function() { 
if (!loadFn) { 
temp._FrameTitle = _HtmlControl._newPanel(0, 0, 400, 30); 
temp._FrameTitle.innerHTML = temp._name || "未命名游戲"; 
temp._FrameMain = _HtmlControl._newPanel(0, 30, 350, 370); 
temp._FrameState = _HtmlControl._newPanel(350, 30, 50, 180); 
temp._FrameControl = _HtmlControl._newPanel(350, 210, 50, 190); 
_HtmlControl._ClearArea(); 
_HtmlControl._AddControl(temp._FrameTitle); 
_HtmlControl._AddControl(temp._FrameMain); 
_HtmlControl._AddControl(temp._FrameState); 
_HtmlControl._AddControl(temp._FrameControl); 
} else { 
loadFn(); 
} 
} 
this._AnmNext && this._AnmNext._play(); 
} 
//5.e地圖 
this._Map = []; 
mapIndex = -1; 
}; 

就是說選擇器它也是游戲類的一個對象，有加載動畫，也有鍵盤處理等：

復制代碼代碼如下:

 
//創(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); 
{ 
_GameChoose._Map = _GameList; 
_GameChoose._Load = function() { 
this._FrameTitle = _HtmlControl._newPanel(0, 0, 400, 30); 
this._FrameTitle.innerHTML = "請選擇游戲"; 
this._FrameMain = _HtmlControl._newPanel(0, 30, 240, 370); 
this._FrameState = _HtmlControl._newPanel(240, 30, 160, 180); 
this._FrameState.innerHTML = "你可以<br/>使用上下鍵<br/>選擇游戲"; 
this._FrameControl = _HtmlControl._newPanel(240, 210, 160, 190); 
this._FrameControl.innerHTML = "按下Enter<br/>進入游戲"; 
this._tempButtons = []; 
this._tempButtonsIndex = 0; 
//this._FrameMain.style.滾動條// 
if (this._Map.length > 0) { 
for (var i = 0; i < this._Map.length; i++) { 
var button = _HtmlControl._newButton(this._Map[i]._name, 200, 30); 
this._FrameMain.appendChild(button); 
this._tempButtons.push(button); 
} 
this._tempButtons[0].select(); 
} 
_HtmlControl._AddControl(this._FrameTitle); 
_HtmlControl._AddControl(this._FrameMain); 
_HtmlControl._AddControl(this._FrameState); 
_HtmlControl._AddControl(this._FrameControl); 
}; 
_GameChoose._LControl = function(date) { 
if (mapIndex != -1) { 
this._Map && this._Map[mapIndex]._LControl(date); 
} 
}; 
_GameChoose._KControl = function(event) { 
if (mapIndex == -1) { 
switch (event.keyCode) { 
case _KeyParameters.KeyUp: 
{ 
//alert("上t"); 
if (this._tempButtonsIndex > 0) { 
this._tempButtonsIndex--; 
for (var i = 0; i < this._tempButtons.length; i++) { 
this._tempButtons[i].unselect(); 
} 
this._tempButtons[this._tempButtonsIndex].select(); 
} 
} 
break; 
case _KeyParameters.KeyDown: 
{ 
//alert("下"); 
if (this._tempButtonsIndex < this._tempButtons.length - 1) { 
this._tempButtonsIndex++; 
for (var i = 0; i < this._tempButtons.length; i++) { 
this._tempButtons[i].unselect(); 
} 
this._tempButtons[this._tempButtonsIndex].select(); 
} 
} 
break; 
case _KeyParameters.KeyEnter: 
{ 
mapIndex = this._tempButtonsIndex; 
this._Map && this._Map[mapIndex]._Start(); 
} 
break; 
default: 
{ 
} break; 
} 
} else { 
if (event.keyCode == _KeyParameters.KeyESC) { 
mapIndex = -1; 
this._Start(); 
return; 
} 
this._Map && this._Map[mapIndex]._KControl(event); 
} 
} 
} 