用javascript做一个小游戏平台 (二) 游戏选择器_javascript技巧

企鹅博客
企鹅博客
企鹅博客
29822
文章
0
评论
2020年9月17日10:10:33 评论 3 views 11456字阅读38分11秒

今天先预览一下今晚的成果,如下(挫了点,别扔砖头):

用javascript做一个小游戏平台 (二) 游戏选择器_javascript技巧

今天主要设计了下选择器,就是进入游戏时展现游戏列表,然后用来选择游戏的一个白痴的功能。

选择器建立在昨天的游戏类基础上,针对昨天的代码我作了部分修改:

复制代码 代码如下:

//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 += "

当前游戏没有编写,您可以按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 = "你可以

使用上下键

选择游戏";

this._FrameControl = _HtmlControl._newPanel(240, 210, 160, 190);

this._FrameControl.innerHTML = "按下Enter

进入游戏";

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 全选 注:如需引入外部Js需刷新才能执行]

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

继续阅读
weinxin
欢迎加入中国站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
nodejs npm package.json中文文档_node.js js教程

nodejs npm package.json中文文档_node.js

简介 本文档有所有package.json中必要的配置。它必须是真正的json,而不是js对象。 本文档中描述的很多行为都受npm-config(7)的影响。 默认值 npm会根据包内容设置一些默认值...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: