用js做一個小游戲平臺 (一)
2024-05-06 14:12:06
供稿：網友
記得上班寫代碼時，我們技術總監總說是要先“設計”，那就先“設計”吧。
ps：我是新手大家多多見諒。
.網頁游戲區域。就是說需要知道游戲在網頁上的區域，如下：
在網頁中插入一個div，設定寬高和id，
<div id="GameFrame" style="width:400;height:400"></div>
然后再js中得到該對象，
var _GameFrame = document.getElementById("GameFrame");
.鍵盤參數對象：在游戲中會經常獲取鍵盤的值，設定一個鍵值對應的對象：
var _KeyParameters = { KeyEnter: 13, KeySpace: 32, KeyLeft: 37, KeyUp: 38, KeyRight: 39, KeyDown: 40, KeyESC: 27 };
.標簽控制對象：用于控制、產生html標簽，輔助生成對應樣式的"控件"：
代碼如下:
var _HtmlControl =
{
//清空網頁游戲區域
_ClearArea: function() {
},
//創建一個div
newDiv: function() {
var div = document.createElement("div");
return div;
},
//創建一個指定寬高的按鈕樣式標簽
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;
}
//繼續...
};
.動畫類：用于播放一些游戲跳轉動畫：
代碼如下:
var Animation = function(endFn) {
//播放動畫
this._play = function() {
//具體怎么放沒有想好。
};
//播放結束事件
this._palyEnd = endFn || function() {
alert("動畫播放結束");
};
};
.游戲類：要有一個游戲名，
a.控制：1.邏輯控制、2.鍵盤控制
b.主界面：1.標題、2.游戲區域、3.狀態顯示區、4.控制區
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.事件注冊
