Home > Developer > Web Develop
Believe that the game of the silver ingot are familiar to everyone, since the grasp of the nerve cat fire, more and more games, HTML5 as people think gradually occupy the stage. Of course, due to browser compatibility issues, HTML5 's game is still only on the mobile side, but it doesn't matter. Today bloggers bring a jquery to the small piece of the game, even under the IE6 can be run.
Not much to say the first code:
<! DOCTYPE Public "-//w3c//dtd XHTML 1.0 transitional//en" Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<script src = "jquery-1.8.3.min.js" ></script>
<title> Games </title > <body>
<div style= "Background:url (bei.png);p Osition:absolute;margin:auto auto;width:650px;height:450px;border:1px Solid #131E63 "Stage" > Id=
</div>
<div style= "position:absolute;height:20px;width:200px;" > Score <span id= "num" >0</span > </div>
<div style= "float:right;position:absolute;height:20px;width:200px;left:600px" > <span id= "Time" >15 </span > </div>
<div style= "position:absolute;top:480px;left:100px;" >
Tip: A key moves to the left, and the D key moves to the right
</div>
</body>
<script>
$ (function () {
//Construct people
var NPC = $ ("#npc"),
Left, time = $ ("#time"),
Stage = $ ("#stage");
//Timer
var timer = n;
t = setinterval (function () {
timer--;
time.html (timer);
}, 1000);
//Read keyboard event
var = npc.css (' left '). Match (/\d+/) * 1;
$ (document). KeyDown (function (d) {
//alert (d.keycode)
d.keycode==68;
alert (D.keycode);
if (D.keycode = =) {
left = npc.css (' left '). Match (/\d+/) * 1;
if (Left > 550) {
return false;
} else {
Npc.css ("left", left + + ' px ');
}
}
if (D.keycode = =) {
left = npc.css (' left '). Match (/\d+/) * 1;
Alert (left)
if (left <= 0) {
return false;
} else {
Npc.css ("left", left-25 + ' px ');
}
}
});
//Load ingot node
var rank = [],
num = $ ("#num"),
number;
Rank[0] = ' ';
Rank[1] = ' ';
Rank[2] = ' ';
$ (stage). Append (Rank[0]);
$ (stage). Append (rank[1]);
$ (stage). Append (rank[2]);
//Create Ingot object
Function Money (DOM, left, top) {
THIS.I = 2;
This.dom = $ (DOM);
This.left = left;
This.top = top;
This.dom.css ("Top", top). CSS ("left", left). CSS ("Display", "block"); Set the initial position of the ingot
This.flag = true; Plus lock
}
Money.prototype = {
Move method for Ingot object
Move:function () {
if (timer <= 0) {
Stop ();
Cleartimeout (t);
Cleartimeout (m);
Cleartimeout (t1);
Cleartimeout (T2);
Cleartimeout (T3);
return false;
}
var val = math.abs (left-this.left);
This.i + = 0.03;
This.top = This.dom.css ("Top"). Match (/\d+/) * 1;
if (this.top >= 335 && Val <= 45) {
THIS.DOM.CSS ("Display", "none");
THIS.I = 2;
if (This.flag = = true) {//Plus points
Console.log (This.flag)
Number = num.html () * 1 + 20;
num.html (number);
This.flag = false; Lock points
} else {
return false;
}
} else if (This.top > 370) {//not received ingot, silver ingot disappears, retract
THIS.DOM.CSS ("Display", "none");
THIS.I = 2;
Cleartimeout (THIS.T);
This.flag = false; Take back the same lock points
} else {//ingot movement
This.dom.css ("Top", This.top + this.i + "px");
}
}
};
Start the game and generate examples of ingot
Start ();
m = setinterval (function () {
Cleartimeout (t1);
Cleartimeout (T2);
Cleartimeout (T3);
Start ();
}, 3000);
function Start () {
var top = [],
left = [];
for (var i = 0; i < 3; i++) {
Top[i] = Math.floor (Math.random () * 200 + 200);
Left[i] = Math.floor (Math.random () * 400);
Console.log (top);
}
var qy = new Money ('. Money ', top[0], left[0]);
T1 = setinterval (function () {
Qy.move ();
}, 15);
var by = new Money ('. Money-1 ', top[1], left[1]);
T2 = setinterval (function () {
By.move ();
}, 15);
var cy = new Money ('. Money-2 ', top[2], left[2]);
T3 = setinterval (function () {
Cy.move ();
}, 15);
}
});
End action
function Stop () {
var ove = ' <div style= ' 9999px;height:9999px;z-index:99;opacity:0.5;background: #fff; " ></div> ',
over = ' <div style= ' position:absolute;top:200px;left:200px;font-size:20px;height:500px;width:200px;z-index:999 "Id=" over "> Time to!!!!!! </div> ';
$ ("Body"). Append (ove);
$ ("Body"). Append (over);
}
</script>
OK, basically the code is not difficult, is the use of object-oriented thinking, here is the most worth mentioning is the construction of the example of silver ingot, because the ingot to appear randomly, and after landing (whether received or not), the award of the construction of the example of recycling and re-construction. Of course, the operation of the task movement is very simple, and there is not much difficulty, as long as the ingot can be built, and the properties and methods of the core is the drop method, and then we add a judgment function in the drop method.
At last:
The small game of jquery to connect the ingot
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
