Today, preview the results of tonight, as follows (a little bit, don't throw bricks):
Today, the main design of the next selector, is to enter the game to show the list of games, and then used to select the game of an idiot's function.
The selector was based on yesterday's game class, and I made some changes to yesterday's code:
Copy Code code as follows:
5. Game class: 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 = "<br/> current game not written, 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 struck" + 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 Game", NULL);
5.C.2: Customs Animation
This._anmnext = new Animation ("in Load", NULL);
5.C.3: End Animation
This._anmend = new Animation ("End", null);
5.d.1: Start: Call start animation, start processing method, load game
This._start = function () {
This._anmload = This._anmload | | New Animation (NULL);
var temp = this; Get 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 Over");
};
5.d.3: Loading: Every time the game starts (the checkpoint begins)
This._load = function () {
This._anmnext = This._anmnext | | New Animation (NULL);
var temp = this; Get current Object
This._anmnext._palyend = This._anmnext._palyend | | function () {
if (!LOADFN) {
Temp._frametitle = _htmlcontrol._newpanel (0, 0, 400, 30);
temp._frametitle.innerhtml = Temp._name | | "Untitled 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);
_htmlcontrol._addcontrol (Temp._framecontrol);
} else {
LOADFN ();
}
}
This._anmnext && This._anmnext._play ();
}
5.E Map
This._map = [];
Mapindex =-1;
};
That is to say selector it is also an object of the game class, has the load animation, also has the keyboard processing and so on:
Copy Code code as follows:
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);
{
_gamechoose._map = _gamelist;
_gamechoose._load = function () {
This._frametitle = _htmlcontrol._newpanel (0, 0, 400, 30);
this._frametitle.innerhtml = "Please choose Game";
This._framemain = _htmlcontrol._newpanel (0, 30, 240, 370);
This._framestate = _htmlcontrol._newpanel (240, 30, 160, 180);
this._framestate.innerhtml = "You can <br/> use the up and down key <br/> select Game";
This._framecontrol = _htmlcontrol._newpanel (240, 210, 160, 190);
this._framecontrol.innerhtml = "Press Enter<br/> to enter the game";
This._tempbuttons = [];
This._tempbuttonsindex = 0;
This._framemain.style. scroll bar//
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 ("Up 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 ("Next");
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);
}
}
}
So write content, due to the time relationship, the greedy snake still did not do, yesterday last slogan was said by the company, said I put the task of the company assigned to throw.
Today to change a slogan, in order to promote the first game of completion: Daytime permissions, Night greedy snake, I want to do the ultimate greedy snake, hehe ...
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml> <pead> <title> </title> </pead> <body> <style type=" Text/cs S "> button {} </style> <script type=" Text/javascript "language=" JavaScript ">/designer: Chen Ningwei//mail:cnwe I2010@163.com//Time: 2009.12.29//version: Second modification//ps: If you have questions can send an email or directly on the blog Park window.onload = function () {//------------------------ ----------------------------//1. Web Game area: var _gameframe = document.getElementById ("Gameframe"); ----------------------------------------------------//2. Keyboard parameter class: You can add the key value as needed in var _keyparameters = {keyenter:13, Keyspace:32, keyleft:37, keyup:38, keyright:39, keydown:40, keyesc:27}; ----------------------------------------------------//3. Label class: Used to control, generate HTML tags var _htmlcontrol = {//empty page game area _cleara Rea:function () {},//_addcontrol:function (c) {_gameframe.appendchild (c); },//ChuangBuild a div _newdiv:function () {var div = document.createelement ("div"); return div; ///Create a specified width-high button style label _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 () {//changed when selected This.style.backgroundColor = "Pink"; }; Div.unselect = function () {//When not selected 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 () {//changed when selected This.style.backgroundColor = "Pink"; }; Div.unselect = function () {//When not selected This.style.backgroundColor = "Gray"; }; return div; }//Continue ...}; ----------------------------------------------------//4. Animation class: Play animation, play End event var Animation = function (NAME,ENDFN) {var frames = ['. ', '. ', ' ... ']; var index = 0; var panel = undefined; Play Animation this._play = function () {panel = _htmlcontrol._newpanel (100, 150, 150, 50); Panel.style.paddingTop = "17px"; panel.innerhtml = ""; _htmlcontrol._addcontrol (panel); This._lcontrol (); }; This._lcontrol = function () {//Next animation call var temp = this;//Get current object if (Index < frames.length) {if (panel) {panel. InnerHTML = (!! Name?name: "") +frames[index]; settimeout (function () {Temp._lcontrol ();}, 500); Animation Logic Code//alert ("Play Animation, Countdown:" + (Frames.length-index)); else {if (this._palyend) {settimeout (function () {_htmlcontrol._cleararea (); Temp._palyend ();}, 100); }} index++; }//Play End Event this._palyend = ENDFN; }; //----------------------------------------------------//5. Game class: Name, logical method, keyboard method, Start method, start Checkpoint method, End method var Game = function (name, LOGICALFN, KEYFN, STARTFN, LOADFN, ENDFN) { Game Name This._name = name | | "Unnamed"; 5.a.1: Logical Control This._lcontrol = LOGICALFN | | function (date) {//Simple game Logic control if (this._framemain) {var innhtml = "Game time:" + date.getseconds () + "seconds" + Date.getmillisecon DS (); innhtml = "<br> current game not written, 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 struck" + 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 Game", NULL); 5.C.2: Customs Animation this._anmnext = new Animation ("in Load", NULL); 5.C.3: End Animation this._anmend = new Animation ("End", null); 5.d.1: Start: Call start animation, start processing method, load game This._start = function () {this._anmload = This._anmload | | New Animation (NULL); var teMP = this; Get 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 Over"); }; 5.d.3: Load: Every time the game starts (level start) This._load = function () {This._anmnext = This._anmnext | | New Animation (NULL); var temp = this; Get current Object this._anmnext._palyend = This._anmnext._palyend | | function () {if (!LOADFN) {temp._frametitle = _htmlcontrol._newpanel (0, 0, 400, 30); temp._frametitle.innerhtml = Temp._name | | "Untitled 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); _htmlcontrol._addcontrol (Temp._framecontrol); else {LOADFN (); }} This._anmneXT && This._anmnext._play (); }//5.e Map this._map = []; Mapindex =-1; }; ----------------------------------------------------//Create 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); {_gamechoose._map = _gamelist; _gamechoose._load = function () {this._frametitle = _htmlcontrol._newpanel (0, 0, 400, 30); this._frametitle.innerhtml = "Please choose Game"; This._framemain = _htmlcontrol._newpanel (0, 30, 240, 370); This._framestate = _htmlcontrol._newpanel (240, 30, 160, 180); this._framestate.innerhtml = "You can <br> use the up and down key <br> select Game"; This._framecontrol = _htmlcontrol._newpanel (240, 210, 160, 190); this._framecontrol.innerhtml = "Press Enter<br> to enter the game"; This._tempbuttons = []; This._tempbuttonsindex = 0; This._framemain.style. scroll bar//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 ("Up 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 ("next"); 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. Page control: var _pagecontrol = {//8.a: Thread control _threadcont Rol:function () {var date = new Date (); _gamechoose._lcontrol (date); //8.B: Keyboard control _keycontrol:function (event) {event = event | | window.event;_gamechoose._kcontrol (event); return false; },//8.cc. Event Registration _startregedit:function () {var temp = this; Add This._threadcontrol to the loop thread Window.clearinterval (this._inteval); This._inteval = Window.setinterval (Temp._threadcontrol, 100); Register the This._keycontrol to the document's keyboard click Document.onkeydown = This._keycontrol; _gamechoose._start (); }, _interval:null}//----------------------------------------------------_pagecontrol._startregedit (); } </script> <div id= "Gameframe" > </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The writing is obviously very frustrated, but in order to improve their various aspects of ability, or posted up, welcome to criticize.
