JavaScript typing mini-game code

I learned JavaScript by myself in the first half of the year, and then I made a typing game to play with the 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:

// ------- Global variable ------- var data = {"10": [""], "11": [""], "12": [""], "13": [""], "14": [""], "15": [""], "16": [""], "17 ": [""], "18": [""], "19": [""], "20": [""], "21 ": [""], "22": [""], "23": [""], "24": [""], "25 ": [""], "26": [""], "27": [""], "28": [""], "29 ": [""], "30": [""], "31": [""], "32": [""], "33 ": [""], "34": [""], "35": [""]}; 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 random var Divs; // random layer var count = 0; // point system var key; // The value of the keyboard var amounts = 1; // The number of letter pictures 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, pass the tabindex focus position value // -------- to be compatible with 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 browser // ------ 1. control 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 p $ (". gameapply "). empty (); $ ("# select1 "). empty (); $ ("# select2 "). empty (); count = 0; // empty the Score 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 "+ data [Image] +"
"); $ (" # Main "). append ($ ps); // ----- JQ animation function ---- $ (". pPop "+ Divs ). animate ({"top": $ (window ). height ()-$ (". pPop "+ Divs ). height ()-$ (". pPop "+ 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 the 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; // start game case 1: Gametime (); Gametimeselect (); time3 = setInterval (countdown, 1000); sets (); $ ("# select "). hide (2000); break; // start 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
 
  
 
  
"); $ (". Gameapply "). append ($ selects); for (var I = 30; I <= 300; I = I + 30) {$ ("# select1 "). append ('
  '+ I +'')} For (var j = 1; j <= 9; j ++) {$ ("# select2"). append ('
  '+ J +'')} // --------- Get the focus of the first input at the beginning -------- $ (". inputs: first "). trigger ("focus "). addClass ("input1"); tab = 1; // because the first focus cannot Enter, you must call the keyboard input event var tabIndex = 1; // ---------- to obtain the number of tr rows, input count -------- $ ("# 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 upper and lower operations 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: // down tabIndex + = 1; tab = tabIndex; break; default: return;} // -------- determine the value of tabIndex focus if (tabIndex> 0 & tabIndex <4) {$ (". inputs [tabindex = "+ tabIndex +"] "). focus (). addClass ("input1"); // The current input obtains the focus for (var I = 0; I <= 4; I ++) {if (I = tabIndex) {break;} else {$ (this ). removeClass ("input1") ;}} keydown (); return false ;}return true ;}// -------- 7. game time option --------- function Gametimeselect () {var option = document. getElementById ("select1"); for (var I = 0; I
  
   
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.
   
For more articles on JavaScript typing mini-game code, please follow the PHP Chinese network!