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

时间:2020-05-12 人气:0

今天先预览一下今晚的成果，如下（挫了点，别扔砖头）：

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

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

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

就这么写内容，由于时间关系，贪吃蛇仍然没有做，昨天最后一句口号被公司的人说了，说我把公司分配的任务扔了。

今天要改一句口号，以促进第一个游戏的完成：白天权限，晚上贪吃蛇，我要把贪吃蛇做到极致，嘿嘿...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head>

<title>

</title>

</head> 
<body>

} 
</style> 
<script type="text/javascript"language="javascript"> 
//设计者：陈宁伟 
//mail：cnwei2010@163.com 
//时间：2009.12.29 
//版本：第二次修改 
//ps：如有疑问可发邮件或直接上博客园 
window.onload = function() { 
//---------------------------------------------------- 
//1.网页游戏区域： 
var _GameFrame = document.getElementById("GameFrame"); 
//---------------------------------------------------- 
//2.键盘参数类:可以根据需要把键值添加进来 
var _KeyParameters = { KeyEnter: 13, KeySpace: 32, KeyLeft: 37, KeyUp: 38, KeyRight: 39, KeyDown: 40, KeyESC: 27 }; 
//---------------------------------------------------- 
//3.标签类：用于控制、产生html标签 
var _HtmlControl = 
{

//清空网页游戏区域 
_ClearArea: function() {

}, 
// 
_AddControl: function(c) { 
_GameFrame.appendChild(c); 
},

//创建一个div 
_newDiv: function() { 
var div = document.createElement("div"); 
return div; 
},

//创建一个指定宽高的按钮样式标签 
_newButton: function(name, w, h) { 
var div = this._newDiv(); 
div.innerHTML = name; 
div.style.width = w + "px"; 
div.style.height = h + "px"; 
div.style.margin = "5px"; 
div.style.paddingTop = "5px"; 
div.style.textAlign = "center"; 
div.style.backgroundColor = "gray"; 
div.style.border = "solid 1px black"; 
div.select = function() { 
//被选中时的变化 
this.style.backgroundColor = "pink"; 
}; 
div.unselect = function() { 
//没选中时的样子 
this.style.backgroundColor = "gray"; 
}; 
return div; 
}, 
_newPanel: function(x, y, w, h) { 
var div = this._newDiv(); 
div.style.position = "absolute"; 
div.style.width = w + "px"; 
div.style.height = h + "px"; 
div.style.left = x + "px"; 
div.style.top = y + "px"; 
div.style.backgroundColor = "gray"; 
div.style.textAlign = "center";

div.style.border = "solid 1px black"; 
div.select = function() { 
//被选中时的变化 
this.style.backgroundColor = "pink"; 
}; 
div.unselect = function() { 
//没选中时的样子 
this.style.backgroundColor = "gray"; 
}; 
return div; 
}

//继续...

}; 
//---------------------------------------------------- 
//4.动画类：播放动画，播放结束事件 
var Animation = function(name,endFn) {

var frames = ['.', '.', '...']; 
var index = 0; 
var panel = undefined; 
//播放动画 
this._play = function() { 
panel = _HtmlControl._newPanel(100, 150, 150, 50); 
panel.style.paddingTop = "17px"; 
panel.innerHTML = ""; 
_HtmlControl._AddControl(panel); 
this._LControl(); 
};

this._LControl = function() {

//下一步动画调用 
var temp = this; //得到当前对象 
if (index < frames.length) { 
if (panel) { panel.innerHTML = (!!name?name:"")+frames[index]; } 
setTimeout(function() { temp._LControl(); }, 500);

//动画逻辑代码 
//alert("播放动画，倒计时：" + (frames.length - index)); 
} else { 
if (this._palyEnd) { 
setTimeout(function() { _HtmlControl._ClearArea(); temp._palyEnd(); }, 100); 
} 
} 
index++; 
}

//播放结束事件 
this._palyEnd = endFn;

}; 
//---------------------------------------------------- 
//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); 
} 
} 
} 
//---------------------------------------------------- 
//8.页面控制： 
var _PageControl = {

//8.a:线程控制 
_ThreadControl: function() { 
var date = new Date(); 
_GameChoose._LControl(date); 
},

//8.b:键盘控制 
_KeyControl: function(event) { 
event = event || window.event; 
_GameChoose._KControl(event); 
return false; 
}, 
//8.cc.事件注册 
_StartRegedit: function() {

var temp = this;

//把this._ThreadControl添加到循环线程 
window.clearInterval(this._inteval); 
this._inteval = window.setInterval(temp._ThreadControl, 100);

//把this._KeyControl注册到document的键盘单击 
document.onkeydown = this._KeyControl;

_GameChoose._Start(); 
}, 
_interval: null

} 
//---------------------------------------------------- 
_PageControl._StartRegedit();

}

</script> 
<div>

</div> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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

加载全部内容