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

139 阅读 0 评论 92 点赞

我是靠谱客的博主清秀唇彩，最近开发中收集的这篇文章主要介绍用js做一个小游戏平台 (一)，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

记得上班写代码时，我们技术总监总说是要先“设计”，那就先“设计”吧。
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.事件注册 
_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> 