JavaScript typing game implements code _javascript skills

The effect is as shown in the figure:

Here is the core code

Copy Code code as follows:

GAME = {
Randomly generating letters
Randletter:function () {
var arrletter = new Array ("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", " T "," U "," V "," W ",
"X",
"Y", "Z");
Randomly generating letters
var index = Math.floor (Math.random () * 26);
return Arrletter[index];
},
Random Letter Color
Randlettercolor:function () {
var arrlettercolor = new Array ("Red", "Green", "#555", "Blue", "Black");
var index = Math.floor (Math.random () * 4);
return Arrlettercolor[index];
},
Random Letter Size
Randlettersize:function () {
var arrlettersize = new Array ("12px", "16px", "20px", "24px", "28px", "32px", "36px", "40px");
var index = Math.floor (Math.random () * 7);
return Arrlettersize[index];
},
Create Div
Divcreate:function (width, height, left, top, value) {
This.width = width;
This.height = height;
This.div = document.createelement ("div");
This.div.style.width = width;
This.div.style.height = height;
This.div.style.left = left;
This.div.style.top = top;
This.div.innerText = value;
This.div.style.color = This.randlettercolor ();
This.div.style.fontSize = This.randlettersize ();
This.div.style.lineHeight = This.div.style.height;
this.div.style.textAlign = "center";
This.div.style.fontWeight = "bold";
This.div.style.border = "Solid red 1px";
This.div.style.position = "relative";
document.getElementById ("Map"). AppendChild (This.div);
return this.div;
},
Div whereabouts
Divdown:function () {
var divtop = parseint (This.div.style.top.slice (0,-2)); Top of the letter box
var mapheight = parseint (document.getElementById ("map"). Style.height.slice (0,-2));
Just disappear.
if (Divtop < Mapheight-parseint (this.height) + 20) {
This.div.style.top = Divtop + 30;
Gets the value of the key
Document.onkeydown = function () {
The key letter is not equal to the value of div
if (String.fromCharCode (event.keycode) = = GAME.div.innerText) {
document.getElementById ("Textrecord"). Value = "correct";
GAME.div.style.display = "None";
Clearinterval (Game.timecreateid);
Game.divcreate (Math.floor (Math.random ()), -30, Game.randletter ());
}
else {
document.getElementById ("Textrecord"). Value = "Error";
}
}
}
When you reach the bottom line, you disappear, and then you create div
else {
This.div.style.display = "None";
Game.divcreate (Math.floor (Math.random ()), -30, This.randletter ());
}
},
Timecreateid:null,
Timedownid:null,
Start:function () {
This.divcreate ( -40, This.randletter ());
This.timedownid = SetInterval ("Game.divdown ();", 1000);
document.getElementById (' Buttonstart '). Disabled = ' disabled ';
document.getElementById (' buttonstop '). Disabled = ';
},
Stop:function () {
if (This.timedownid!= null) {
Clearinterval (This.timedownid);
This.div.style.display = "None";
}
document.getElementById (' Buttonstart '). Disabled = ';
document.getElementById (' buttonstop '). Disabled = ' disabled ';
}

}

Effect Demo

<script type= "Text/javascript" > GAME = {//randomly generated letter randletter:function () {var arrletter = new Array ("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"); Randomly generated letter var index = Math.floor (Math.random () * 26); return Arrletter[index]; },//random Letter Color randlettercolor:function () {var arrlettercolor = new Array ("Red", "Green", "#555", "Blue", "Black"); var index = Math.floor (Math.random () * 4); return Arrlettercolor[index]; },//random Letter size randlettersize:function () {var arrlettersize = new Array ("12px", "16px", "20px", "24px", "28px", "32px", "36px", "40px"); var index = Math.floor (Math.random () * 7); return Arrlettersize[index]; },//Create div divcreate:function (width, height, left, top, value) {this.width = width; This.height = height; This.div = document.createelement ("div"); This.div.style.width = width; This.div.style.height = height; This.div.style.left = left; this.div.style.top = top; This.div.innerText = value; This.div.style.color = This.randlettercolor (); This.div.style.fontSize = This.randlettersize (); This.div.style.lineHeight = This.div.style.height; this.div.style.textAlign = "center"; This.div.style.fontWeight = "bold"; This.div.style.border = "Solid red 1px"; This.div.style.position = "relative"; document.getElementById ("Map"). AppendChild (This.div); return this.div; },//div whereabouts divdown:function () {var divtop = parseint (This.div.style.top.slice (0,-2));//Letter Box top var mapheight = PA Rseint (document.getElementById ("map"). Style.height.slice (0,-2)); Disappears if (Divtop < Mapheight-parseint (this.height) +) {this.div.style.top = divtop + 30; Gets the value of the key Document.onkeydown = function () {//key letter is equal to the value of div if (string.fromcharcode (event.keycode) = = GAME.div.inner Text) {document.getElementById ("Textrecord"). Value = "correct"; GAME.div.style.display = "None"; Clearinterval (Game.timecreateid); Game.divcreate (Math.floor,Math.random () (), -30, Game.randletter ()); else {document.getElementById ("Textrecord"). Value = "Error"; }}//reach the bottom line disappear, then create div else {This.div.style.display = "none"; Game.divcreate (Math.floor (Math.random ()), -30, This.randletter ()); }, Timecreateid:null, Timedownid:null, Start:function () {this.divcreate ( -40, This.randletter ()); This.timedownid = SetInterval ("Game.divdown ();", 1000); document.getElementById (' Buttonstart '). Disabled = ' disabled '; document.getElementById (' buttonstop '). Disabled = '; }, Stop:function () {if (This.timedownid!= null) {clearinterval (This.timedownid); This.div.style.display = "None"; } document.getElementById (' Buttonstart '). Disabled = '; document.getElementById (' buttonstop '). Disabled = ' disabled '; }} </script> Snmon positive title--| | | , the problem needs to be 100 times times more complex ... <p> temporarily only realized the random generation of letters, has been listening to the keyboard, has not calculated the score. </p> <div style= "Border-bottom:blue 1px solid; Border-left:blue 1px solid; width:400pX height:300px; Border-top:blue 1px solid; Border-right:blue 1px solid "id=" map "></div> <div id=" foot "> Score: <input id=" Textrecord "value=" 0 "type = "text"/> </div> <div><input id= "Buttonstart onclick=" GAME. Start (); "Value=" GAME Start "type=" button "><input id=" Buttonstop "onclick=" GAME. Stop (); "Value=" GAME Stop "type=" button "> <div></div>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]