Home > Developer > JavaScript
I just started to learn extjs. I started to learn the basics of JavaScript on the first day, including Dom programming and the use of various JavaScript APIs. I made a comprehensive example-web typing games.
Effect:
Javascript web typing games
Requirements:
Steps:
Source code:
1、letter.html
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"> <HTML>2. letter. js
// Define the total number of letters generated by the variable record and the correct number of letters the total number of letters generated by the sumkeys, the number of correct rightnum var sumkeys = 0, rightnum = 0; // define a timer var gametimer = NULL; // Method for starting the game function startgame () {var score = document. getelementbyid ("score"); score. style. display = "NONE"; gametimer = Window. setinterval (createletter, 800);} // defines the array var keys = [], currentkeys = []; // The currentkeys Array records the corresponding Div layer for (VAR I = "". charcodeat (0); I <= "Z ". charcode At (0); I ++) {keys. push (string. fromcharcode (I);} // create a new letter element function createletter () {// normal method to create a new letter and add it to the body/** var letter1 = document. createelement ("Div"); letter1.innerhtml = "<font * size = '20'> <B> B </B> </font>"; letter1.style. top = "30px"; * letter1.style. width = "30px"; letter1.style. height = "30px"; * letter1.style. left = (screen. width * Math. random () + "PX"; * letter1.style. position = "Abso Lute "; * // you can use the element cloning method to create a new element (get the letter Div element template of the current page) var letter = document. getelementbyid ("letter"); // clone an element var letter1 = letter based on this template. clonenode (true); // process the full var keyindex = parseint (math. random () * 26); letter1.innerhtml = "<font size = '20'> <B>" + keys [keyindex] + "</B> </font> "; letter1.style. left = (screen. width * Math. random () + "PX"; document. body. appendchild (letter1); // move the Letter Element moveletter (letter 1); // set a keycode attribute letter1.keycode = keys [keyindex] for the current corresponding letter Div layer; // Add the current generated letter Div to the array currentkeys. push (letter1); sumkeys ++;} // function moveletter (letter) method for moving letters {// locate the difficulty selection box var level = document. getelementbyid ("level"); // obtain the falling value of the corresponding difficulty var spleed = parseint (level. options [level. selectedindex]. value); letter. style. display = ""; var timer = setinterval (movenext, 800); function movenext () {// get the original Top margin var Top = Parseint (letter. style. top); // determine whether the height is greater than the screen height if (top> (screen. availheight-250) {// clear the timer. If it is unclear, the system will continue to judge and cause a waste of resources. clearinterval (timer); // clear the letter if (letter. timerid) {letter. parentnode. removechild (letter);} var Ks = []; // For (VAR I = 0; I <currentkeys. length; I ++) {/** if the next generated letter Div layer does not exist in the letter Div layer group generated by the current record * Add it to another temporary variable array and record * finally add the temporary variable array is assigned to the current generated letter Div array */If (currentkeys [I]! = Letter) {Ks. push (currentkeys [I]) ;}} currentkeys = KS;} else {// new Top margin var newtop = Top + spleed + "PX "; // set the new top margin to the top attribute letter. style. top = newtop ;}} letter. timerid = timer;} // process the keyboard press event/** document. onkeypress = function (e) {alert (E. keycode) ;}; * // differentiate the different operations of Browser IE and Firefox if (document. attachevent) {// IE browser document. attachevent ("onkeydown", checkkeypress);} The Operation Document of the else {// Firefox browser. addeventlistener ("keydown", checkkeypress, false);} function checkkeypress (e) {e = E | event; // alert (E. keycode); var Ks = [], NKS = []; // KS is the correct letter number, and NKS is the incorrect letter number. // the array of letters produced by traversing, check whether there are the same ones. If yes, destroy for (VAR I = 0; I <currentkeys. length; I ++) {// If (string. fromcharcode (E. keycode) = currentkeys [I]. keycode) {rightnum ++; // store the correct letter layer in the KS array variable Ks. push (currentkeys [I]);} else {// No letters on the screen // store the letter layers with incorrect buttons in the NKS array variable NKS. push (currentkeys [I]) ;}// clear the correct letter Div layer for (VAR I = 0; I <Ks. length; I ++) {KS [I]. parentnode. removechild (KS [I]); // there may be a window where the parent and child points are null. clearinterval (KS [I]. timerid); Delete KS [I]. timerid;} // re-assign an incorrect array of letters to the current letter array currentkeys = NKS;} // end game function stopgame () {var letter = document. getelementbyid ("letter"); letter. style. display = "NONE"; letter. style. top = 30 + "PX"; if (gametimer) {window. clearinterval (gametimer);} // calculates the score var score = document when the game ends. getelementbyid ("score"); score. innerhtml = "Total number of letters displayed:" + sumkeys + "correct times:" + rightnum; sumkeys = 0; rightnum = 0; score. style. display = "";}
The main detailed Parsing is in the code, so I will not detail it again!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
