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

233 阅读 0 评论 154 点赞

我是靠谱客的博主彪壮烤鸡，最近开发中收集的这篇文章主要介绍用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 += "<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); 
} 
} 
} 