今天先预览一下今晚的成果，如下（挫了点，别扔砖头）：今天主要设计了下选择器，就是进入游戏时展现游戏列表，然后用来选择游戏的一个白痴的功能。 选择器建立在昨天的游戏类基础上，针对昨天的代码我作了部分修改： 复制代码 代码如下: //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); } } } 就这么写内容，由于时间关系，贪吃蛇仍然没有做，昨天最后一句口号被公司的人说了，说我把公司分配的任务扔了。 今天要改一句口号，以促进第一个游戏的完成：白天权限，晚上贪吃蛇，我要把贪吃蛇做到极致，嘿嘿... .button { } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]写的明显很挫，但是为了提升自己的各方面能力，还是贴上来了，欢迎各位批评。

　　推荐阅读

　　JavaScript 学习笔记（五）

本地对象 ①Array类 ②Date类 对象的类型 内置对象 ①Global对象 ②Math对象 宿主对象 今天继续学习JS中的对象，昨天内置对象Global对象和Math对象，今天继续。宿主对象 所有非本地对象都是宿主对象host object，即>>>详细阅读

本文标题：用javascript做一个小游戏平台 (二) 游戏选择器

地址：http://www.17bianji.com/kaifa2/JS/27325.html

 1/2    1