Native js implements typing animation games

This article mainly shares the sample code for native js to implement a typing animation game. It has good reference value. Let's take a look at it below. This is a typing animation game written with native js yesterday. It mainly uses the intermittent timer, object, and Math method. It feels okay, it mainly depends on the speed of eliminating letters, but there are also bugs, that is, the letters are generated at one time, so at the beginning, it seems like there is a sense of explosion, if a batch can be generated at a time, next, let's just drop them in batches. Please help me with the change. You can also refer to it for reference.

 
   Script window. onload = function () {var start = document. getElementById ("start"); var scroll = document. getElementById ("scroll"); var time = document. getElementById ("time"); var g = 1; // Gravity var timenum = 0; // time count var num = 0; // Score count var gameover = false; var timeandtime = null; var letters = null; // put the letter in a string and randomly select var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; // click the start button, and the letter is automatically generated, falling from the top at random speed // User operation: the button corresponds to a letter, and then the letter will disappear // the button that the user has not clicked will return to the top and drop again after it reaches the bottom; // After the user clears all the letters, the displayed dialog box displays the score and text. // Encapsulate an object that contains the method for obtaining the event object, page location, clearing bubbles, and obtaining the compatibility of event targets var eventUtil = {getEvent: function (event) {return event | window. event;}, getPageX: function (event) {return event. pageX | event. clientX + document.doc umentElement. scrollLeft;}, getPageY: function (event) {return event. pageY | event. clientY + document.doc umentElement. scrollTop;}, stopPropagation: function (event) {if (event. stopPropagation) {event. stopPropagation ();} else {event. cancelBubble = true ;}}, getTarget: function (event) {return event.tar get | event. srcElement ;}}; start. onclick = function () {for (var I = 0; I <26; I ++) {new letter ();} letters = document. body. children; // put all p on the page into a pseudo array. Except for the first p, it belongs to the game. Therefore, traverse from 1. // press the corresponding primary key on the keyboard, the letter disappears immediately, the score increases, and is regenerated on it; document. onkeydown = function (event) {var evt = eventUtil. getEvent (event); var keychar = String. fromCharCode (evt. keyCode); // convert the pressed letter and keyboard code into a direct uppercase letter for (var I = 1; I
 
  
= Client (). height-letDiv.offsetHeight) {that. y = 0; that. x = Math. random () * 900 + 100;} if (! Gameover) {letDiv. style. left = that. x + "px"; letDiv. style. top = that. y + "px";} else {clearInterval (that. timer) ;}}, 15)} // obtain the width and height of the visible window. compatibility problem: function client () {return {width: window. innerWidth | document.doc umentElement. clientWidth | document. body. clientWidth | 0, height: window. innerHeight | document.doc umentElement. clientHeight | document. body. clientHeight | 0 };}} script
  
 StartScore:0Timing:0
 

The above is all the content of this article. I hope this article will help you in your study or work, and I also hope to support PHP!

For more articles about native js Implementation of typing animation games, please follow the PHP Chinese network!