用javascript做一个小游戏平台 (二) 游戏选择器_javascript技巧

今天先预览一下今晚的成果，如下（挫了点，别扔砖头）：

今天主要设计了下选择器，就是进入游戏时展现游戏列表，然后用来选择游戏的一个白痴的功能。

选择器建立在昨天的游戏类基础上，针对昨天的代码我作了部分修改：

复制代码 代码如下:

//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 += "
当前游戏没有编写，您可以按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 = "你可以
使用上下键
选择游戏";
this._FrameControl = _HtmlControl._newPanel(240, 210, 160, 190);
this._FrameControl.innerHTML = "按下Enter
进入游戏";
this._tempButtons = [];
this._tempButtonsIndex = 0;
//this._FrameMain.style.滚动条//
if (this._Map.length > 0) {
for (var i = 0; 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[i].unselect();
}
this._tempButtons[this._tempButtonsIndex].select();
}
}
break;
case _KeyParameters.KeyDown:
{
//alert("下");
if (this._tempButtonsIndex this._tempButtonsIndex++;
for (var i = 0; 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);
}
}
}

就这么写内容，由于时间关系，贪吃蛇仍然没有做，昨天最后一句口号被公司的人说了，说我把公司分配的任务扔了。

今天要改一句口号，以促进第一个游戏的完成：白天权限，晚上贪吃蛇，我要把贪吃蛇做到极致，嘿嘿...

<title> </title> <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>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

写的明显很挫，但是为了提升自己的各方面能力，还是贴上来了，欢迎各位批评。