Using JS as a mini-game platform (1)

Remember to write at work Code Our technical director said that we should first "design", so we should first "design.
PS: I'm a newbie. Sorry.

. Web Game area. That is to say, you need to know the area of the game on the webpage, as shown below:
Insert a DIV in the webpage and set the width and height and ID,
<Div id = "gameframe" style = "width: 400; Height: 400"> </div>
Then get the object in JS,
VaR _ gameframe = Document. getelementbyid ("gameframe ");

. Keyboard parameter object: The keyboard value is often obtained in the game and an object corresponding to the key value is set:
VaR _ keyparameters = {keyenter: 13, keyspace: 32, keyleft: 37, keyup: 38, keyright: 39, keydown: 40, keyesc: 27 };

. Tag control object: used to control and generate HTML tags to generate "controls" for corresponding styles ":Copy codeThe Code is as follows: VaR _ htmlcontrol =
{
// Clear the webpage game Area
_ Cleararea: function (){
},
// Create a div
Newdiv: function (){
VaR DIV = Document. createelement ("Div ");
Return div;
},
// Create a button style label with the specified width and height
Newbutton: function (W, h ){
VaR DIV = This. newdiv ();
Div. style. width = W + "PX ";
Div. style. Height = H + "PX ";
Div. Select = function (){
// Changes when selected
};
Div. unselect = function (){
// When no selection is made
};
Return div;
}
// Continue...
};

. Animation: Used to play game jump animations:Copy codeThe Code is as follows: var animation = function (endfn ){
// Play the animation
This. _ play = function (){
// You have not thought about the specifics.
};
// Playback End event
This. _ palyend = endfn | function (){
Alert ("animation playback ends ");
};
};

. Games: You must have a game name,
A. Control: 1. Logical Control, 2. keyboard control
B. Main Interface: 1. Title, 2. Game area, 3. Status display area, 4. Control Area
C. Animation: 1. Opening animation, 2. Pass animation, 3. Pass Animation
D: Event: 1. Start, 2. End.
The code is roughly as follows:
CodeCopy codeThe Code is as follows: var game = function (name, logicalfn, keyfn ){
// Game name
This. _ name = Name | "not named ";
This. _ lcontrol = logicalfn | function (){
// Simple game logic control
};
This. _ kcontrol = keyfn | function (event ){
// Simple keyboard Logic
};
// Opening Animation
This. _ anmload = new animation (null );
// Pass Animation
This. _ anmnext = new animation (null );
// Customs clearance Animation
This. _ anmend = new animation (null );
};

. Game list: A list of Game objects.

. Game selector: it can be a game object.
VaR _ gamechoose = new game ("selector", null, null);
. page Control: Used to register page events, receive user responses, and pass them to the game selector.
Code copy Code the code is as follows: VaR _ pagecontrol ={< br> // 8.a: thread control
_ threadcontrol: function () {
_ gamechoose. _ lcontrol ();
},
// 8. B: keyboard control
_ keycontrol: function (event) {
_ gamechoose. _ kcontrol (event);
},
// 8. cc. event registration
_ startregedit: function () {
// set this. _ threadcontrol added to the loop thread
// Add this. _ keycontrol: Click
}< BR >}

Finally, it seems that the "design" is over? For the time being, whether it is a design or not, let's say it is a design that is designed by tapping on the code. However, it seems to be feasible. Of course, it cannot run now. Let's first paste the overall code to see it:
Overall codeCopy codeThe Code is as follows: <SCRIPT type = "text/JavaScript" Language = "JavaScript">
/***
* 1. webpage game region:
* 2. keyboard Parameters
* 3. Tag class: used to control and generate HTML tags
* 4. Animation: Playing an animation or playing an end event
* 5. Games: Game name
* A. Control: 1. Logical control; 2. keyboard control
* B. Main Interface: 1. Title, 2. Game area, 3. Status display area, 4. Control Area
* C. Animation: 1. Opening animation, 2. Pass animation, 3. Pass Animation
* D: Event: 1. Start, 2. End
* 6. Game list
* 7. Game Selector
* 8. Page Control: A. thread control, B. keyboard control, and C. event registration
***/

Window. onload = function (){
//----------------------------------------------------
// 1. webpage game region:
VaR _ gameframe = Document. getelementbyid ("gameframe ");
//----------------------------------------------------
// 2. keyboard parameter class: You can add the key value as needed
VaR _ keyparameters = {keyenter: 13, keyspace: 32, keyleft: 37, keyup: 38, keyright: 39, keydown: 40, keyesc: 27 };
//----------------------------------------------------
// 3. Tag class: used to control and generate HTML tags
VaR _ htmlcontrol =
{
// Clear the webpage game Area
_ Cleararea: function (){
},
// Create a div
Newdiv: function (){
VaR DIV = Document. createelement ("Div ");
Return div;
},
// Create a button style label with the specified width and height
Newbutton: function (W, h ){
VaR DIV = This. newdiv ();
Div. style. width = W + "PX ";
Div. style. Height = H + "PX ";
Div. Select = function (){
// Changes when selected
};
Div. unselect = function (){
// When no selection is made
};
Return div;
}
// Continue...
};
//----------------------------------------------------
// 4. Animation: Playing an animation or playing an end event
VaR animation = function (endfn ){
// Play the animation
This. _ play = function (){
};
// Playback End event
This. _ palyend = endfn | function (){
Alert ("animation playback ends ");
};
};
//----------------------------------------------------
// 5. Games:
VaR game = function (name, logicalfn, keyfn, startfn, endfn ){
// Game name
This. _ name = Name | "not named ";
// 5. A.1: Logical Control
This. _ lcontrol = logicalfn | function (){
// Simple game logic control
};
// 5.a.2: keyboard control
This. _ kcontrol = keyfn | function (event ){
// Simple keyboard Logic
};
// 5. B .1: Title Area
This. _ frametitle;
// 5. B .2: Game Region
This. _ framemain;
// 5. B .3: Status display area
This. _ framestate;
// 5. B .4: Control Area
This. _ framecontrol;
// 5. C.1: Opening Animation
This. _ anmload = new animation (null );
// 5. C.2: Pass Animation
This. _ anmnext = new animation (null );
// 5. C.3: Customs clearance Animation
This. _ anmend = new animation (null );
// 5. D.1: Start
This. _ start = startfn | function (){
Alert ("Game start ");
};
// 5. D.2: End
This. _ end = endfn | function (){
Alert ("game ended ");
};
};
//----------------------------------------------------
// Create a game
VaR game1 = new game ("snake", null, null );
VaR game2 = new game ("Tetris", null, null );
VaR game3 = new game ("Push box", null, null );
VaR game4 = new game ("racing car", null, null );
VaR game5 = new game ("tank wars", null, null );
//----------------------------------------------------
// 6. Game list
VaR _ gamelist = [game1, game2, game3, game4, game5];
//----------------------------------------------------
// 7. Game Selector
VaR _ gamechoose = new game ("selector", null, null );
//----------------------------------------------------
// 8. Page Control:
VaR _ pagecontrol = {
// 8.a: thread control
_ Threadcontrol: function (){
_ Gamechoose. _ lcontrol ();
},
// 8. B: keyboard control
_ Keycontrol: function (event ){
_ Gamechoose. _ kcontrol (event );
},
// 8. CC. event registration
_ Startregedit: function (){
// Add this. _ threadcontrol to the loop thread
// Register this. _ keycontrol to the document's keyboard and click
}
}
//----------------------------------------------------
}
</SCRIPT>
<Div id = "gameframe" style = "width: 400; Height: 400">
</Div>

Let's do it first. Let's run it again tomorrow. By the way, design the first game: Snake.
Shouting with a colleague's words: Do not design permissions, be the best snake in the country, sweat...