JavaScript小游戏平台开发：实现游戏选择器与Game类封装

游戏选择器开发概述与成果展示

首先展示一下本次开发的初步成果，界面效果可能略显粗糙，敬请谅解。

本次开发的核心在于设计游戏选择器，其功能是在用户进入游戏时展示游戏列表，并提供简单的选择交互。

该选择器基于此前定义的游戏类进行构建，并对原有代码进行了部分调整与优化。

 
//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; //保存当前Game对象引用
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; //保存当前Game对象引用
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;
}; 

游戏选择器本质上也是Game类的一个实例，它同样具备加载动画和键盘处理机制。

 
//创建具体的游戏实例
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>  <div id="GameFrame" style="width:400;height:400; "> </div> </body> </html>

代码编写得较为简陋，但为了提升个人综合能力，特此分享，欢迎各位批评指正。