Demo Address: http://demo.jb51.net/js/mouse/index.html
Package Download Address http://www.jb51.net/jiaoben/32434.html
This is my boring time to write, first look at the effect (UI do ugly):
Description: The red Click Score 100, the Blue click button Points 100.
Just want to use JS to write a small game, by the way practice JS code.
First look at the HTML section:
Html
Copy Code code as follows:
<style>
#panel {height:300px;width:300px;background: #ccc; margin:50px 0 0 200px;}
#panel ul{list-style:none;display:block;float:left;margin:0;padding:0;}
#panel li{display:block;float:left;width:100px;height:100px;
Overflow:hidden;position:relative;text-align:center;}
#panel Li span{display:block;position:relative;left:0;top:60px;
Width:100px;height:40px;background:url (Img/hole.gif) 0-60px;z-index:100;}
</style>
<body>
<span> Note: Red Click Score 100, Blue click Buckle points 100.</span>
<div id= "Panel" >
<ul>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</div>
<div> Score: <span id= "Score" >0</span></div>
<div> countdown: <span id= "Time" >60</span></div>
<input type= "button" value= "Start" onclick= "Gamestart ()"/>
JS section: Rodents
Copy Code code as follows:
var Mouse = function (type) {
The concrete DOM element of the Gopher, added to the page on the
This.mouse = null;
Number of Hamsters
This.num =-1;
The number of the burrow (in which hole the hamster is hiding)
This.hole =-1;
initialization, type for Gopher, good and bad
This.init (type);
}
Mouse.prototype = {
Hamster type, good, bad, good killed, bad killed
Mousetype: {
"Good": "Img/good.gif",
"Bad": "Img/bad.gif",
"Goodkill": "Img/goodkill.gif",
"Badkill": "Img/badkill.gif"
},
Initialization of Hamster
Init:function (type) {
Type = Type | | ' Good ';
var _this = this;
To create a DOM element for a hamster
This.mouse = document.createelement ("div");
Extended Properties--Hamster type
This.mouse.mousetype = type;
Extension type--Is it alive
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; ';
Bound hamster is clicked event
This.mouse.onclick = function (e) {_this.beat (e);};
},
The hamster was in the dot
Beat:function (e) {
if (this.mouse.islive) {
This.mouse.islive = false;
This.onbeat ();
this.mouse.style.background = "url (" +this.mousetype[this.mouse.mousetype+ "Kill"]+ ")";
}
},
The animation of the Hamster
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;
And let the gopher come out of 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);
}
}
Hidden Hamster
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 hamster, when the local rat rolled back into the cave.
Reset:function () {
This.mouse.islive =true;
this.mouse.style.background = "url (" +this.mousetype[this.mouse.mousetype]+ ")";
This.onend ();
},
Extension method: The hamster is in the dot
Onbeat:function () {},
Extension method: After the end of the mouse animation
Onend:function () {}
}
Then there is the game control class, which controls the logic of the game:
Copy Code code as follows:
Game Control class
var Game = {
Game time, one minute.
Time:61,
The hamster map, a total of 10, of which two are bad
Mousemap: {
1: ' Good ',
2: ' Bad ',
3: ' Good ',
4: ' Good ',
5: ' Bad ',
6: ' Good ',
7: ' Bad ',
8: ' Good ',
9: ' Good ',
' Good '
},
All the Hamster DOM elements
Allmouse: [],
Current score
nowscore:0,
What are some of the caves currently occupied?
Hashole: {},
How many hamsters are active at the moment?
Hasmouse: {},
A collection of holes in the page
Lis:null,
Initialization of hamsters and burrows
Init:function () {
Get a collection of holes in a page
This.lis = document.getElementById (' panel '). getElementsByTagName (' Li ');
_this = this;
Initialization of 10 Hamsters
for (var i=1;i <=10;i++) {
var mouse = new Mouse (this.mousemap[i]);
Extended Hamster is in point event
Mouse.onbeat = function () {
Modify Fractions
Game.changescore (this.mouse.mousetype== ' good ' 1:-1));
}
Extended Hamster Animation End Event
Mouse.onend = function () {
Remove the hamster from the Burrow
var li = _this.lis[this.hole];
Li.removechild (Li.mouse.mouse);
Li.mouse = null;
To clear the corresponding burrows and hamsters
_this.hashole[this.hole] = null;
_this.hasmouse[this.num] = null;
}
This.allMouse.push (mouse);
}
},
Change Game Score
Changescore:function (Score) {
This.nowscore + = score;
document.getElementById (' score '). InnerHTML = This.nowscore;
},
Game start
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 Hamster number
var randommouse = parseint (Math.random () *10,10);
while (This.hasmouse[randommouse]) {
Randommouse = parseint (Math.random () *10,10);
}
Add Hamster to Burrow
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 Hamster and Burrow number
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, can't start again!") ");
Return
}
Game.reset ();
Game.init ();
Game.start ();
Game.starttime ();
}
So it's done ... The function is still very simple ... Just want to show that JS can still play small game ... Welcome to the Brick!
