Use javascript to make a small game platform (2) Game selector_javascript skills

Today I will preview tonight’s results, as follows (if you are frustrated, don’t throw bricks):

Today I mainly designed a selector, which is to display the game list when entering the game, and then use it to select the game An idiot's function.

The selector is based on yesterday's game class. I made some modifications to yesterday's code:

Copy code The code is as follows:

//5. Game category: name, logical method, keyboard method, start method, start level method, end method
var Game = function(name, logicalFn , keyFn, startFn, loadFn, endFn) {
//Game name
this._name = name || "Unnamed";
//5.a.1: Logic control
this. _LControl = logicalFn || function(date) {
//Simple game logic control
if (this._FrameMain) {
var innHTML = "Game time:" date.getSeconds() "Seconds" date. getMilliseconds();
innHTML = "
The current game is not writing, you can press Esc to exit the game;";
this._FrameMain.innerHTML = innHTML;
}
} ;
//5.a.2: Keyboard control
this._KControl = keyFn || function(event) {
//Simple keyboard logic
alert("You tapped" event. keyCode "key");
};
//5.b.1:Title area
this._FrameTitle = null;
//5.b.2:Game area
this ._FrameMain = null;
//5.b.3: Status display area
this._FrameState = null;
//5.b.4: Control area
this._FrameControl = null;
//5.c.1: Opening animation
this._AnmLoad = new Animation("Enter the game",null);
//5.c.2: Pass animation
this._AnmNext = new Animation("Loading",null);
//5.c.3: End animation
this._AnmEnd = new Animation("End",null);
//5.d .1: Start: Call the start animation, start processing method, load the game
this._Start = function() {
this._AnmLoad = this._AnmLoad || new Animation(null);
var temp = this; //Get the current object
this._AnmLoad._palyEnd = this._AnmLoad._palyEnd || function() {
startFn && startFn();
temp._Load();
};
this._AnmLoad._play();
};
//5.d.2: End
this._End = endFn || function() {
alert("Game is over ");
};
//5.d.3: Loading: every time you start the game (level starts)
this._Load = function() {
this._AnmNext = this. _AnmNext || new Animation(null);
var temp = this; //Get the current object
this._AnmNext._palyEnd = this._AnmNext._palyEnd || function() {
if (!loadFn) {
temp._FrameTitle = _HtmlControl._newPanel(0, 0, 400, 30);
temp._FrameTitle.innerHTML = temp._name || "Unnamed game";
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); ._AddControl(temp._FrameControl);
} else {
loadFn();
}
}
this._AnmNext && this._AnmNext._play();
}
//5.e Map
this._Map = [];
mapIndex = -1;
};

That is to say, the selector is also an object of the game class , there are loading animations, and keyboard processing, etc.:

Copy code The code is as follows:

//Create a game
var game1 = new Game("Snake", null, null);
var game2 = new Game("Tetris", null, null);
var game3 = new Game("Pushbox", null, null);
var game4 = new Game("Racing", null, null);
var game5 = new Game("Tank Battle", null, null);
//------------------------------------------------ ------------
//6. Game list
var _GameList = [game1, game2, game3, game4, game5];
//------ -----------------------------------------------
/ /7. Game selector
var _GameChoose = new Game("selector", null, null);
{
_GameChoose._Map = _GameList;
_GameChoose._Load = function() {
this._FrameTitle = _HtmlControl._newPanel(0, 0, 400, 30);
this._FrameTitle.innerHTML = "Please select a game";
this._FrameMain = _HtmlControl._newPanel(0, 30, 240 , 370);
this._FrameState = _HtmlControl._newPanel(240, 30, 160, 180);
this._FrameState.innerHTML = "You can
use the up and down keys
this._FrameControl = _HtmlControl._newPanel(240, 210, 160, 190);
this._FrameControl.innerHTML = "Press Enter
to enter the game";
this._tempButtons = [];
this._tempButtonsIndex = 0;
//this._FrameMain.style.scrollbar//
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("upper 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);
}
}
}

Just write the content like this. Due to time constraints, Snake still hasn’t done it. Yesterday, the last slogan was said by someone from the company, saying that I have assigned tasks to the company. Throw it away.

Today I want to change a slogan to facilitate the completion of the first game: authority during the day, greedy snake at night, I want to be greedy to the extreme, hehe...

<title> </title> <style type="text/css"> .button { } </style> <div id="GameFrame" style="width:400;height:400; "> </div>
[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh it to execute

]
The writing is obviously very frustrating. But in order to improve my abilities in various aspects, I still posted it. Your criticism is welcome.