用javascript做一個小遊戲平台 (二) 遊戲選取器

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

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

選取器建立在昨天的遊戲類基礎上，針對昨天的代碼我作了部分修改： 複製代碼 代碼如下://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:標題區
this._FrameTitle = null;
//5.b.2:遊戲空間
this._FrameMain = null;
//5.b.3:狀態顯示區
this._FrameState = null;
//5.b.4:控制區
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;
};

就是說選取器它也是遊戲類的一個對象，有載入動畫，也有鍵盤處理等： 複製代碼 代碼如下://建立遊戲
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("坦克大戰", 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);
}
}
}

就這麼寫內容，由於時間關係，貪吃蛇仍然沒有做，昨天最後一句口號被公司的人說了，說我把公司分配的任務扔了。

今天要改一句口號，以促進第一個遊戲的完成：白天許可權，晚上貪吃蛇，我要把貪吃蛇做到極致，嘿嘿... <title></title><br /><style type="text/css"> .button { </p><p>} </style><p><p>