用js做一个小游戏平台 (一)

游戏平台架构设计概述

按照技术总监的要求，在编写代码前应先进行“设计”，因此我们首先从设计环节入手。

注：作者为初学者，恳请读者多多包涵。

核心组件定义与实现

首先需要定义网页游戏在页面上的显示区域，具体布局如下所示：

在HTML页面中插入一个div元素，并为其设定宽度、高度及唯一的id属性。

<div id="GameFrame" style="width:400;height:400"></div>

随后在JavaScript中获取该DOM对象。

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.事件注册
_StartRegedit: function() {
//把this._ThreadControl添加到循环线程
//把this._KeyControl注册到document的键盘单击
} 
} 

总体代码结构与运行展望

至此，看似“设计”工作已完成？暂且不论这是否算作严格意义上的设计，姑且称之为一种“边敲代码边设计”的模式。不过从逻辑上看，这似乎是可行的。当然，目前它还不能直接运行。我们先展示总体代码结构：

整体代码

 
<script type="text/javascript"language="javascript">
/*** 
* 1.网页游戏区域：
* 2.键盘参数类
* 3.标签类：用于控制、产生html标签
* 4.动画类：播放动画，播放结束事件
* 5.游戏类：游戏名
* a.控制：1.逻辑控制、2.键盘控制
* b.主界面：1.标题、2.游戏区域、3.状态显示区、4.控制区
* c.动画：1.开场动画、2.过关动画、3.通关动画
* d:事件：1.开始、2.结束
* 6.游戏列表
* 7.游戏选择器
* 8.页面控制：a.线程控制、b.键盘控制、c.事件注册
***/ 
window.onload = function() {
//---------------------------------------------------- 
//1.网页游戏区域：
var _GameFrame = document.getElementById("GameFrame");
//---------------------------------------------------- 
//2.键盘参数类:可以根据需要把键值添加进来
var _KeyParameters = { KeyEnter: 13, KeySpace: 32, KeyLeft: 37, KeyUp: 38, KeyRight: 39, KeyDown: 40, KeyESC: 27 };
//---------------------------------------------------- 
//3.标签类：用于控制、产生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;
} 
//继续...
}; 
//---------------------------------------------------- 
//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:标题区域
this._FrameTitle;
//5.b.2:游戏区域
this._FrameMain;
//5.b.3:状态显示区
this._FrameState;
//5.b.4:控制区
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("游戏结束");
}; 
}; 
//---------------------------------------------------- 
//创建游戏
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);
//---------------------------------------------------- 
//8.页面控制：
var _PageControl = {
//8.a:线程控制
_ThreadControl: function() {
_GameChoose._LControl();
}, 
//8.b:键盘控制
_KeyControl: function(event) {
_GameChoose._KControl(event);
}, 
//8.cc.事件注册
_StartRegedit: function() {
//把this._ThreadControl添加到循环线程
//把this._KeyControl注册到document的键盘单击
} 
} 
//---------------------------------------------------- 
} 
</script>
<div id="GameFrame" style="width:400;height:400">
</div>

暂时先这样，明天再尝试运行，并顺便设计第一个游戏：贪吃蛇。

借用同事的一句话作为口号：不做权限设计，做全国最好的贪吃蛇，汗一个...