JavaScript whack-a-mole game code description_Game Entertainment

Demo address: http://demo.jb51.net/js/mouse/index.html
Package download addresshttp://www.jb51.net/jiaoben/32434.html
This is what I wrote when I was bored. Let’s take a look at the effect first (the UI is relatively ugly):

Explanation: Red clicks score 100 points, blue clicks deduct points. 100.

I just want to write a small game using js and practice the js code.
Look at the html part first:
html

Copy the code The code is as follows:

Note: Red clicks score 100, blue clicks score 100 100 points deducted.

;span>

Score: 0

Countdown: 60

js part: Gopher class

Copy code The code is as follows:

var Mouse = function(type){
//The specific dom element of the mole, added to the page
this.mouse = null;
//The number of the mole
this.num = -1;
//The number of the hole (which hole the mole hides in)
this.hole = -1;
//Initialization, type is the mole type, easy to use Bad
this.init(type);
}
Mouse.prototype = {
//Mouse type, good, bad, good ones are killed, bad ones are killed
mousetype: {
"good": "img/good.gif",
"bad": "img/bad.gif",
"goodkill":"img/goodkill.gif",
" badkill":"img/badkill.gif"
},
//Initialize the gopher
init: function(type){
type = type || 'good';
var _this = this;
//Create the DOM element of the mole
this.mouse = document.createElement("div");
//Extended attributes--the mole type
this.mouse.mousetype = type;
//Extended type - whether it is alive or not
this.mouse.islive = true;
this.mouse.style.cssText = 'width:75px;height:100px;background:url( ' this.mousetype[type] ');left:0;top:20px;
position:relative;margin:auto;cursor:pointer;';
//Bind the mouse click event
this.mouse.onclick = function(e){_this.beat(e);};
},
//The mole was clicked
beat : function(e){
if( this.mouse.islive){
this.mouse.islive = false;
this.onbeat();
this.mouse.style.background = "url(" this.mousetype[this.mouse. mousetype "kill"] ")";
}
},
//Animation of the gopher
animation: function(speed){
speed = speed == 'fast'?20 :speed == 'normal'?30:50;
var obj = this.mouse,ost = obj.style,oTop = parseInt(ost.top,10),cut=5,_this = this;
//Let the mole emerge from the hole
var show = function(top){
top = top-cut;
if(top >= -40){
ost.top = top 'px';
setTimeout(function(){show(top);},speed);
}
else
{
setTimeout(function(){hide(-40) ;},speed*10);
}
}
//Hide the gopher
var hide = function(top){
top = top cut;
if(top < ;= oTop){
ost.top = top 'px';
setTimeout(function(){hide(top);},speed);
}
else {
_this. reset();
}
}
show(oTop);
},
//Reset the gopher, when the gopher rolls back into the hole
reset: function( ){
this.mouse.islive =true;
this.mouse.style.background = "url(" this.mousetype[this.mouse.mousetype] ")";
this.onend() ;
},
//Extension method: The mole is clicked
onbeat: function(){},
//Extension method: After the mole animation ends
onend: function( ){}
}

Then there is the game control class, which controls the logic of the game:

Copy code The code is as follows:

//Game control class
var Game = {
//Game time, one minute
time: 61,
//Gopher map, there are ten in total, among which Two are bad
mouseMap: {
1:'good',
2:'bad',
3:'good',
4:'good',
5 :'bad',
6:'good',
7:'bad',
8:'good',
9:'good',
10:'good'
},
//All hamster dom elements
allMouse: [],
//Current score
nowScore: 0,
//How many burrows are currently occupied?
hasHole : {},
//How many moles are currently active?
hasMouse: {},
//The burrow collection of the page
lis: null,
//Initialize the gophers and burrows
init: function(){
//Get the burrow collection of the page
this.lis = document.getElementById('panel').getElementsByTagName('li');
_this = this;
//Initialize 10 moles
for(var i=1;i <=10;i ){
var mouse = new Mouse(this.mouseMap[i] ; good'?1:-1));
}
//Expand the gopher animation end event
mouse.onend = function(){
//Remove the gopher in the burrow
var li = _this.lis[this.hole];
li.removeChild(li.mouse.mouse);
li.mouse = null;
//Clear the corresponding burrow and mole
_this.hasHole[this.hole] = null;
_this.hasMouse[this.num] = null;
}
this.allMouse.push(mouse);
}
} ,
//Modify the game score
changeScore: function(score){
this.nowScore = score;
document.getElementById('score').innerHTML = this.nowScore;
} ,
//The game starts
start: function(){
if(this.time <= 0)return;
var _this = this;
//Random hole number
var random = parseInt(Math.random()*9,10);
while(this.hasHole[random]){
random = parseInt(Math.random()*9,10);
}
//Random Mouse Number
var randomMouse = parseInt(Math.random()*10,10);
while(this.hasMouse[randomMouse]){
randomMouse = parseInt( Math.random()*10,10);
}
//Add the mole to the hole
this.allMouse[randomMouse].hole = random;
this.allMouse[randomMouse]. num = randomMouse;
this.lis[random].appendChild(this.allMouse[randomMouse].mouse);
this.lis[random].mouse = this.allMouse[randomMouse];
this. lis[random].mouse.animation('normal');
//Record the gopher and burrow numbers
this.hasHole[random] = 'true';
this.hasMouse[randomMouse] = ' true';
setTimeout(function(){_this.start();},250);
},
//Countdown
startTime : function(){
this.time - = 1;
var _this = this;
document.getElementById('time').innerHTML = this.time;
if(this.time > 0){
setTimeout(function() {_this.startTime()},1000);
}
},
//Reset game settings
reset : function(){
this.time = 61;
this.allMouse = [];
this.nowScore = 0;
this.hasHole = {};
this.hasMouse = {};
this.lis = null;
this. changeScore(0);
}
}
//Game start function
function GameStart(){
if(Game.time > 0 && Game.time != 61){
alert("The game is not over yet and cannot be restarted! ");
return;
}
Game.reset();
Game.init();
Game.start();
Game.startTime();
}

That’s it. The function is still very simple. .