原創(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秒的時間，用鼠標控制小豬左右移動;</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">分數(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
代碼打包下載
復制代碼 代碼如下:
<!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秒的時間，用鼠標控制小豬左右移動;</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">分數(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)文章
這篇文章主要為大家介紹了一個JavaScript獲取元素當前高度的實例，比較實用，建議新手朋友們可以看看2014-10-10
這篇文章主要介紹了基于打包工具Webpack進行項目開發(fā)實例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要介紹了JS得到當前時間的方法,結(jié)合具體實例形式對比分析了javascript獲取日期時間的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
js HTML5 Ajax實現(xiàn)文件上傳進度條功能
這篇文章主要介紹了javascript實現(xiàn)文件上傳進度條功能的相關(guān)資料啊，感興趣的朋友可以參考一下2016-02-02
在?JavaScript?中使用變量或常量之前，必須先進行聲明，這篇文章主要介紹了JavaScript中的變量聲明與賦值,本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-08-08
詳解JavaScript調(diào)用棧、尾遞歸和手動優(yōu)化
本篇文章主要介紹了詳解JavaScript調(diào)用棧、尾遞歸和手動優(yōu)化，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript 箭頭函數(shù)的特點、與普通函數(shù)的區(qū)別
這篇文章主要介紹了JavaScript 箭頭函數(shù)的特點、與普通函數(shù)的區(qū)別,很多情況下，箭頭函數(shù)和函數(shù)表達式創(chuàng)建的函數(shù)并無區(qū)別，只有寫法上的不同，本文第二塊內(nèi)容將介紹箭頭函數(shù)和普通函數(shù)功能上的區(qū)別，感興趣的朋友跟隨小編一起看看吧2021-11-11
超出JavaScript安全整數(shù)限制的數(shù)字計算BigInt詳解
這篇文章給大家分享了超出JavaScript安全整數(shù)限制的數(shù)字計算BigInt的相關(guān)知識點，有興趣的朋友參考學習下。2018-06-06
本文主要介紹了淺談JavaScript的幾種繼承實現(xiàn)方式，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
JavaScript樹結(jié)構(gòu)深度優(yōu)先算法
這篇文章主要介紹了JavaScript樹結(jié)構(gòu)深度優(yōu)先算法，樹結(jié)構(gòu)可以說是前端中最常見的數(shù)據(jù)結(jié)構(gòu)之一，比如說DOM樹、級聯(lián)選擇、樹形組件，更多相關(guān)內(nèi)容需要的小伙伴可以參考一下2022-07-07