当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 用javascript做一个小游戏平台 (二) 游戏选择器

Javascript
jquery 操作单选框,复选框,下拉列表实现代码
js 数组实现一个类似ruby的迭代器
JavaScript 组件之旅(一)分析和设计
JavaScript 组件之旅(二)编码实现和算法
JavaScript 组件之旅(三):用 Ant 构建组件
JavaScript 组件之旅(四):测试 JavaScript 组件
小议javascript 设计模式 推荐
浅谈javascript 面向对象编程
javascript 时间比较实现代码
js apply/call/caller/callee/bind使用方法与区别分析
JavaScript 全角转半角部分
jquery 选择器部分整理
Firebug 字幕文件JSON地址获取代码
jQuery 判断元素上是否绑定了事件
javascript实现的距离现在多长时间后的一个格式化的日期
javascript 面向对象,实现namespace,class,继承,重载
javascript 通过封装div方式弹出div窗体
JScript 脚本实现文件下载 一般用于下载木马
JavaScript 工具库 Cloudgamer JavaScript Library v0.1 发布
网页禁用右键实现代码(JavaScript代码)

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 66 ::
收藏到网摘: n/a

昨天晚上“设计”了n久,那些代码都还没有运行起来,有点心急、有点郁闷。 今天先预览一下今晚的成果,如下(挫了点,别扔砖头):

今天主要设计了下选择器,就是进入游戏时展现游戏列表,然后用来选择游戏的一个白痴的功能。
选择器建立在昨天的游戏类基础上,针对昨天的代码我作了部分修改:
复制代码 代码如下:

//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);
}
}
}

就这么写内容,由于时间关系,贪吃蛇仍然没有做,昨天最后一句口号被公司的人说了,说我把公司分配的任务扔了。
今天要改一句口号,以促进第一个游戏的完成:白天权限,晚上贪吃蛇,我要把贪吃蛇做到极致,嘿嘿...

[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]

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