Home > Developer > JavaScript
I just want to use js to write a small game and practice js Code by the way.
First look at the html section:
HtmlCopy codeThe Code is 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>
</Head>
<Body>
<Span> Note: The red button points 100 and the blue button points 100. </span>
<Div id = "panel">
<Ul>
<Li> <span> </li>
<Li> <span> </li>
<Li> <span> </li>
<Li> <span> </li>
<Li> <span> </li>
<Li> <span> </li>
<Li> <span> </li>
<Li> <span> </li>
<Li> <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 part: RatCopy codeThe Code is as follows: var Mouse = function (type ){
// Add the specific dom element of the hamster to
This. mouse = null;
// ID of the hamster
This. num =-1;
// ID of the ground hole (which hole does the ground rat hide in)
This. hole =-1;
// Initialization, type is the hamster type, good and bad
This. init (type );
}
Mouse. prototype = {
// Hamster type, good, bad, good, and bad
Mousetype :{
"Good": "img/good.gif ",
"Bad": "img/bad.gif ",
"Goodkill": "img/goodkill.gif ",
"Badkill": "img/badkill.gif"
},
// Initialize the hamster
Init: function (type ){
Type = type | 'good ';
Var _ this = this;
// Create the dom element of the hamster
This. mouse = document. createElement ("div ");
// Extended property-hamster type
This. mouse. mousetype = type;
// Extension type -- whether the extension type is alive
This. mouse. islive = true;
This.mouse.style.css Text = 'width: 75px; height: 100px; background: url ('+ this. mousetype [type] +'); left: 0; top: 20px ;\
Position: relative; margin: auto; cursor: pointer ;';
// Bind the mouse clicking event
This. mouse. onclick = function (e) {_ this. beat (e );};
},
// The hamster is being attacked
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 hamster
Animation: function (speed ){
Speed = 'quick '? 20: speed = 'normal '? 30: 50;
Var obj = this. mouse, ost = obj. style, oTop = parseInt (ost. top, 10), cut = 5, _ this = this;
// Let the hamster exit from the ground 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 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.
Reset: function (){
This. mouse. islive = true;
This. mouse. style. background = "url (" + this. mousetype [this. mouse. mousetype] + ")";
This. onend ();
},
// Expansion method: the hamster is being clicked
Onbeat: function (){},
// Extension Method: After the animation ends
Onend: function (){}
}
Next, the game control class controls the logic of the game:Copy codeThe Code is as follows: // game control class
Var Game = {
// Game time, one minute
Time: 61,
// Map of hamster, with a total of 10, two of which are only bad
MouseMap :{
1: 'good ',
2: 'bad ',
3: 'good ',
4: 'good ',
5: 'bad ',
6: 'good ',
7: 'bad ',
8: 'good ',
9: 'good ',
10: 'good'
},
// All the mouse dom elements
AllMouse: [],
// Current score
NowScore: 0,
// Which holes are currently occupied?
HasHole :{},
// Which hamster is active currently?
HasMouse :{},
// Set of holes on the page
Lis: null,
// Initialize the hamster and the ground hole
Init: function (){
// Obtain the cave set on the page
This. lis = document. getElementById ('panel '). getElementsByTagName ('lil ');
_ This = this;
// Initialize 10 hamster
For (var I = 1; I <= 10; I ++ ){
Var mouse = new Mouse (this. mouseMap [I]);
// Extended mouse events
Mouse. onbeat = function (){
// Modify the score
Game. changeScore (100 * (this. mouse. mousetype = 'good '? 1:-1 ));
}
// Extended mouse animation end event
Mouse. onend = function (){
// Remove the hamster from the ground hole
Var li = _ this. lis [this. hole];
Li. removeChild (li. mouse. mouse );
Li. mouse = null;
// Clear the corresponding ground hole and hamster
_ 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;
},
// Start the game
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 the hamster to the ground 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 number of the hamster and the cave
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. You cannot start again! ");
Return;
}
Game. reset ();
Game. init ();
Game. start ();
Game. startTime ();
}
This completes... Simple functions... I just want to explain that js can still be used as a small game... Welcome!
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
