Use js to make a small game platform (1)_javascript skills

I remember when I was writing code at work, our technical director always said that we have to "design" first, so let's "design" first.
ps: I am a newbie, please forgive me.

. Web game area. That is to say, you need to know the area of ​​the game on the web page, as follows:
Insert a div into the web page, set the width, height and id,

Then get the object in js,
var _GameFrame = document.getElementById("GameFrame");


. Keyboard parameter object: in The game will often obtain the value of the keyboard and set an object corresponding to the key value:
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, and assist in generating corresponding style "controls":

Copy the code The code is as follows:

var _HtmlControl =
{
//Clear the web game area
_ClearArea: function() {
},
//Create a div
newDiv: function() {
var div = document.createElement("div");
return div;
},
/ /Create a button style label with 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() {
//Change when selected
};
div.unselect = function() {
//How it looks when not selected
};
return div;
}
//Continue...
};

.Animation class: used to play some game jump animations:

Copy code The code is as follows:

var Animation = function(endFn) {
//Play animation
this._play = function() {
　　 //I haven’t thought about how to put it.
};
//Play end event
this._palyEnd = endFn || function() {
alert("Animation playback ends");
};
};

. Game type: There must be a game name,
a. Control: 1. Logic 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. Clearance animation, 3. Clearance animation
d: Event: 1. Start, 2. End.
　The code is roughly as follows:
Code

Copy code The code is 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);
//Pass animation
this._AnmNext = new Animation(null);
//Pass animation
this._AnmEnd = new Animation(null);
};

. Game list: It is a list of game class objects.

. Game selector: can be a game class object.
var _GameChoose = new Game("selector", null, null);
. Page control: used to register page events, accept user responses, and pass to the game selector;
Code

Copy code The code is as follows:

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
//Add this. _KeyControl is registered to the document's keyboard click
}
}

Finally, at this step, it seems that the "design" is complete? Regardless of whether this is a design or not, let’s just say it is a design designed while typing code. But it seems to be possible. Of course it doesn't work now. Let’s post the overall code first and take a look:
Overall code

Copy the code The code is as follows:

Let’s do this for now, let it run tomorrow, and design the first game: Snake.
Use a sentence from a colleague to shout the slogan: Don’t do permission design, be the best greedy snake in the country, sweat it...