Use JS to do a small game platform (i) _javascript skills

Remember to go to work to write code, our Technical director is always said to first "design", then "design" it.
PS: I am a novice everyone a lot of forgive me.

. Web Game area. That means you need to know the area of the game on the page, as follows:
Insert a div in the Web page, set the width and ID,
<div id= "Gameframe" style= "width:400;height:400" ></div>
And then we get the object in JS,
var _gameframe = document.getElementById ("Gameframe");


. Keyboard Parameter object: In the game will often get the value of the keyboard, set a key value corresponding to the object:
var _keyparameters = {keyenter:13, keyspace:32, keyleft:37, keyup:38, keyright:39, keydown:40, keyesc:27};


. Label control objects: controls, generates HTML tags, and assists in generating the corresponding style of control:

Copy Code code as follows:

var _htmlcontrol =
{
Empty the web game area
_cleararea:function () {
},
Create a Div
Newdiv:function () {
var div = document.createelement ("div");
return div;
},
Create a button style label that specifies a wide 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 it's not selected.
};
return div;
}
Go on...
};

. Animation class: Used to play some game jump animation:

Copy Code code as follows:

var Animation = function (ENDFN) {
Play animation
This._play = function () {
How to put it in detail.
};
Play End Event
This._palyend = ENDFN | | function () {
Alert ("End of animation playback");
};
};

. Game class: To 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. Customs animation
D: Events: 1. Start, 2. End.
The code is roughly as follows:
Code

Copy Code code as follows:

var Game = function (name, LOGICALFN, KEYFN) {
Game Name
This._name = Name | | "Unnamed";
This._lcontrol = LOGICALFN | | function () {
Simple Game Logic Control
};
This._kcontrol = KEYFN | | function (event) {
Simple keyboard logic
};
Opening animation
This._anmload = new Animation (null);
Customs animation
This._anmnext = new Animation (null);
Customs animation
This._anmend = new Animation (null);
};

. Game list: is the Game class object list.

. Game selector: Can be a game class object.
var _gamechoose = new Game ("selector", NULL, NULL);
. Page control: For registering page events, accepting user responses and passing them to the game selector;
Code

Copy Code code as follows:

var _pagecontrol = {
8.A: Line Program control system
_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 click
}
}

Finally, to this step, looks like the "design" finished? Regardless of whether this is a design, let's say it is a side-knocking code design design bar. But it seems to be really feasible. Of course it's not going to work now. Let's just post the total code and look at it:
Overall code

Copy Code code as follows:

<script type= "Text/javascript" language= "JavaScript" >
/***
* 1. Web Game Area:
* 2. Keyboard parameter class
* 3. Label class: For controlling, producing HTML tags
* 4. Animation class: Play animation, play End Event
* 5. Game Category: 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. Customs animation
* d: Events: 1. Start, 2. End
* 6. Game List
* 7. Game Selector
* 8. Page control: A. Line program control system, B. keyboard controls, C. Event Registration
***/

Window.onload = function () {
//----------------------------------------------------
1. Web Game Area:
var _gameframe = document.getElementById ("Gameframe");
//----------------------------------------------------
2. Keyboard parameter class: Can add the key value according to need
var _keyparameters = {keyenter:13, keyspace:32, keyleft:37, keyup:38, keyright:39, keydown:40, keyesc:27};
//----------------------------------------------------
3. Label class: For controlling, producing HTML tags
var _htmlcontrol =
{
Empty the web game area
_cleararea:function () {
},
Create a Div
Newdiv:function () {
var div = document.createelement ("div");
return div;
},
Create a button style label that specifies a wide 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 it's not selected.
};
return div;
}
Go on...
};
//----------------------------------------------------
4. Animation class: Play animation, play End Event
var Animation = function (ENDFN) {
Play animation
This._play = function () {
};
Play End Event
This._palyend = ENDFN | | function () {
Alert ("End of animation playback");
};
};
//----------------------------------------------------
5. Game Category:
var Game = function (name, LOGICALFN, KEYFN, STARTFN, ENDFN) {
Game Name
This._name = Name | | "Unnamed";
5.a.1: Logic 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 Area
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: Customs Animation
This._anmnext = new Animation (null);
5.C.3: Customs 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 Over");
};
};
//----------------------------------------------------
Create a game
var game1 = new Game ("Greedy snake", null, NULL);
var game2 = new Game ("Tetris", NULL, NULL);
var game3 = new Game ("Push box", NULL, NULL);
var game4 = new Game ("Racing", 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: Line Program control system
_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 click
}
}
//----------------------------------------------------
}
</script>
<div id= "Gameframe" style= "width:400;height:400" >
</div>

Let's go ahead and make it run again tomorrow and design the first game: greedy snake.
With a colleague of a word shout slogans: Do not do permission design, do the best greedy snake, Khan a ...