|
|
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");
.鍵盤參數(shù)對(duì)象：在游戲中會(huì)經(jīng)常獲取鍵盤的值，設(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)畫類：用于播放一些游戲跳轉(zhuǎn)動(dòng)畫：
復(fù)制代碼 代碼如下:
var Animation = function(endFn) {
//播放動(dòng)畫
this._play = function() {
//具體怎么放沒(méi)有想好。
};
//播放結(jié)束事件
this._palyEnd = endFn || function() {
alert("動(dòng)畫播放結(jié)束");
};
};
.游戲類：要有一個(gè)游戲名，
a.控制：1.邏輯控制、2.鍵盤控制
b.主界面：1.標(biāo)題、2.游戲區(qū)域、3.狀態(tài)顯示區(qū)、4.控制區(qū)
c.動(dòng)畫：1.開(kāi)場(chǎng)動(dòng)畫、2.過(guò)關(guān)動(dòng)畫、3.通關(guān)動(dòng)畫
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)單鍵盤邏輯
};
//開(kāi)場(chǎng)動(dòng)畫
this._AnmLoad = new Animation(null);
//過(guò)關(guān)動(dòng)畫
this._AnmNext = new Animation(null);
//通關(guān)動(dòng)畫
this._AnmEnd = new Animation(null);
};
.游戲列表：就是游戲類的對(duì)象列表。
.游戲選擇器：可以是一個(gè)游戲類對(duì)象。
var _GameChoose = new Game("選擇器", null, null);
.頁(yè)面控制：用于注冊(cè)頁(yè)面事件，接受用戶響應(yīng)，并傳遞給游戲選擇器；
代碼
復(fù)制代碼 代碼如下:
var _PageControl = {
//8.a:線程控制
_ThreadControl: function() {
_GameChoose._LControl();
},
//8.b:鍵盤控制
_KeyControl: function(event) {
_GameChoose._KControl(event);
},
//8.cc.事件注冊(cè)
_StartRegedit: function() {
//把this._ThreadControl添加到循環(huán)線程
//把this._KeyControl注冊(cè)到document的鍵盤單擊
}
}
最后，到了這一步，貌似就“設(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.鍵盤參數(shù)類
* 3.標(biāo)簽類：用于控制、產(chǎn)生html標(biāo)簽
* 4.動(dòng)畫類：播放動(dòng)畫，播放結(jié)束事件
* 5.游戲類：游戲名
* a.控制：1.邏輯控制、2.鍵盤控制
* b.主界面：1.標(biāo)題、2.游戲區(qū)域、3.狀態(tài)顯示區(qū)、4.控制區(qū)
* c.動(dòng)畫：1.開(kāi)場(chǎng)動(dòng)畫、2.過(guò)關(guān)動(dòng)畫、3.通關(guān)動(dòng)畫
* d:事件：1.開(kāi)始、2.結(jié)束
* 6.游戲列表
* 7.游戲選擇器
* 8.頁(yè)面控制：a.線程控制、b.鍵盤控制、c.事件注冊(cè)
***/
window.onload = function() {
//----------------------------------------------------
//1.網(wǎng)頁(yè)游戲區(qū)域：
var _GameFrame = document.getElementById("GameFrame");
//----------------------------------------------------
//2.鍵盤參數(shù)類:可以根據(jù)需要把鍵值添加進(jìn)來(lái)
var _KeyParameters = { KeyEnter: 13, KeySpace: 32, KeyLeft: 37, KeyUp: 38, KeyRight: 39, KeyDown: 40, KeyESC: 27 };
//----------------------------------------------------
//3.標(biāo)簽類：用于控制、產(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)畫類：播放動(dòng)畫，播放結(jié)束事件
var Animation = function(endFn) {
//播放動(dòng)畫
this._play = function() {
};
//播放結(jié)束事件
this._palyEnd = endFn || function() {
alert("動(dòng)畫播放結(jié)束");
};
};
//----------------------------------------------------
//5.游戲類：
var Game = function(name, logicalFn, keyFn, startFn, endFn) {
//游戲名
this._name = name || "未命名";
//5.a.1:邏輯控制
this._LControl = logicalFn || function() {
//簡(jiǎn)單游戲邏輯控制
};
//5.a.2:鍵盤控制
this._KControl = keyFn || function(event) {
//簡(jiǎ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)畫
this._AnmLoad = new Animation(null);
//5.c.2:過(guò)關(guān)動(dòng)畫
this._AnmNext = new Animation(null);
//5.c.3:通關(guān)動(dòng)畫
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("賽車", 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:鍵盤控制
_KeyControl: function(event) {
_GameChoose._KControl(event);
},
//8.cc.事件注冊(cè)
_StartRegedit: function() {
//把this._ThreadControl添加到循環(huán)線程
//把this._KeyControl注冊(cè)到document的鍵盤單擊
}
}
//----------------------------------------------------
}
</script>
<div id="GameFrame" style="width:400;height:400">
</div>
就先這樣吧，明天再讓它運(yùn)行一下，順便設(shè)計(jì)一下第一個(gè)游戲：貪吃蛇。
用同事的一句話喊一下口號(hào)：不做權(quán)限設(shè)計(jì)，做全國(guó)最好的貪吃蛇，汗一個(gè)...
JavaScript技術(shù)：用js做一個(gè)小游戲平臺(tái) (一)，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
