原創(chuàng)javascript小游戲?qū)崿F(xiàn)代碼
更新時(shí)間：2010年08月19日 15:01:15 作者：
javascript小游戲?qū)崿F(xiàn)代碼，喜歡用javascript實(shí)現(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);
/* -- 小豬移動(dòng)功能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)建隨機(jī)位置的金幣 begin--*/
function createbox() {
var box = ele.span();
var b = 30;
var boxLeft = Math.floor(Math.random()*760);//產(chǎn)生隨機(jī)距離
box.style.left = boxLeft + "px";
content.appendChild(box);
//box進(jìn)入游戲界面，開(kāi)始移動(dòng)，并開(kāi)始執(zhí)行函數(shù)和pig比對(duì)是否撞擊
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)生隨機(jī)距離
box.style.left = boxLeft + "px";
content.appendChild(box);
//box進(jìn)入游戲界面，開(kāi)始移動(dòng)，并開(kāi)始執(zhí)行函數(shù)和pig比對(duì)是否撞擊
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();
/*-- 開(kāi)始執(zhí)行循環(huán)添加box函數(shù) --*/
var xt = setInterval(function(){
if (lifes == false) {
clearInterval(xt);
alert("時(shí)間到，您的得分是："+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秒的時(shí)間，用鼠標(biāo)控制小豬左右移動(dòng);</p>
<p>(2) 小豬接到<img src="38.gif" />女孩，加10分；</p>
<p>(3) 小豬接到<img src="48.gif" />女孩，減10分；</p>
<input type="button" id="start" value="開(kāi)始游戲" />
</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);
/* -- 小豬移動(dòng)功能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)建隨機(jī)位置的金幣 begin--*/
function createbox() {
var box = ele.span();
var b = 30;
var boxLeft = Math.floor(Math.random()*760);//產(chǎn)生隨機(jī)距離
box.style.left = boxLeft + "px";
content.appendChild(box);
//box進(jìn)入游戲界面，開(kāi)始移動(dòng)，并開(kāi)始執(zhí)行函數(shù)和pig比對(duì)是否撞擊
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)生隨機(jī)距離
box.style.left = boxLeft + "px";
content.appendChild(box);
//box進(jìn)入游戲界面，開(kāi)始移動(dòng)，并開(kāi)始執(zhí)行函數(shù)和pig比對(duì)是否撞擊
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();
/*-- 開(kāi)始執(zhí)行循環(huán)添加box函數(shù) --*/
var xt = setInterval(function(){
if (lifes == false) {
clearInterval(xt);
alert("時(shí)間到，您的得分是："+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秒的時(shí)間，用鼠標(biāo)控制小豬左右移動(dòng);</p>
<p>(2) 小豬接到<img src="38.gif" />女孩，加10分；</p>
<p>(3) 小豬接到<img src="48.gif" />女孩，減10分；</p>
<input type="button" id="start" value="開(kāi)始游戲" />
</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
代碼打包下載
您可能感興趣的文章:
- js猜數(shù)字小游戲的簡(jiǎn)單實(shí)現(xiàn)代碼
- 12個(gè)非常有創(chuàng)意的JavaScript小游戲
- JS寫(xiě)的數(shù)字拼圖小游戲代碼[學(xué)習(xí)參考]
- Javascript編寫(xiě)2048小游戲
- javascript實(shí)現(xiàn)別踩白塊兒小游戲程序
- 由JavaScript技術(shù)實(shí)現(xiàn)的web小游戲（不含網(wǎng)游）
- 分享自己用JS做的掃雷小游戲
- 純javascript模仿微信打飛機(jī)小游戲
- JavaScript編寫(xiě)連連看小游戲
- JavaScript實(shí)現(xiàn)一個(gè)空中避難的小游戲
相關(guān)文章
一個(gè)JavaScript獲取元素當(dāng)前高度的實(shí)例
這篇文章主要為大家介紹了一個(gè)JavaScript獲取元素當(dāng)前高度的實(shí)例，比較實(shí)用，建議新手朋友們可以看看2014-10-10
基于打包工具Webpack進(jìn)行項(xiàng)目開(kāi)發(fā)實(shí)例
這篇文章主要介紹了基于打包工具Webpack進(jìn)行項(xiàng)目開(kāi)發(fā)實(shí)例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
這篇文章主要介紹了JS得到當(dāng)前時(shí)間的方法,結(jié)合具體實(shí)例形式對(duì)比分析了javascript獲取日期時(shí)間的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
js HTML5 Ajax實(shí)現(xiàn)文件上傳進(jìn)度條功能
這篇文章主要介紹了javascript實(shí)現(xiàn)文件上傳進(jìn)度條功能的相關(guān)資料啊，感興趣的朋友可以參考一下2016-02-02
在?JavaScript?中使用變量或常量之前，必須先進(jìn)行聲明，這篇文章主要介紹了JavaScript中的變量聲明與賦值,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-08-08
詳解JavaScript調(diào)用棧、尾遞歸和手動(dòng)優(yōu)化
本篇文章主要介紹了詳解JavaScript調(diào)用棧、尾遞歸和手動(dòng)優(yōu)化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
JavaScript 箭頭函數(shù)的特點(diǎn)、與普通函數(shù)的區(qū)別
這篇文章主要介紹了JavaScript 箭頭函數(shù)的特點(diǎn)、與普通函數(shù)的區(qū)別,很多情況下，箭頭函數(shù)和函數(shù)表達(dá)式創(chuàng)建的函數(shù)并無(wú)區(qū)別，只有寫(xiě)法上的不同，本文第二塊內(nèi)容將介紹箭頭函數(shù)和普通函數(shù)功能上的區(qū)別，感興趣的朋友跟隨小編一起看看吧2021-11-11
超出JavaScript安全整數(shù)限制的數(shù)字計(jì)算BigInt詳解
這篇文章給大家分享了超出JavaScript安全整數(shù)限制的數(shù)字計(jì)算BigInt的相關(guān)知識(shí)點(diǎn)，有興趣的朋友參考學(xué)習(xí)下。2018-06-06
淺談JavaScript的幾種繼承實(shí)現(xiàn)方式
本文主要介紹了淺談JavaScript的幾種繼承實(shí)現(xiàn)方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
JavaScript樹(shù)結(jié)構(gòu)深度優(yōu)先算法
這篇文章主要介紹了JavaScript樹(shù)結(jié)構(gòu)深度優(yōu)先算法，樹(shù)結(jié)構(gòu)可以說(shuō)是前端中最常見(jiàn)的數(shù)據(jù)結(jié)構(gòu)之一，比如說(shuō)DOM樹(shù)、級(jí)聯(lián)選擇、樹(shù)形組件，更多相關(guān)內(nèi)容需要的小伙伴可以參考一下2022-07-07