Native js implements typing animation games

Source: Internet
Author: User
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!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.