Learning the syntax of native js is actually easy, and the most important thing is to practice logical thinking. For me, who just finished learning js grammar, it really took me a whole day to write the game. The js code written in the overall feeling is actually the code of some small cases that are usually practiced. The js code is relatively small, and the most difficult is logical thinking. Practicing logical thinking is necessary for every beginner to learn js.
Recommendation:
When writing some programs with strong logical thinking, it is suggested to draw a mind map. Can help write code is clear thinking, to avoid confusion.
The white wire frame is where each mouse appears
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } .game { width: 750px; height: 600px; margin: 0 auto; } .ground { position: relative; width: 100%; height: 600px; background: url("images/bg_canvas.png") no-repeat; cursor: url("images/hammer.png") ,auto; } .ground .score { width: 300px; height: 30px; position: absolute; top: 180px; right: 40px; } .score img { width: 80px; height: 30px; display: inline-block; } .score span { display: inline-block; height: 30px; line-height: 30px; color: #fff; font-size: 24px; margin-left: 10px; vertical-align: top; } .ground .mask { width: 140px; height: 125px; position: absolute; overflow: hidden; border: 1px solid #ccc; background-position: 50% 50%; } .mouse { width: 110px; height: 125px; position: absolute; top: 10px; animation: mousecreate 0.5s linear ; } @keyframes mousecreate { 0%{ top: 70px; } 100% { top: 10px; } } </style> </head> <body> <div> <div id="_ground"> <div> <img src="images/score.png" alt=""> <span></span> </div> </div> </div> </body> </html> <script> // Get element, set global variable var _ground = document.getElementById("_ground"); var Mask = [];// Storage mask mask var Mouse = [];// Storing mice var score = 0; var life = 10; var gemeTimer = null; var maxMouseCount = 2;//At the beginning, the number of rats does not exceed 2 var coordinate = [, , , , , , , , ];//Portal coordinates /* 1:Press the ground button, the mouse hammer changes, the mouse pops up and the hammer recovers 2:Creating caves and masks 3:Creating mice 4:Mice appear 5:Mouse disappear - > 1: disappear without knocking 2: disappear with knocking box */ // 1: click ground and the mouse hammer changes _ground.onmousedown = function() { _ground.style.cursor = "url('images/hammer2.png'),auto"; } _ground.onmouseup = function() { _ground.style.cursor = "url('images/hammer.png'),auto"; } init();// Initialization function // 2: create caves and masks function createMask() { for(var i = 0; i < coordinate.length; i++) { var mask = document.createElement("div"); mask.className = "mask"; mask.style.left = coordinate[i].x + "px"; mask.style.top = coordinate[i].y + "px"; mask.index = i; var maskimg = document.createElement("div"); maskimg.className = "mask"; maskimg.style.zIndex = i * 2 + 1; // The mask level is greater than the mouse level, and the mask level of the upper layer cannot be greater than the mouse level of the next layer, otherwise the mouse's head will be covered maskimg.style.backgroundImage = "url('images/mask"+i+".png')"; mask.appendChild(maskimg);// Add mask layer Mask[i] = mask; _ground.appendChild(mask);// Adding caves mask.onclick = function() { disappear(this.index,true); // (the index of the beaten mask, beaten) } } } // 3: create mouse function createMouse(i) { // Randomly selected mice var picnum = Math.floor(Math.random()*4);// Generate a random number from 0-4 var mouse = document.createElement("div"); mouse.className = "mouse"; mouse.num = picnum; mouse.style.zIndex = i * 2; mouse.style.backgroundImage = "url('images/mouse"+picnum+".png')"; Mouse[i] = mouse;// Add a mouse to the mouse array Mask[i].appendChild(mouse); // Add rats to the cave // Every mouse has a timer that disappears var timer = setTimeout(function(){ disappear(i,false); },2000); mouse.timer = timer; } // 4: mouse appears function genarateMouse() { var num = Math.floor(Math.random()*coordinate.length);// Randomly generate a cave location if (Mouse.filter(function (item){ return item; }).length < maxMouseCount && Mouse[num] == null) { createMouse(num); } } // 5: mouse disappears -- > 1: mouse disappears automatically 2: mouse disappears after being knocked function disappear(index,isHit) { // Whether isHit is hit, Boolean if(Mouse[index] != null) { Mouse[index].style.top = "70px"; Mouse[index].style.transition = "top 0.5s"; if(isHit)// If it's knocked { clearInterval(Mouse[index].timer);// Timer to clear the mouse itself score += 10; } else { life -= 1; } setTimeout(function(){ if(Mouse[index]) { Mask[index].removeChild(Mouse[index]); } Mouse[index] = null; },500); } } function init() { createMask(); gameTimer = setInterval(function(){ genarateMouse(); if(life <= 0) { clearInterval(gameTimer); alert("At the end of the game, your score is" + score); } document.getElementsByClassName("score")[0].getElementsByTagName("span")[0].innerHTML = score + "，Life:"+ life; maxMouseCount = score / 100 + 1;// For every score increase to 100, the number of rats allowed to appear is increased by 1 },50); } </script>