Home > Developer > JavaScript
The following code is used:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312"/>
<Title> jjb </title>
<Style type = "text/css">
* {Margin: 0px; padding: 0px ;}
# Content {width: 800px; height: 500px; position: absolute; left: 10px; top: 10px; background: url(bg.gif) repeat-x left top ;}
# Scbox {width: 100px; background: #000000; font-weight: bold; color: # FFFFFF; font-size: 12px; line-height: 22px; padding-left: 10px ;}
# Start {position: absolute; left: 215px; _ left: pixel PX; top: 140px ;}
# Life {height: 22px; background: #009000; position: absolute; left: 110px; top: 0px ;}
# Bottom {width: 800px; height: 44px; position: absolute; left: 0; top: 456px; background: #333; z-index: 9 ;}
# Startbox {height: 150px; position: absolute; left: 260px; top: 100px; background: #000000; color: # fff; font-size: 12px; padding: 10px ;}
# Jia {font-size: 40px; font-family: Verdana, Arial, Helvetica, sans-serif; color: # 0099CC; position: absolute; z-index: 1001 ;}
# Jian {font-size: 40px; font-family: Verdana, Arial, Helvetica, sans-serif; color: # FF0000; position: absolute; z-index: 1001 ;}
</Style>
<Script language = "javascript">
(Function (){
(New Image (). src = "38.gif ";
(New Image (). src = "48.gif ";
(New Image (). src = "bike.gif ";
(New Image (). src = "bike2.gif ";
(New Image (). src = "bg.gif ";
})();
// Cache image loading
Function $ (id) {return document. getElementById (id );}
Var boxBaseAttr = new Object;
BoxBaseAttr = {
Width: "26px ",
Height: "40px ",
Position: "absolute ",
Top: "30px ",
Background: "url(38.gif) no-repeat center top ",
ZIndex: 10
};
Var boxBaseAttr2 = new Object;
BoxBaseAttr2 = {
Width: "26px ",
Height: "40px ",
Position: "absolute ",
Top: "30px ",
Background: "url(48.gif) no-repeat center top ",
ZIndex: 10
};
Var ele = new Object;
Ele = {
Div: document. createElement ("div "),
Span: function (){
Var sp = document. createElement ("span ");
For (var s in boxBaseAttr ){
Sp. style [s] = boxBaseAttr [s];
}
Sp. setAttribute ("type", "good ");
Return sp;
},
Badspan: function (){
Var sp2 = document. createElement ("span ");
For (var s in boxBaseAttr2 ){
Sp2.style [s] = boxBaseAttr2 [s];
}
Sp2.setAttribute ("type", "bad ");
Return sp2;
}
};
Var sco = 0, lifeWidth = 690, lifes = true;
Var bar = {
GetScore: function (){
Sco + = 10;
$ ("SC"). innerHTML = sco;
},
LoseScore: function (){
Sco-= 10;
$ ("SC"). innerHTML = sco;
},
Life: function (){
Var life = $ ("life ");
Var sl = setInterval (function (){
If (lifeWidth <23 ){
Lifes = false;
ClearInterval (sl );
Return;
}
Else {
LifeWidth-= 23;
Life. style. width = lifeWidth + "px ";
}
},1000 );
}
};
Var fire = {
Init: function (o, x, y ){
O. style. display = "block ";
O. style. left = x + "px ";
O. style. top = y + "px ";
Var fs = setInterval (function (){
If (y> = 280 ){
Y-= 10;
O. style. top = y + "px ";
}
Else {
ClearInterval (fs );
O. style. display = "none ";
}
}, 10 );
}
};
/* -- Game begin --*/
Function game (){
Var content = $ ("content"), x = 0;
Var pigBaseAttr = new Object;
PigBaseAttr = {
Background: "url(bike.gif) no-repeat center top ",
Position: "absolute ",
Top: content. clientHeight-44 + "px ",
Left: (content. clientWidth-45)/2 + "px ",
Width: "45px ",
Height: "44px ",
ZIndex: 1000
};
Var pig = ele. div. cloneNode (true );
For (var s in pigBaseAttr ){
Pig. style [s] = pigBaseAttr [s];
}
Content. appendChild (pig );
/* -- In --*/
Content. onmousemove = function (event ){
Var e = event | window. event;
If (x> e. clientX ){
// Pig. style. width = "110px ";
Pig. style. background = "url(bike.gif) no-repeat left top ";
If (e. clientX-45 <0 ){
Pig. style. left = "0px ";
} Else if (e. clientX + 45> 800 ){
Pig. style. left = "755px ";
}
Else {
Pig. style. left = (e. clientX-45) + "px ";
}
}
Else if (x <e. clientX ){
// Pig. style. width = "110px ";
Pig. style. background = "url(bike2.gif) no-repeat right top ";
If (e. clientX-45 <0 ){
Pig. style. left = "0px ";
} Else if (e. clientX + 45> 800 ){
Pig. style. left = "755px ";
}
Else {
Pig. style. left = (e. clientX-45) + "px ";
}
}
X = e. clientX;
}
/* -- Determine whether the impact is detected. The input parameters are box and content --*/
Function meet (obox, parent ){
Var objX = obox. offsetLeft;
Var pigX = pig. offsetLeft;
Var boxType = obox. getAttribute ("type ");
If (objX + 26> = pigX & objX <= pigX + 45 ){
If (boxType = "good "){
Bar. getScore ();
Fire. init ($ ("jia"), pigX, pig. offsetTop-30 );
}
Else if (boxType = "bad "){
Bar. loseScore ();
Fire. init ($ ("jian"), pig. offsetTop-30 );
}
Obox. style. left = "-2000px ";
}
}
/* -- Create a random gold coin begin --*/
Function createbox (){
Var box = ele. span ();
Var B = 30;
Var boxLeft = Math. floor (Math. random () * 760); // generates a random distance.
Box. style. left = boxLeft + "px ";
Content. appendChild (box );
// Box enter the game interface, start to move, and start to execute the function to compare with pig to determine whether to hit
Var st = setInterval (function (){
If (B <460 ){
Box. style. top = B + 5 + "px ";
B + = 5;
If (B >=416 ){
Meet (box, content );
}
}
Else {
Content. removeChild (box );
ClearInterval (st );
B = 30;
}
}, 5 );
}
Function createbadbox (){
Var box = ele. badspan ();
Var B = 30;
Var boxLeft = Math. floor (Math. random () * 760); // generates a random distance.
Box. style. left = boxLeft + "px ";
Content. appendChild (box );
// Box enter the game interface, start to move, and start to execute the function to compare with pig to determine whether to hit
Var st = setInterval (function (){
If (B <460 ){
Box. style. top = B + 5 + "px ";
B + = 5;
If (B & gt; 416 ){
Meet (box, content );
}
}
Else {
Content. removeChild (box );
ClearInterval (st );
B = 30;
}
}, 5 );
}
Bar. life ();
/* -- Start to execute the loop to add the box function --*/
Var xt = setInterval (function (){
If (lifes = false ){
ClearInterval (xt );
Alert ("by time, your score is:" + sco );
LifeWidth = 690;
Lifes = true;
Sco = 0;
$ ("Startbox"). style. display = "block ";
$ ("Start"). value = "play again ";
Content. removeChild (pig );
} Else {
Createbox ();
Createbadbox ();
}
},500 );
}
Window. onload = function (){
$ ("Start"). onclick = function (){
$ ("Startbox"). style. display = "none ";
New game ();
}
}
</Script>
</Head>
<Body>
<Div id = "content">
<Div id = "startbox">
<P> game rules: </p>
<P> (1) You only have 30 seconds to move the pig around with the mouse. </p>
<P> (2) the piglet received 10 points for the girl. </p>
<P> (3) piglets receive girls, minus 10 points. </p>
<Input type = "button" id = "start" value = "start game"/>
</Div>
<Div id = "scbox"> score: <span id = "SC"> 0 </span> </div>
<Div id = "life" style = "width: 690px;"> </div>
<Div id = "bottom"> </div>
<Div id = "jia" style = "display: none;"> + 10 </div>
<Div id = "jian" style = "display: none;">-10 </div>
</Div>
</Body>
</Html>
DEMO code:/js/js_game/index.htm
Package and download code
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
