Native js realizes typing animation game
- 2021-07-16 01:36:24
- OfStack
This is a typing animation game written with native js yesterday. The main intermittent timer, object, and Math method are OK, mainly looking at the time of eliminating letters, but there are also bug, that is, letters are generated once, so from the beginning, it seems that there will be an explosive feeling. If you can generate a batch once, and then drop it in batches, please ask the great God to help you change it, and 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>
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 ;// Counting of time
var num = 0 ;// Counting of grades
var gameover = false ;
var timeandtime = null;
var letters = null ;
// The letters are placed 1 Inside the string, randomly select
var str = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
// Click the Start button, and letters will automatically be generated and fall from the top at a random speed
// User action: The button corresponds to the letter button, and then the letter will disappear
// The button that the user did not click will return to the top and fall again after reaching the bottom;
// After the user clears all letters, a dialog box pops up, displaying scores and text.
// Encapsulation 1 Objects, which contain compatibility methods for getting event objects, page positions, clearing bubbles, and getting event targets
var eventUtil = {
getEvent: function (event) {
return event || window.event;
},
getPageX: function (event) {
return event.pageX || event.clientX + document.documentElement.scrollLeft;
},
getPageY: function (event) {
return event.pageY || event.clientY + document.documentElement.scrollTop;
},
stopPropagation: function (event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
getTarget: function (event) {
return event.target || event.srcElement;
}
};
start.onclick= function () {
for(var i = 0 ;i<26;i++){
new letter();
}
letters = document.body.children;// Sets all of the div Put it all in 1 Of the pseudo arrays, the 1 Except for, belonging to game Therefore, traversing from the 1 Begin
// On the keyboard, press the corresponding letter key, the letter will disappear immediately, and the score will increase and be regenerated on it;
document.onkeydown = function (event) {
var evt = eventUtil.getEvent(event);
var keychar = String.fromCharCode(evt.keyCode);// Converts the keyboard code of the pressed letter to direct capital letters
for(var i = 1 ;i<letters.length;i++){
if(keychar===letters[i].innerHTML){
num++;
scroll.innerHTML = num;
document.body.removeChild(letters[i]);
}
}
}
timeandtime=setInterval(function () {
timenum = timenum + 1 ;
console.log(letters);
if(letters.length==1){// When the length of the pseudo array is only 1 Then the game is over
gameover = true ;
clearInterval(timeandtime);
alert(" Time "+timenum+" Seconds, make persistent efforts! Breakthrough 10 Seconds! ");
} else {
time.innerHTML = timenum;
}
},1000)
}
// Encapsulated function
function letter(){
this.x=Math.random()*900+100; // Set the position in the 100-1000 Between
this.y=0;
this.speedY = Math.random()*4+1; // The speed is randomly set at 1-5 Between
this.value = str[parseInt(Math.random()*25)]; // In 26 Randomly generated in letters 1 Letters
var letDiv = document.createElement("div");
letDiv.className = "letter";
letDiv.style.top = this.y+"px";
letDiv.style.left = this.x+ "px";
letDiv.innerHTML = this.value;
document.body.appendChild(letDiv);
// Letters fall down
var that = this ;
this.timer=setInterval(function () {
//leader = leader + step;
that.y = that.y + that.speedY;
if(that.y>=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)
}
// Gets the width and height window of the visual window , Compatibility issues
function client() {
return {
width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
};
}
}
</script>
</head>
<body>
<div id="game">
<button id="start"> Begin </button>
<span> Score :<i id="scroll">0</i></span>
<span> Timing :<i id="time">0</i></span>
</div>
</body>
</html>