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

Javascript
表格 隔行换色升级版
JavaScript 变量基础知识
fileupload控件 文件类型客户端验证实现代码
extjs DataReader、JsonReader、XmlReader的构造方法
让Firefox支持event对象实现代码
CSS+Js遮罩效果的TAB及焦点图片切换(推荐)
javascript showModalDialog传值与FireFox的window.open 父子窗口传值示例
JQuery 图片延迟加载并等比缩放插件
Jquery作者John Resig自己封装的javascript 常用函数
js 鼠标拖动对象 可让任何div实现拖动效果
页面中js执行顺序
Javascript select下拉框操作常用方法
jQuery 常见学习网站与参考书
javascript currying返回函数的函数
prototype 中文参数乱码解决方案
为javascript添加String.Format方法
asp.net HttpHandler实现图片防盗链
Riot.js 快速的JavaScript单元测试框架
Javascript实现的CSS代码高亮显示
Js 实现表格隔行换色一例

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


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

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