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

记得上班写代码时，我们技术总监总说是要先“设计”，那就先“设计”吧。

ps：我是新手大家多多见谅。

.网页游戏区域。就是说需要知道游戏在网页上的区域，如下：

在网页中插入一个div，设定宽高和id，

然后再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.事件注册

_StartRegedit: function() {

//把this._ThreadControl添加到循环线程

//把this._KeyControl注册到document的键盘单击

}

}

最后，到了这一步，貌似就“设计”完了？暂且不管这是不是设计，姑且说是一种边敲代码边设计的设计吧。不过貌似真的就可行了。当然它现在是不能运行的。我们先把总体代码贴出来看一下：

整体代码

/***

* 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的键盘单击

}

}

//----------------------------------------------------

}

就先这样吧，明天再让它运行一下，顺便设计一下第一个游戏：贪吃蛇。

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