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

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:37 PM

今天先预览一下今晚的成果，如下（挫了点，别扔砖头）：
用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 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[i].unselect(); 
} 
this._tempButtons[this._tempButtonsIndex].select(); 
} 
} 
break; 
case _KeyParameters.KeyDown: 
{ 
//alert("下"); 
if (this._tempButtonsIndex this._tempButtonsIndex++; 
for (var i = 0; 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); 
} 
} 
} 

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

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

<title>

</title>

} 
</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 id="GameFrame" style="width:400;height:400; ">

</div>

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

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

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

免费脱衣服图片

Clothoff.io

AI脱衣机

AI Hentai Generator

免费生成ai无尽的。

显示更多

热工具

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里

7412

CakePHP 教程

1359

steam的账户名称是什么格式

win11激活密钥永久

显示更多

Related knowledge

如何使用JS和百度地图实现地图平移功能 Nov 21, 2023 am 10:00 AM

如何使用JS和百度地图实现地图平移功能百度地图是一款广泛使用的地图服务平台，在Web开发中经常用于展示地理信息、定位等功能。本文将介绍如何使用JS和百度地图API实现地图平移功能，并提供具体的代码示例。一、准备工作使用百度地图API前，首先需要在百度地图开放平台（http://lbsyun.baidu.com/）上申请一个开发者账号，并创建一个应用。创建完成

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤 Dec 17, 2023 pm 06:55 PM

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

如何使用PHP和JS创建股票蜡烛图 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3

PHP与JS开发技巧：掌握绘制股票蜡烛图的方法 Dec 18, 2023 pm 03:39 PM

随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

如何使用JS和百度地图实现地图热力图功能 Nov 21, 2023 am 09:33 AM

如何使用JS和百度地图实现地图热力图功能简介：随着互联网和移动设备的迅速发展，地图成为了一种普遍的应用场景。而热力图作为一种可视化的展示方式，能够帮助我们更直观地了解数据的分布情况。本文将介绍如何使用JS和百度地图API来实现地图热力图的功能，并提供具体的代码示例。准备工作：在开始之前，你需要准备以下事项：一个百度开发者账号，并创建一个应用，获取到相应的AP

如何使用JS和百度地图实现地图点击事件处理功能 Nov 21, 2023 am 11:11 AM

如何使用JS和百度地图实现地图点击事件处理功能概述：在Web开发中，经常需要使用地图功能来展示地理位置和地理信息。而地图上的点击事件处理是地图功能中常用且重要的一部分。本文将介绍如何使用JS和百度地图API来实现地图的点击事件处理功能，并给出具体的代码示例。步骤：导入百度地图的API文件首先，要在HTML文件中导入百度地图API的文件，可以通过以下代码实现：

如何使用JS和百度地图实现地图多边形绘制功能 Nov 21, 2023 am 10:53 AM

如何使用JS和百度地图实现地图多边形绘制功能在现代网页开发中，地图应用已经成为常见的功能之一。而地图上绘制多边形，可以帮助我们将特定区域进行标记，方便用户进行查看和分析。本文将介绍如何使用JS和百度地图API实现地图多边形绘制功能，并提供具体的代码示例。首先，我们需要引入百度地图API。可以利用以下代码在HTML文件中导入百度地图API的JavaScript

See all articles

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题