原創(chuàng)javascript小游戲?qū)崿F(xiàn)代碼
更新時間：2010年08月19日 15:01:15 作者：
javascript小游戲?qū)崿F(xiàn)代碼，喜歡用javascript實現(xiàn)游戲效果代碼的朋友可以參考下。
以下是代碼：
<!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:190px; 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";
})();
//緩存加載圖片
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);
/* -- 小豬移動功能begin--*/
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;
}
/*-- 判斷是否撞擊，傳入?yún)?shù)為box和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"), pigX, pig.offsetTop-30);
}
obox.style.left = "-2000px";
}
}
/* -- 創(chuàng)建隨機位置的金幣 begin--*/
function createbox() {
var box = ele.span();
var b = 30;
var boxLeft = Math.floor(Math.random()*760);//產(chǎn)生隨機距離
box.style.left = boxLeft + "px";
content.appendChild(box);
//box進入游戲界面，開始移動，并開始執(zhí)行函數(shù)和pig比對是否撞擊
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);//產(chǎn)生隨機距離
box.style.left = boxLeft + "px";
content.appendChild(box);
//box進入游戲界面，開始移動，并開始執(zhí)行函數(shù)和pig比對是否撞擊
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);
}
bar.life();
/*-- 開始執(zhí)行循環(huán)添加box函數(shù) --*/
var xt = setInterval(function(){
if (lifes == false) {
clearInterval(xt);
alert("時間到，您的得分是："+sco);
lifeWidth = 690;
lifes = true;
sco = 0;
$("startbox").style.display = "block";
$("start").value = "再玩一次";
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>游戲規(guī)則：</p>
<p>(1) 你只有30秒的時間，用鼠標(biāo)控制小豬左右移動;</p>
<p>(2) 小豬接到<img src="38.gif" />女孩，加10分；</p>
<p>(3) 小豬接到<img src="48.gif" />女孩，減10分；</p>
<input type="button" id="start" value="開始游戲" />
</div>
<div id="scbox">分?jǐn)?shù)：<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>
演示代碼:/js/js_game/index.htm
代碼打包下載
復(fù)制代碼 代碼如下:
<!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:190px; 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";
})();
//緩存加載圖片
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);
/* -- 小豬移動功能begin--*/
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;
}
/*-- 判斷是否撞擊，傳入?yún)?shù)為box和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"), pigX, pig.offsetTop-30);
}
obox.style.left = "-2000px";
}
}
/* -- 創(chuàng)建隨機位置的金幣 begin--*/
function createbox() {
var box = ele.span();
var b = 30;
var boxLeft = Math.floor(Math.random()*760);//產(chǎn)生隨機距離
box.style.left = boxLeft + "px";
content.appendChild(box);
//box進入游戲界面，開始移動，并開始執(zhí)行函數(shù)和pig比對是否撞擊
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);//產(chǎn)生隨機距離
box.style.left = boxLeft + "px";
content.appendChild(box);
//box進入游戲界面，開始移動，并開始執(zhí)行函數(shù)和pig比對是否撞擊
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);
}
bar.life();
/*-- 開始執(zhí)行循環(huán)添加box函數(shù) --*/
var xt = setInterval(function(){
if (lifes == false) {
clearInterval(xt);
alert("時間到，您的得分是："+sco);
lifeWidth = 690;
lifes = true;
sco = 0;
$("startbox").style.display = "block";
$("start").value = "再玩一次";
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>游戲規(guī)則：</p>
<p>(1) 你只有30秒的時間，用鼠標(biāo)控制小豬左右移動;</p>
<p>(2) 小豬接到<img src="38.gif" />女孩，加10分；</p>
<p>(3) 小豬接到<img src="48.gif" />女孩，減10分；</p>
<input type="button" id="start" value="開始游戲" />
</div>
<div id="scbox">分?jǐn)?shù)：<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>
演示代碼:/js/js_game/index.htm
代碼打包下載
相關(guān)文章
擴展運算符 (spread syntax) 是 ES6 提供的一種非常便捷的新語法，給我們操作數(shù)組和對象帶來了非常大的便利，我在很多文章中也提到了這個語法。但是其實擴展運算符的用法還是比較多比較雜的，我用一篇文章來做一下總結(jié)，梳理一下擴展運算的語法和使用細節(jié)。2020-11-11
這篇文章主要介紹了JS實現(xiàn)換膚功能的方法,結(jié)合實例形式分析了javascript針對頁面元素屬性與樣式動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-01-01
void是javascript中的一個操作符，void會計算表達式的值，但是會丟棄表達式的返回值接下來將詳細介紹下，感興趣的你可以參考下或許對你有所幫助2013-03-03
今天小編就為大家分享一篇LayUI表格批量刪除方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JS調(diào)用頁面表格導(dǎo)出excel示例代碼
這篇文章主要介紹了JS調(diào)用頁面表格導(dǎo)出excel的具體實現(xiàn),需要的朋友可以參考下2014-03-03
最近對eval火爆的討論，教主 @Franky 和 灰大 @otakustay 也給了精彩的數(shù)據(jù)分析,剛好之前也做過類似的測試，我也跟風(fēng)湊個熱鬧，提供兩組數(shù)據(jù)供大家參考2012-08-08
JavaScript.The.Good.Parts閱讀筆記（二）作用域&閉包&減緩全局空間污染
塊級作用域: 大多數(shù)使用c語言語法的語言都有塊級作用域，而JavaScript沒有塊級作用域。2010-11-11
從網(wǎng)上看到一些使用js獲取QueryString的方法，但用起來不是很理想，所以決定自己寫一個。主要原理是使用正則表達式匹配location.search中的字符串。2010-02-02
HTML DOM (Document Object Model文檔對象模型) DOM是一種與瀏覽器，平臺，語言的接口，使得你可以訪問頁面其他的標(biāo)準(zhǔn)組件. DOM是以層次結(jié)構(gòu)組織的節(jié)點或信息片斷的集合.2009-04-04
下面小編就為大家?guī)硪黄煌琷s異步函數(shù)同步的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05