用javascript做一个小游戏平台 (二) 游戏选择器
作者：bea
今天先预览一下今晚的成果，如下（挫了点，别扔砖头）：今天主要设计了下选择器，就是进入游戏时展现游戏列表，然后用来选择游戏的一个白痴的功能。 选择器建立在昨天的游戏类基础上，针对昨天的代码我作了部分修改： 代码如下: //5.游戏类：名称，逻辑方法，键盘方法，开始方法，开始关卡方法,结束方法 var Game = function(name, logicalFn, keyFn, startFn, loadFn, endFn) { //游戏名 this._name =
今天先预览一下今晚的成果，如下（挫了点，别扔砖头）：
今天主要设计了下选择器，就是进入游戏时展现游戏列表，然后用来选择游戏的一个白痴的功能。
选择器建立在昨天的游戏类基础上，针对昨天的代码我作了部分修改：
代码如下:
//5.游戏类：名称，逻辑方法，键盘方法，开始方法，开始关卡方法,结束方法
var Game = function(name, logicalFn, keyFn, startFn, loadFn, endFn) {
//游戏名
this._name = name || "未命名";
//5.a.1:逻辑控制
this._LControl = logicalFn || function(date) {
//简单游戏逻辑控制
if (this._FrameMain) {
var innHTML = "游戏时间：" + date.getSeconds() + "秒" + date.getMilliseconds();
innHTML += "<br/>当前游戏没有编写，您可以按Esc退出该游戏；";
this._FrameMain.innerHTML = innHTML;
}
};
//5.a.2:键盘控制
this._KControl = keyFn || function(event) {
//简单键盘逻辑
alert("您敲击了" + event.keyCode + "键");
};
//5.b.1:标题区域
this._FrameTitle = null;
//5.b.2:游戏区域
this._FrameMain = null;
//5.b.3:状态显示区
this._FrameState = null;
//5.b.4:控制区
this._FrameControl = null;
//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 = function() {
this._AnmLoad = this._AnmLoad || new Animation(null);
var temp = this; //得到当前对象
this._AnmLoad._palyEnd = this._AnmLoad._palyEnd || function() {
startFn && startFn();
temp._Load();
};
this._AnmLoad._play();
};
//5.d.2:结束
this._End = endFn || function() {
alert("游戏结束");
};
//5.d.3:加载：每次开始游戏时(关卡开始)
this._Load = function() {
this._AnmNext = this._AnmNext || new Animation(null);
var temp = this; //得到当前对象
this._AnmNext._palyEnd = this._AnmNext._palyEnd || function() {
if (!loadFn) {
temp._FrameTitle = _HtmlControl._newPanel(0, 0, 400, 30);
temp._FrameTitle.innerHTML = temp._name || "未命名游戏";
temp._FrameMain = _HtmlControl._newPanel(0, 30, 350, 370);
temp._FrameState = _HtmlControl._newPanel(350, 30, 50, 180);
temp._FrameControl = _HtmlControl._newPanel(350, 210, 50, 190);
_HtmlControl._ClearArea();
_HtmlControl._AddControl(temp._FrameTitle);
_HtmlControl._AddControl(temp._FrameMain);
_HtmlControl._AddControl(temp._FrameState);
_HtmlControl._AddControl(temp._FrameControl);
} else {
loadFn();
}
}
this._AnmNext && this._AnmNext._play();
}
//5.e地图
this._Map = [];
mapIndex = -1;
};
就是说选择器它也是游戏类的一个对象，有加载动画，也有键盘处理等：
代码如下:
//创建游戏
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);
{
_GameChoose._Map = _GameList;
_GameChoose._Load = function() {
this._FrameTitle = _HtmlControl._newPanel(0, 0, 400, 30);
this._FrameTitle.innerHTML = "请选择游戏";
this._FrameMain = _HtmlControl._newPanel(0, 30, 240, 370);
this._FrameState = _HtmlControl._newPanel(240, 30, 160, 180);
this._FrameState.innerHTML = "你可以<br/>使用上下键<br/>选择游戏";
this._FrameControl = _HtmlControl._newPanel(240, 210, 160, 190);
this._FrameControl.innerHTML = "按下Enter<br/>进入游戏";
this._tempButtons = [];
this._tempButtonsIndex = 0;
//this._FrameMain.style.滚动条//
if (this._Map.length > 0) {
for (var i = 0; i < this._Map.length; i++) {
var button = _HtmlControl._newButton(this._Map[i]._name, 200, 30);
this._FrameMain.appendChild(button);
this._tempButtons.push(button);
}
this._tempButtons[0].select();
}
_HtmlControl._AddControl(this._FrameTitle);
_HtmlControl._AddControl(this._FrameMain);
_HtmlControl._AddControl(this._FrameState);
_HtmlControl._AddControl(this._FrameControl);
};
_GameChoose._LControl = function(date) {
if (mapIndex != -1) {
this._Map && this._Map[mapIndex]._LControl(date);
}
};
_GameChoose._KControl = function(event) {
if (mapIndex == -1) {
switch (event.keyCode) {
case _KeyParameters.KeyUp:
{
//alert("上t");
if (this._tempButtonsIndex > 0) {
this._tempButtonsIndex--;
for (var i = 0; i < this._tempButtons.length; i++) {
this._tempButtons[i].unselect();
}
this._tempButtons[this._tempButtonsIndex].select();
}
}
break;
case _KeyParameters.KeyDown:
{
//alert("下");
if (this._tempButtonsIndex < this._tempButtons.length - 1) {
this._tempButtonsIndex++;
for (var i = 0; i < this._tempButtons.length; i++) {
this._tempButtons[i].unselect();
}
this._tempButtons[this._tempButtonsIndex].select();
}
}
break;
case _KeyParameters.KeyEnter:
{
mapIndex = this._tempButtonsIndex;
this._Map && this._Map[mapIndex]._Start();
}
break;
default:
{
} break;
}
} else {
if (event.keyCode == _KeyParameters.KeyESC) {
mapIndex = -1;
this._Start();
return;
}
this._Map && this._Map[mapIndex]._KControl(event);
}
}
}
就这么写内容，由于时间关系，贪吃蛇仍然没有做，昨天最后一句口号被公司的人说了，说我把公司分配的任务扔了。
今天要改一句口号，以促进第一个游戏的完成：白天权限，晚上贪吃蛇，我要把贪吃蛇做到极致，嘿嘿...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
</title>
</head>
<body>
<style type="text/css">
.button
{
}
</style>
<script type="text/javascript"language="javascript">
//设计者：陈宁伟
//mail：cnwei2010@163.com
//时间：2009.12.29
//版本：第二次修改
//ps：如有疑问可发邮件或直接上博客园
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() {
},
//
_AddControl: function(c) {
_GameFrame.appendChild(c);
},
//创建一个div
_newDiv: function() {
var div = document.createElement("div");
return div;
},
//创建一个指定宽高的按钮样式标签
_newButton: function(name, w, h) {
var div = this._newDiv();
div.innerHTML = name;
div.style.width = w + "px";
div.style.height = h + "px";
div.style.margin = "5px";
div.style.paddingTop = "5px";
div.style.textAlign = "center";
div.style.backgroundColor = "gray";
div.style.border = "solid 1px black";
div.select = function() {
//被选中时的变化
this.style.backgroundColor = "pink";
};
div.unselect = function() {
//没选中时的样子
this.style.backgroundColor = "gray";
};
return div;
},
_newPanel: function(x, y, w, h) {
var div = this._newDiv();
div.style.position = "absolute";
div.style.width = w + "px";
div.style.height = h + "px";
div.style.left = x + "px";
div.style.top = y + "px";
div.style.backgroundColor = "gray";
div.style.textAlign = "center";
div.style.border = "solid 1px black";
div.select = function() {
//被选中时的变化
this.style.backgroundColor = "pink";
};
div.unselect = function() {
//没选中时的样子
this.style.backgroundColor = "gray";
};
return div;
}
//继续...
};
//----------------------------------------------------
//4.动画类：播放动画，播放结束事件
var Animation = function(name,endFn) {
var frames = ['.', '.', '...'];
var index = 0;
var panel = undefined;
//播放动画
this._play = function() {
panel = _HtmlControl._newPanel(100, 150, 150, 50);
panel.style.paddingTop = "17px";
panel.innerHTML = "";
_HtmlControl._AddControl(panel);
this._LControl();
};
this._LControl = function() {
//下一步动画调用
var temp = this; //得到当前对象
if (index < frames.length) {
if (panel) { panel.innerHTML = (!!name?name:"")+frames[index]; }
setTimeout(function() { temp._LControl(); }, 500);
//动画逻辑代码
//alert("播放动画，倒计时：" + (frames.length - index));
} else {
if (this._palyEnd) {
setTimeout(function() { _HtmlControl._ClearArea(); temp._palyEnd(); }, 100);
}
}
index++;
}
//播放结束事件
this._palyEnd = endFn;
};
//----------------------------------------------------
//5.游戏类：姓名，逻辑方法，键盘方法，开始方法，开始关卡方法,结束方法
var Game = function(name, logicalFn, keyFn, startFn, loadFn, endFn) {
//游戏名
this._name = name || "未命名";
//5.a.1:逻辑控制
this._LControl = logicalFn || function(date) {
//简单游戏逻辑控制
if (this._FrameMain) {
var innHTML = "游戏时间：" + date.getSeconds() + "秒" + date.getMilliseconds();
innHTML += "<br>当前游戏没有编写，您可以按Esc退出该游戏；";
this._FrameMain.innerHTML = innHTML;
}
};
//5.a.2:键盘控制
this._KControl = keyFn || function(event) {
//简单键盘逻辑
alert("您敲击了" + event.keyCode + "键");
};
//5.b.1:标题区域
this._FrameTitle = null;
//5.b.2:游戏区域
this._FrameMain = null;
//5.b.3:状态显示区
this._FrameState = null;
//5.b.4:控制区
this._FrameControl = null;
//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 = function() {
this._AnmLoad = this._AnmLoad || new Animation(null);
var temp = this; //得到当前对象
this._AnmLoad._palyEnd = this._AnmLoad._palyEnd || function() {
startFn && startFn();
temp._Load();
};
this._AnmLoad._play();
};
//5.d.2:结束
this._End = endFn || function() {
alert("游戏结束");
};
//5.d.3:加载：每次开始游戏时(关卡开始)
this._Load = function() {
this._AnmNext = this._AnmNext || new Animation(null);
var temp = this; //得到当前对象
this._AnmNext._palyEnd = this._AnmNext._palyEnd || function() {
if (!loadFn) {
temp._FrameTitle = _HtmlControl._newPanel(0, 0, 400, 30);
temp._FrameTitle.innerHTML = temp._name || "未命名游戏";
temp._FrameMain = _HtmlControl._newPanel(0, 30, 350, 370);
temp._FrameState = _HtmlControl._newPanel(350, 30, 50, 180);
temp._FrameControl = _HtmlControl._newPanel(350, 210, 50, 190);
_HtmlControl._ClearArea();
_HtmlControl._AddControl(temp._FrameTitle);
_HtmlControl._AddControl(temp._FrameMain);
_HtmlControl._AddControl(temp._FrameState);
_HtmlControl._AddControl(temp._FrameControl);
} else {
loadFn();
}
}
this._AnmNext && this._AnmNext._play();
}
//5.e地图
this._Map = [];
mapIndex = -1;
};
//----------------------------------------------------
//创建游戏
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);
{
_GameChoose._Map = _GameList;
_GameChoose._Load = function() {
this._FrameTitle = _HtmlControl._newPanel(0, 0, 400, 30);
this._FrameTitle.innerHTML = "请选择游戏";
this._FrameMain = _HtmlControl._newPanel(0, 30, 240, 370);
this._FrameState = _HtmlControl._newPanel(240, 30, 160, 180);
this._FrameState.innerHTML = "你可以<br>使用上下键<br>选择游戏";
this._FrameControl = _HtmlControl._newPanel(240, 210, 160, 190);
this._FrameControl.innerHTML = "按下Enter<br>进入游戏";
this._tempButtons = [];
this._tempButtonsIndex = 0;
//this._FrameMain.style.滚动条//
if (this._Map.length > 0) {
for (var i = 0; i < this._Map.length; i++) {
var button = _HtmlControl._newButton(this._Map[i]._name, 200, 30);
this._FrameMain.appendChild(button);
this._tempButtons.push(button);
}
this._tempButtons[0].select();
}
_HtmlControl._AddControl(this._FrameTitle);
_HtmlControl._AddControl(this._FrameMain);
_HtmlControl._AddControl(this._FrameState);
_HtmlControl._AddControl(this._FrameControl);
};
_GameChoose._LControl = function(date) {
if (mapIndex != -1) {
this._Map && this._Map[mapIndex]._LControl(date);
}
};
_GameChoose._KControl = function(event) {
if (mapIndex == -1) {
switch (event.keyCode) {
case _KeyParameters.KeyUp:
{
//alert("上t");
if (this._tempButtonsIndex > 0) {
this._tempButtonsIndex--;
for (var i = 0; i < this._tempButtons.length; i++) {
this._tempButtons[i].unselect();
}
this._tempButtons[this._tempButtonsIndex].select();
}
}
break;
case _KeyParameters.KeyDown:
{
//alert("下");
if (this._tempButtonsIndex < this._tempButtons.length - 1) {
this._tempButtonsIndex++;
for (var i = 0; i < this._tempButtons.length; i++) {
this._tempButtons[i].unselect();
}
this._tempButtons[this._tempButtonsIndex].select();
}
}
break;
case _KeyParameters.KeyEnter:
{
mapIndex = this._tempButtonsIndex;
this._Map && this._Map[mapIndex]._Start();
}
break;
default:
{
} break;
}
} else {
if (event.keyCode == _KeyParameters.KeyESC) {
mapIndex = -1;
this._Start();
return;
}
this._Map && this._Map[mapIndex]._KControl(event);
}
}
}
//----------------------------------------------------
//8.页面控制：
var _PageControl = {
//8.a:线程控制
_ThreadControl: function() {
var date = new Date();
_GameChoose._LControl(date);
},
//8.b:键盘控制
_KeyControl: function(event) {
event = event || window.event;
_GameChoose._KControl(event);
return false;
},
//8.cc.事件注册
_StartRegedit: function() {
var temp = this;
//把this._ThreadControl添加到循环线程
window.clearInterval(this._inteval);
this._inteval = window.setInterval(temp._ThreadControl, 100);
//把this._KeyControl注册到document的键盘单击
document.onkeydown = this._KeyControl;
_GameChoose._Start();
},
_interval: null
}
//----------------------------------------------------
_PageControl._StartRegedit();
}
</script>
<div id="GameFrame" style="width:400;height:400; ">
</div>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
写的明显很挫，但是为了提升自己的各方面能力，还是贴上来了，欢迎各位批评。
有用 | 无用
今天主要设计了下选择器，就是进入游戏时展现游戏列表，然后用来选择游戏的一个白痴的功能。
选择器建立在昨天的游戏类基础上，针对昨天的代码我作了部分修改：
代码如下:
//5.游戏类：名称，逻辑方法，键盘方法，开始方法，开始关卡方法,结束方法
var Game = function(name, logicalFn, keyFn, startFn, loadFn, endFn) {
//游戏名
this._name = name || "未命名";
//5.a.1:逻辑控制
this._LControl = logicalFn || function(date) {
//简单游戏逻辑控制
if (this._FrameMain) {
var innHTML = "游戏时间：" + date.getSeconds() + "秒" + date.getMilliseconds();
innHTML += "<br/>当前游戏没有编写，您可以按Esc退出该游戏；";
this._FrameMain.innerHTML = innHTML;
}
};
//5.a.2:键盘控制
this._KControl = keyFn || function(event) {
//简单键盘逻辑
alert("您敲击了" + event.keyCode + "键");
};
//5.b.1:标题区域
this._FrameTitle = null;
//5.b.2:游戏区域
this._FrameMain = null;
//5.b.3:状态显示区
this._FrameState = null;
//5.b.4:控制区
this._FrameControl = null;
//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 = function() {
this._AnmLoad = this._AnmLoad || new Animation(null);
var temp = this; //得到当前对象
this._AnmLoad._palyEnd = this._AnmLoad._palyEnd || function() {
startFn && startFn();
temp._Load();
};
this._AnmLoad._play();
};
//5.d.2:结束
this._End = endFn || function() {
alert("游戏结束");
};
//5.d.3:加载：每次开始游戏时(关卡开始)
this._Load = function() {
this._AnmNext = this._AnmNext || new Animation(null);
var temp = this; //得到当前对象
this._AnmNext._palyEnd = this._AnmNext._palyEnd || function() {
if (!loadFn) {
temp._FrameTitle = _HtmlControl._newPanel(0, 0, 400, 30);
temp._FrameTitle.innerHTML = temp._name || "未命名游戏";
temp._FrameMain = _HtmlControl._newPanel(0, 30, 350, 370);
temp._FrameState = _HtmlControl._newPanel(350, 30, 50, 180);
temp._FrameControl = _HtmlControl._newPanel(350, 210, 50, 190);
_HtmlControl._ClearArea();
_HtmlControl._AddControl(temp._FrameTitle);
_HtmlControl._AddControl(temp._FrameMain);
_HtmlControl._AddControl(temp._FrameState);
_HtmlControl._AddControl(temp._FrameControl);
} else {
loadFn();
}
}
this._AnmNext && this._AnmNext._play();
}
//5.e地图
this._Map = [];
mapIndex = -1;
};
就是说选择器它也是游戏类的一个对象，有加载动画，也有键盘处理等：
代码如下:
//创建游戏
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);
{
_GameChoose._Map = _GameList;
_GameChoose._Load = function() {
this._FrameTitle = _HtmlControl._newPanel(0, 0, 400, 30);
this._FrameTitle.innerHTML = "请选择游戏";
this._FrameMain = _HtmlControl._newPanel(0, 30, 240, 370);
this._FrameState = _HtmlControl._newPanel(240, 30, 160, 180);
this._FrameState.innerHTML = "你可以<br/>使用上下键<br/>选择游戏";
this._FrameControl = _HtmlControl._newPanel(240, 210, 160, 190);
this._FrameControl.innerHTML = "按下Enter<br/>进入游戏";
this._tempButtons = [];
this._tempButtonsIndex = 0;
//this._FrameMain.style.滚动条//
if (this._Map.length > 0) {
for (var i = 0; i < this._Map.length; i++) {
var button = _HtmlControl._newButton(this._Map[i]._name, 200, 30);
this._FrameMain.appendChild(button);
this._tempButtons.push(button);
}
this._tempButtons[0].select();
}
_HtmlControl._AddControl(this._FrameTitle);
_HtmlControl._AddControl(this._FrameMain);
_HtmlControl._AddControl(this._FrameState);
_HtmlControl._AddControl(this._FrameControl);
};
_GameChoose._LControl = function(date) {
if (mapIndex != -1) {
this._Map && this._Map[mapIndex]._LControl(date);
}
};
_GameChoose._KControl = function(event) {
if (mapIndex == -1) {
switch (event.keyCode) {
case _KeyParameters.KeyUp:
{
//alert("上t");
if (this._tempButtonsIndex > 0) {
this._tempButtonsIndex--;
for (var i = 0; i < this._tempButtons.length; i++) {
this._tempButtons[i].unselect();
}
this._tempButtons[this._tempButtonsIndex].select();
}
}
break;
case _KeyParameters.KeyDown:
{
//alert("下");
if (this._tempButtonsIndex < this._tempButtons.length - 1) {
this._tempButtonsIndex++;
for (var i = 0; i < this._tempButtons.length; i++) {
this._tempButtons[i].unselect();
}
this._tempButtons[this._tempButtonsIndex].select();
}
}
break;
case _KeyParameters.KeyEnter:
{
mapIndex = this._tempButtonsIndex;
this._Map && this._Map[mapIndex]._Start();
}
break;
default:
{
} break;
}
} else {
if (event.keyCode == _KeyParameters.KeyESC) {
mapIndex = -1;
this._Start();
return;
}
this._Map && this._Map[mapIndex]._KControl(event);
}
}
}
就这么写内容，由于时间关系，贪吃蛇仍然没有做，昨天最后一句口号被公司的人说了，说我把公司分配的任务扔了。
今天要改一句口号，以促进第一个游戏的完成：白天权限，晚上贪吃蛇，我要把贪吃蛇做到极致，嘿嘿...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>
</title>
</head>
<body>
<style type="text/css">
.button
{
}
</style>
<script type="text/javascript"language="javascript">
//设计者：陈宁伟
//mail：cnwei2010@163.com
//时间：2009.12.29
//版本：第二次修改
//ps：如有疑问可发邮件或直接上博客园
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() {
},
//
_AddControl: function(c) {
_GameFrame.appendChild(c);
},
//创建一个div
_newDiv: function() {
var div = document.createElement("div");
return div;
},
//创建一个指定宽高的按钮样式标签
_newButton: function(name, w, h) {
var div = this._newDiv();
div.innerHTML = name;
div.style.width = w + "px";
div.style.height = h + "px";
div.style.margin = "5px";
div.style.paddingTop = "5px";
div.style.textAlign = "center";
div.style.backgroundColor = "gray";
div.style.border = "solid 1px black";
div.select = function() {
//被选中时的变化
this.style.backgroundColor = "pink";
};
div.unselect = function() {
//没选中时的样子
this.style.backgroundColor = "gray";
};
return div;
},
_newPanel: function(x, y, w, h) {
var div = this._newDiv();
div.style.position = "absolute";
div.style.width = w + "px";
div.style.height = h + "px";
div.style.left = x + "px";
div.style.top = y + "px";
div.style.backgroundColor = "gray";
div.style.textAlign = "center";
div.style.border = "solid 1px black";
div.select = function() {
//被选中时的变化
this.style.backgroundColor = "pink";
};
div.unselect = function() {
//没选中时的样子
this.style.backgroundColor = "gray";
};
return div;
}
//继续...
};
//----------------------------------------------------
//4.动画类：播放动画，播放结束事件
var Animation = function(name,endFn) {
var frames = ['.', '.', '...'];
var index = 0;
var panel = undefined;
//播放动画
this._play = function() {
panel = _HtmlControl._newPanel(100, 150, 150, 50);
panel.style.paddingTop = "17px";
panel.innerHTML = "";
_HtmlControl._AddControl(panel);
this._LControl();
};
this._LControl = function() {
//下一步动画调用
var temp = this; //得到当前对象
if (index < frames.length) {
if (panel) { panel.innerHTML = (!!name?name:"")+frames[index]; }
setTimeout(function() { temp._LControl(); }, 500);
//动画逻辑代码
//alert("播放动画，倒计时：" + (frames.length - index));
} else {
if (this._palyEnd) {
setTimeout(function() { _HtmlControl._ClearArea(); temp._palyEnd(); }, 100);
}
}
index++;
}
//播放结束事件
this._palyEnd = endFn;
};
//----------------------------------------------------
//5.游戏类：姓名，逻辑方法，键盘方法，开始方法，开始关卡方法,结束方法
var Game = function(name, logicalFn, keyFn, startFn, loadFn, endFn) {
//游戏名
this._name = name || "未命名";
//5.a.1:逻辑控制
this._LControl = logicalFn || function(date) {
//简单游戏逻辑控制
if (this._FrameMain) {
var innHTML = "游戏时间：" + date.getSeconds() + "秒" + date.getMilliseconds();
innHTML += "<br>当前游戏没有编写，您可以按Esc退出该游戏；";
this._FrameMain.innerHTML = innHTML;
}
};
//5.a.2:键盘控制
this._KControl = keyFn || function(event) {
//简单键盘逻辑
alert("您敲击了" + event.keyCode + "键");
};
//5.b.1:标题区域
this._FrameTitle = null;
//5.b.2:游戏区域
this._FrameMain = null;
//5.b.3:状态显示区
this._FrameState = null;
//5.b.4:控制区
this._FrameControl = null;
//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 = function() {
this._AnmLoad = this._AnmLoad || new Animation(null);
var temp = this; //得到当前对象
this._AnmLoad._palyEnd = this._AnmLoad._palyEnd || function() {
startFn && startFn();
temp._Load();
};
this._AnmLoad._play();
};
//5.d.2:结束
this._End = endFn || function() {
alert("游戏结束");
};
//5.d.3:加载：每次开始游戏时(关卡开始)
this._Load = function() {
this._AnmNext = this._AnmNext || new Animation(null);
var temp = this; //得到当前对象
this._AnmNext._palyEnd = this._AnmNext._palyEnd || function() {
if (!loadFn) {
temp._FrameTitle = _HtmlControl._newPanel(0, 0, 400, 30);
temp._FrameTitle.innerHTML = temp._name || "未命名游戏";
temp._FrameMain = _HtmlControl._newPanel(0, 30, 350, 370);
temp._FrameState = _HtmlControl._newPanel(350, 30, 50, 180);
temp._FrameControl = _HtmlControl._newPanel(350, 210, 50, 190);
_HtmlControl._ClearArea();
_HtmlControl._AddControl(temp._FrameTitle);
_HtmlControl._AddControl(temp._FrameMain);
_HtmlControl._AddControl(temp._FrameState);
_HtmlControl._AddControl(temp._FrameControl);
} else {
loadFn();
}
}
this._AnmNext && this._AnmNext._play();
}
//5.e地图
this._Map = [];
mapIndex = -1;
};
//----------------------------------------------------
//创建游戏
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);
{
_GameChoose._Map = _GameList;
_GameChoose._Load = function() {
this._FrameTitle = _HtmlControl._newPanel(0, 0, 400, 30);
this._FrameTitle.innerHTML = "请选择游戏";
this._FrameMain = _HtmlControl._newPanel(0, 30, 240, 370);
this._FrameState = _HtmlControl._newPanel(240, 30, 160, 180);
this._FrameState.innerHTML = "你可以<br>使用上下键<br>选择游戏";
this._FrameControl = _HtmlControl._newPanel(240, 210, 160, 190);
this._FrameControl.innerHTML = "按下Enter<br>进入游戏";
this._tempButtons = [];
this._tempButtonsIndex = 0;
//this._FrameMain.style.滚动条//
if (this._Map.length > 0) {
for (var i = 0; i < this._Map.length; i++) {
var button = _HtmlControl._newButton(this._Map[i]._name, 200, 30);
this._FrameMain.appendChild(button);
this._tempButtons.push(button);
}
this._tempButtons[0].select();
}
_HtmlControl._AddControl(this._FrameTitle);
_HtmlControl._AddControl(this._FrameMain);
_HtmlControl._AddControl(this._FrameState);
_HtmlControl._AddControl(this._FrameControl);
};
_GameChoose._LControl = function(date) {
if (mapIndex != -1) {
this._Map && this._Map[mapIndex]._LControl(date);
}
};
_GameChoose._KControl = function(event) {
if (mapIndex == -1) {
switch (event.keyCode) {
case _KeyParameters.KeyUp:
{
//alert("上t");
if (this._tempButtonsIndex > 0) {
this._tempButtonsIndex--;
for (var i = 0; i < this._tempButtons.length; i++) {
this._tempButtons[i].unselect();
}
this._tempButtons[this._tempButtonsIndex].select();
}
}
break;
case _KeyParameters.KeyDown:
{
//alert("下");
if (this._tempButtonsIndex < this._tempButtons.length - 1) {
this._tempButtonsIndex++;
for (var i = 0; i < this._tempButtons.length; i++) {
this._tempButtons[i].unselect();
}
this._tempButtons[this._tempButtonsIndex].select();
}
}
break;
case _KeyParameters.KeyEnter:
{
mapIndex = this._tempButtonsIndex;
this._Map && this._Map[mapIndex]._Start();
}
break;
default:
{
} break;
}
} else {
if (event.keyCode == _KeyParameters.KeyESC) {
mapIndex = -1;
this._Start();
return;
}
this._Map && this._Map[mapIndex]._KControl(event);
}
}
}
//----------------------------------------------------
//8.页面控制：
var _PageControl = {
//8.a:线程控制
_ThreadControl: function() {
var date = new Date();
_GameChoose._LControl(date);
},
//8.b:键盘控制
_KeyControl: function(event) {
event = event || window.event;
_GameChoose._KControl(event);
return false;
},
//8.cc.事件注册
_StartRegedit: function() {
var temp = this;
//把this._ThreadControl添加到循环线程
window.clearInterval(this._inteval);
this._inteval = window.setInterval(temp._ThreadControl, 100);
//把this._KeyControl注册到document的键盘单击
document.onkeydown = this._KeyControl;
_GameChoose._Start();
},
_interval: null
}
//----------------------------------------------------
_PageControl._StartRegedit();
}
</script>
<div id="GameFrame" style="width:400;height:400; ">
</div>
</body>
</html>
[Ctrl+A 全选 注:
如需引入外部Js需刷新才能执行]
写的明显很挫，但是为了提升自己的各方面能力，还是贴上来了，欢迎各位批评。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- 用AJAX返回HTML片段中的JavaScript脚本
- Javascript解决常见浏览器兼容问题的12种方法
- javascript 可控式透明特效实现代码
- javascript 精确获取页面元素的位置
- javascript 精确获取样式属性（下）
- javascript 精确获取样式属性（上）
- javascript 模拟点击广告
- javascript getElementsByClassName 和js取地址栏参数
- javascript addLoadEvent函数说明
- firefox插件Firebug的使用教程
- firefox firebug中文入门教程
- Firefox+FireBug使JQuery的学习更加轻松愉快
- 20个非常棒的Jquery实用工具 国外文章
- JavaScript与DropDownList 区别分析
- HTML node相关的一些资料整理
- JQery 渐变图片导航效果代码 漂亮
- jquery 简短右键菜单 多浏览器兼容
- 使用JQUERY Tabs插件宿主IFRAMES
- 用jquery实现学校的校历(asp.net+jquery ui 1.72)