用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脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1664

CakePHP 教程

1423

Laravel 教程

1321

PHP教程

1269

C# 教程

1249

Related knowledge

建議：優秀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 17, 2023 pm 06:55 PM

股票分析必備工具：學習PHP和JS繪製蠟燭圖的步驟，需要具體程式碼範例隨著網路和科技的快速發展，股票交易已成為許多投資者的重要途徑之一。而股票分析是投資人決策的重要一環，其中蠟燭圖被廣泛應用於技術分析。學習如何使用PHP和JS繪製蠟燭圖將為投資者提供更多直觀的信息，幫助他們更好地做出決策。蠟燭圖是一種以蠟燭形狀來展示股票價格的技術圖表。它展示了股票價格的

如何使用JS和百度地圖實現地圖平移功能 Nov 21, 2023 am 10:00 AM

如何使用JS和百度地圖實現地圖平移功能百度地圖是一款廣泛使用的地圖服務平台，在Web開發中經常用於展示地理資訊、定位等功能。本文將介紹如何使用JS和百度地圖API實作地圖平移功能，並提供具體的程式碼範例。一、準備工作使用百度地圖API前，首先需要在百度地圖開放平台（http://lbsyun.baidu.com/）上申請一個開發者帳號，並建立一個應用程式。創建完成

如何使用JS和百度地圖實現地圖點擊事件處理功能 Nov 21, 2023 am 11:11 AM

如何使用JS和百度地圖實現地圖點擊事件處理功能概述：在網路開發中，經常需要使用地圖功能來展示地理位置和地理資訊。而地圖上的點擊事件處理是地圖功能中常用且重要的一環。本文將介紹如何使用JS和百度地圖API來實現地圖的點擊事件處理功能，並給出具體的程式碼範例。步驟：匯入百度地圖的API檔案首先，要在HTML檔案中匯入百度地圖API的文件，可以透過以下程式碼實現：

如何使用JS和百度地圖實現地圖熱力圖功能 Nov 21, 2023 am 09:33 AM

如何使用JS和百度地圖實現地圖熱力圖功能簡介：隨著互聯網和行動裝置的快速發展，地圖成為了普遍的應用場景。而熱力圖作為一種視覺化的展示方式，能夠幫助我們更直觀地了解數據的分佈。本文將介紹如何使用JS和百度地圖API來實現地圖熱力圖的功能，並提供具體的程式碼範例。準備工作：在開始之前，你需要準備以下事項：一個百度開發者帳號，並建立一個應用，取得到對應的AP

PHP與JS開發技巧：掌握繪製股票蠟燭圖的方法 Dec 18, 2023 pm 03:39 PM

隨著網路金融的快速發展，股票投資已經成為了越來越多人的選擇。而在股票交易中，蠟燭圖是常用的技術分析方法，它能夠顯示股票價格的變動趨勢，幫助投資人做出更精準的決策。本文將透過介紹PHP和JS的開發技巧，帶領讀者了解如何繪製股票蠟燭圖，並提供具體的程式碼範例。一、了解股票蠟燭圖在介紹如何繪製股票蠟燭圖之前，我們首先需要先了解什麼是蠟燭圖。蠟燭圖是由日本人

js和vue的關係 Mar 11, 2024 pm 05:21 PM

js和vue的關係：1、JS作為Web開發基石；2、Vue.js作為前端框架的崛起；3、JS與Vue的互補關係；4、JS與Vue的實踐應用。

See all articles

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

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題