one The game introduction

Whack-a-mole this game believe everyone is not strange, is also a classic childhood game. The preparation of the game is completed in the form of HTML files, and the use of HBulider software to write, using Google browser to show the effect, the game will use JavaScript to achieve the overall logical process, and finally use Google browser to achieve the display and operation of the game. This game needs to have a certain HTML5+JavaScript foundation.

Ii. The process of game implementation

A) Switching of the game interface and realization of background music

B) Set the clicking effect of the button

C) Hiding and appearing of ground squirrels

D) The random appearance of ground squirrels

E) Set the hammer to move with the mouse

F) Collision between hammers and ground squirrels

1. First, switch the game interface. When we click to start the game or the game description, the page will be switched. Set content to appear on the main menu of the game:

document.getElementById(“content”).style.display=”block”;

When entering the game or the game description, set the content to hide so that the interface can be switched

document.getElementById(“content”).style.display=”none”;

2. Next comes the realization of audio. The <audio> tag in HTML5’s new features provides the function of music playing.

// save the audio address in SRC, set autoplay to automatically play after loading, button to control the pause of playback

<audio id=”audio” src=”audio/game_music.ogg” autoplay=”autoplay” loop=”loop” ></audio>

<input type=”button” onclick=”playOrPause()” id=”playbtn”></input>

Then customize the function of the button in JS, the code is as follows:

Then customize the function of the button in JS, the code is as follows:

// Audio play and pause

function playOrPause(){

var audio = document.getElementById(“audio”);

if(audio.paused){

audio.play();

document.getElementById(“playbtn”).style.backgroundImage = “url(img/musicplaying.png)”;

}else if(audio.played){

audio.pause();

document.getElementById(“playbtn”).style.backgroundImage = “url(img/musicpause.png)”;

}

}

3, after is to set the button click effect, this is relatively simple, in fact, is the switch between two pictures, give the button a hover, through the mouse to realize the background picture switch

Ex. :

// The start button is triggered when the mouse points at itCopy the code
#start:hover{Copy the code
background-image: url(.. /img/start2.png);Copy the code
            }Copy the code

4. Next comes the function of gopher’s appearance. Set a div to display gopher in the area where gopher appears, hide gopher in the hole before gopher appears, use timer setInterval () to set the time of gopher’s appearance, and use delay setTimeout () to set the time for gopher to stay on the ground

The first is the DIV block (the gopher’s display area) and the gopher’s hidden DIV block

Ex. :

//d0 is the area where the gopher appears, and m0 is the area where the gopher hides

<div id=”d0″ >

<div id=”m0″ ></div>

</div>

The second is the appearance and disappearance of ground squirrels,

Ex. :

// The mouse displays and disappears animations

intervalid= setInterval(function(){

$(“#m”+num).animate({“marginTop”:0+”px”},function(){

timeId2= setTimeout(function(){

$(“#m”+num).animate({“marginTop”:100+”px”});

}, 1000);

});

// After the mouse is punched into the hole, the original map is restored

document.getElementById(“m”+num).style.backgroundImage = “url(img/mouse1.png)”;

}, 3000);

5, the random appearance of the gopher, we can set a random number,

Ex. :

// Generate random numbers between 0 and 8 including 0 and 8Copy the code
var  num = Math.floor(Math.random()*9);Copy the code

Generate a random number between 0 and 8 to specify which hole in the nine holes has a gopher, and then pass num to the timer and the gopher specified by ID in the delay device to realize the random selection of gopher.

6. Set the hammer movement to be synchronized with the mouse movement, use the mouse movement event in JavaScript, first register the mouse movement event, the code is as follows:

var ele=document.getElementById(“all”);

ele.onmousemove=function(){GetMouse(event); }

function GetMouse(oEvent,snum)

{

x=oEvent.clientX;

y=oEvent.clientY; document.getElementById(‘Img’).style.left=(parseInt(x))+10+”px”;

document.getElementById(‘Img’).style.top=y-30+”px”;

var oEvent=oEvent||event;

7. Collision detection:

Detect whether the hammer collises with the gopher. Use offsetTop, offsetWidth, offsetHeight and offsetLeft to calculate the position of the gopher and the hammer. Judge whether the gopher and the hammer collide according to the calculation of the distance.

var l1=document.getElementById(‘Img’).offsetLeft;

var r1=document.getElementById(‘Img’)

.offsetLeft+document.getElementById(‘Img’).offsetWidth;

var t1=document.getElementById(‘Img’).offsetTop;

var b1=document.getElementById(‘Img’)

.offsetTop+document.getElementById(‘Img’).offsetHeight;

var l2=document.getElementById(‘m’+num).offsetLeft;

var r2=document.getElementById(‘m’+num)

.offsetLeft+document.getElementById(‘m’+num).offsetWidth;

var t2=document.getElementById(‘m’+num).offsetTop;

var b2=document.getElementById(‘m’+num)

.offsetTop+document.getElementById(‘m’+num).offsetHeight;

// Hammer and mouse collision calculation

if(r1<l2 || l1>r2 || b1<t2 || t1>b2)

{

var ele = document.getElementById(“m”+num);

// Implement hammer click animation

ele.onmousedown = function(){

ChangeBg(“Img”,”img/hammer2.png”);

// Shoot a mouse and switch pictures

document.form1.score.value = beat;

Console. log(” Total: “+beat); document.getElementById(‘m’+num)

.style.backgroundImage=’url(img/mouse2.png)’;

}

beat+=1;

}

else

{

var ele = document.getElementById(“m”+num);

// Implement hammer click animation

ele.onmousedown = function(){

ChangeBg(“Img”,”img/hammer2.png”); document.getElementById(‘m’+num).style.background=’url(img/mouse1.png);

}

}