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

Javascript
IE bug table元素的innerHTML
Javascript学习笔记1 数据类型
Javascript学习笔记2 函数
Javascript学习笔记3 作用域
Javascript学习笔记4 Eval函数
Javascript学习笔记5 类和对象
Javascript学习笔记6 prototype的提出
Javascript学习笔记7 原型链的原理
Javascript学习笔记8 用JSON做原型
Javascript学习笔记9 prototype封装继承
Javascript 读书笔记索引贴
JavaScript 事件冒泡应用实例分析
JavaScript 事件冒泡简介及应用
Extjs学习笔记之九 数据模型(上)
javascript Object与Function使用
取选中的radio的值
JavaScript 学习笔记(九)call和apply方法
javascript下判断一个对象是否具有指定名称的属性的的代码
Javascript 实现TreeView CheckBox全选效果
jquery插件 cluetip 关键词注释

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 55 ::
收藏到网摘: 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 全选 提示:你可先修改部分代码,再按运行]

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