JavaScript typing mini-game code

Function module: Program Design:
1. You can select the game time to display the countdown. 1. Define global variables.
2. The number of English letters can be selected. 2. Control the game time function.
3. Statistical score 3. animation effect
4. Menu Options 4. Set the time when the letter image appears
5. Judgment Functions
6. game menu
7. Game time options
8. Display game time
9. game difficulty options
10. Game score
　　
First: (PS: the artist is a hard injury)

Main code design:
Copy codeThe Code is as follows:
// ------- Global variable -------
Var data = {
"10": ["<img src = 'images/A.gif '/>"], "11": ["<img src = 'images/B .gi'/>"], "12": ["<img src = 'images/C.gif '/>"], "13": ["<img src = 'images/D.gif'/>"],
"14": ["<img src = 'images/E.gif '/>"], "15": ["<img src = 'images/f.gi'/>"], "16": ["<img src = 'images/G.gif '/>"], "17": ["<img src = 'images/H.gif'/>"],
"18": ["<img src = 'images/I .gif '/>"], "19": ["<img src = 'images/J.gif'/>"], "20": ["<img src = 'images/K.gif '/>"], "21": ["<img src = 'images/l.gi'/>"],
"22": ["<img src = 'images/M.gif '/>"], "23": ["<img src = 'images/N.gif'/>"], "24": ["<img src = 'images/O.gif '/>"], "25": ["<img src = 'images/P.gif'/>"],
"26": ["<img src = 'images/Q.gif '/>"], "27": ["<img src = 'images/R.gif'/>"], "28": ["<img src = 'images/s.gif'/>"], "29": ["<img src = 'images/t.gif'/>"],
"30": ["<img src = 'images/U.gif '/>"], "31": ["<img src = 'images/V.gif'/>"], "32": ["<img src = 'images/animated GIF '/>"], "33": ["<img src = 'images/X.gif'/>"],
"34": ["};
Var datas = new Array (); // the random class style is stored as an even number in the Array, and the image is stored as an odd number in the Array
Var now = new Date ();
Var Image; // The Image is randomly displayed.
Var Divs; // random appearance Layer
Var count = 0; // Credit System
Var key; // The value of the keyboard.
Var amounts = 1; // Number of letter images displayed
Var gametime = 30; // control the game time
Var gametimes; // The time is 0.
Var gametimess = 30; // display the clock variable
Var time1; // setInterval variable
Var time2 = 5000; // set the setInterval time
Var time3;
Var tab; // used to record and pass the value of the tabindex focus position
// -------- To be compatible with the FF browser -------
Var plug = {
AddEvent: function (o, e, f ){
If (o. addEventListener ){
O. addEventListener (e, f, false );
}
Else if (o. attachEvent ){
O. attachEvent ("on" + e, f );
}
}
}
Plug. addEvent (window, "load", function () {Focus ()}); // compatible with FF browsers
// ------ 1. Control the game time function --------
Function Gametime (){
For (gametimes = gametime; gametimes> = 0; gametimes --){
Window. setTimeout ('show ('+ gametimes +') ', (gametime-gametimes + 2) * 1000 );
}
}
Function Show (gametimes ){
If (gametimes = 0 ){
ClearInterval (time1); // stop the game
Alert ("the game is over! Your score is: "+ count );
$ ("# Main"). empty (); // clear the div in main
$ (". Gameapply"). empty ();
$ ("# Select1"). empty ();
$ ("# Select2"). empty ();
Count = 0; // The score is cleared to 0.
Score (); // display the Score box as 0
Focus (); // regenerate menu options
}
}
// --------- 2. animation effect ---------
Function fun (){
Datas. length = 0;
For (var I = 0; I <amounts; I ++ ){
Image = parseInt (Math. random () * 26) + 10; // random letter Image
Datas. push (Image); // The Image is stored as an even number in the array, starting from scratch.
Divs = parseInt (Math. random () * 8) + 1; // class style of the random appearance layer, that is, the different positions of the layer
Datas. push (Divs); // The style is stored as an odd number in an array.
Var time = parseInt (Math. random () * 2000) + 3000; // The animation completion time.
If (time <5000 ){
Var $ divs = $ ("<div class = 'divpop" + Divs + "'>" + data [Image] + "</div> ");
$ ("# Main"). append ($ divs );
// ----- JQ animation function ----
$ (". DivPop" + Divs). animate (
{"Top": $ (window ). height ()-$ (". divPop "+ Divs ). height ()-$ (". divPop "+ Divs ). position (). top}, time, function () {$ ("# main "). empty ()})
}
}
}
// -------- 3. Set the time when the letter image appears ------
Function sets (){
Time1 = setInterval (fun, time2 );
}
// --------- 4. Bind the keyboard ---------
// --------- Compatible with FF browser ---------
Document. onkeydown = function keydown (e ){
E = e | window. event;
Var key = e. charCode | e. keyCode
Select (key)
}
// --------- 5. Judgment function ---------
Function select (key ){
If (key = 13 ){
Switch (tab ){
Case 0: Gametime (); Gametimeselect (); time3 = setInterval (countdown, 1000); sets (); $ ("# select "). hide (2000); break; // starts the game
Case 1: Gametime (); Gametimeselect (); time3 = setInterval (countdown, 1000); sets (); $ ("# select "). hide (2000); break; // starts the game
Case 2: alert ("game options can be set on the left"); break;
Case 3: window. opener = null; window. open ('', '_ self'); window. close (); break; // exit the game
Case 4: window. opener = null; window. open ('', '_ self'); window. close (); break; // exit the game
}
}
For (var j = 0; j <datas. length; j = j + 2) {// to keep the style and image values in data1 unique (that is, the odd and even numbers cannot be repeated, values of m or k must be different)
If (key = datas [j] + 55 ){
$ (". DivPop" + datas [j + 1]). hide (); // the key value is equal and this layer is hidden
Delete datas [j]; // to avoid repeated letters, delete this value for every traversal (key = datas [j] + 55) in the array.
Count + = 10;
Score ();
Break;
}
}
}
// --------- 6. game menu -------
Function Focus (){
// --------- Initialize the game interface --------
Var $ selects = $ ("<div id = 'select'> <table id = \" tables \ "> <tr> <td> <input class = \" inputs \" type = \ "text \" value = \ "Game start \"/> </td> </tr> <td> <input class = \ "inputs \" type = \ "text \" value = \ "game options \"/> </td> </tr> <td> <input class = \ "inputs \" type = \ "text \" value = \ "Quit GAME \"/> </td> </tr> </table> </div> ");
$ (". Gameapply"). append ($ selects );
For (var I = 30; I <= 300; I = I + 30 ){
$ ("# Select1"). append ('<option>' + I + '</option> ')
}
For (var j = 1; j <= 9; j ++ ){
$ ("# Select2"). append ('<option>' + j + '</option> ')
}
// --------- Obtain the focus of the first input at the beginning --------
$ (". Inputs: first"). trigger ("focus"). addClass ("input1 ");
Tab = 1; // because the first focus cannot Enter, you need to call the keyboard input event
Var tabIndex = 1;
// ---------- Get the number of tr rows and the number of inputs --------
$ ("# Tables"). find ("tr"). each (function (r ){
$ (This ). find ("input "). attr ("tabindex", r + 1); // The value of tabindex is the focus position. The initial value is 1 and the traversal is 1-2-3-4.
});
// --------- Keyboard up/down in response to input
$ ("# Tables. inputs"). bind ("keydown", function (e ){
TabIndex = parseInt ($ (this). attr ("tabindex"); // gets the current tabindex focus value
Switch (e. which ){
Case 38: // up
TabIndex-= 1;
Tab = tabIndex;
Break;
Case 40: // downward
TabIndex + = 1;
Tab = tabIndex;
Break;
Default:
Return;
}
// -------- Determine the value of tabIndex focus
If (tabIndex> 0 & tabIndex <4 ){
$ (". Inputs [tabindex =" + tabIndex + "]"). focus (). addClass ("input1"); // obtain the focus of the current input
For (var I = 0; I <= 4; I ++)
{
If (I = tabIndex ){
Break;
}
Else {
$ (This). removeClass ("input1 ");
}
}
Keydown ();
Return false;
}
Return true;
});
}
// -------- 7. Game time options ---------
Function Gametimeselect (){
Var option = document. getElementById ("select1 ");
For (var I = 0; I <option. length; ++ I ){
If (option [I]. selected ){
Gametime = option. options [I]. text;
Gametimess = gametime;
}
}
}
// ----- 8. display the game time -------
Function countdown (){
Var timeshows = document. getElementById ("timeshow ");
If (timeshows) {// if the webpage speed is slow, the control may not be loaded when the timer is running.
If (gametimess <0 ){
ClearInterval (time3); // stop the timer
}
Else {
Timeshows. value = gametimess;
Gametimess --;
}
}
}
// -------- 9. game difficulty options ---------
Function Gameselectamount (){
Var option = document. getElementById ("select2 ");
For (var I = 0; I <option. length; ++ I ){
If (option [I]. selected ){
Amounts = option. options [I]. text;
}
}
}
// --------- 10. Game score -----------
Function Score (){
Var sum = document. getElementById ("sum ");
Sum. value = count;
If (count = 0) {// The initialization text box score is 0.
Sum. value = count;
}
}

Conclusion: The code is not optimized due to a long interval, and the occurrence interval of letters is too long. If you are interested, try to fix the issue. The code is for reference only.
Online Demo: http://demo.jb51.net/js/2011/StarWars/
Package download: http://www.jb51.net/jiaoben/40902.html