This is a typing animation game written in native js yesterday. It mainly uses interval timers, objects, and Math methods. It feels OK. It mainly depends on the speed of eliminating letters, but there are also bugs, that is, letters are generated at one time, so at the beginning, it seems like there is an explosion. If you can generate a batch at one time and then drop it down in batches, please help me change it. You can also refer to it.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body,button{
margin: 0;
padding: 0;
}
body {
background: #333;
}
#game {
width: 400px;
margin: 0 auto;
}
#start {
width: 80px;
height: 40px;
}
span {
margin: 20px;
color: white;
}
.letter {
position: absolute;
color: yellow;
font: bold 30px "Arial";
}
</style>
<script>
= function () {
var start = ("start");
var scroll = ("scroll");
var time = ("time");
var g = 1 ;//Gravity
var timenum = 0 ;//Count of time var num = 0 ;//Count of grades var gameover = false ;
var timeandtime = null;
var letters = null ;
//Put the letters in a string and randomly select them var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
//Click the Start button and the letter will be automatically generated from the top and fall at random speed //User operation: The button corresponds to the letter button, and then the letter will disappear //The button that the user did not click reaches the bottom will return to the top and fall again; //After the user clears all letters, a dialog box pops up, showing the scores and text. //Embroidery an object, which contains compatibility methods to obtain event objects, page location, clear bubbles, and obtain event targets var eventUtil = {
getEvent: function (event) {
return event || ;
},
getPageX: function (event) {
return || + ;
},
getPageY: function (event) {
return || + ;
},
stopPropagation: function (event) {
if () {
();
} else {
= true;
}
},
getTarget: function (event) {
return || ;
}
};
= function () {
for(var i = 0 ;i<26;i++){
new letter();
}
letters = ;//Put all divs in the page into a pseudo-array, except for the first one, which belongs to the game, so the traversal starts from 1 //On the keyboard, press the corresponding letter key, the letter will disappear immediately, and the score will increase and be regenerated on it; = function (event) {
var evt = (event);
var keychar = ();//Convert the pressed letter keyboard code to direct capital letters for(var i = 1 ;i<;i++){
if(keychar===letters[i].innerHTML){
num++;
= num;
(letters[i]);
}
}
}
timeandtime=setInterval(function () {
timenum = timenum + 1 ;
(letters);
if(==1){//When the length of the pseudo-array is only one, the game ends gameover = true ;
clearInterval(timeandtime);
alert("Time to use"+timenum+"Second, keep working hard! Break through 10 seconds!");
} else {
= timenum;
}
},1000)
}
//Encapsulation function function letter(){
=()*900+100; //The setting position is between 100-1000 =0;
= ()*4+1; //The speed is randomly set between 1-5 = str[parseInt(()*25)]; //Create a random letter in 26 letters var letDiv = ("div");
= "letter";
= +"px";
= + "px";
= ;
(letDiv);
//The letters fall down var that = this ;
=setInterval(function () {
//leader = leader + step;
= + ;
if(>=client().){
= 0;
= ()*900+100;
}
if(!gameover){
= + "px";
= + "px";
} else {
clearInterval();
}
},15)
}
// Get the width and height of the viewable window, compatibility issues function client() {
return {
width: || || || 0,
height: || || || 0
};
}
}
</script>
</head>
<body>
<div >
<button >start</button>
<span>Score:<i >0</i></span>
<span>Timer:<i >0</i></span>
</div>
</body>
</html>
The above is all the content of this article. I hope that the content of this article will help you study or work. I also hope to support me more!