打豆豆小游戲 用javascript編寫的[打豆豆]小游戲
更新時(shí)間:2013年01月08日 09:00:53 作者:
用javascript 寫了一個(gè)打豆豆的游戲,至于怎么玩的就不細(xì)說(shuō)了,到網(wǎng)上搜一下就知道了,很簡(jiǎn)單,感興趣的朋友可以了解下哦
閑來(lái)無(wú)事,花了兩天時(shí)間,用javascript 寫了一個(gè)打豆豆的游戲,至于怎么玩的就不細(xì)說(shuō)了,到網(wǎng)上搜一下就知道了,很簡(jiǎn)單。
下面是源碼,發(fā)布出來(lái)供大家學(xué)習(xí)交流。
由于本程序沒(méi)有用到一個(gè)圖片,所以界面在ie下豆豆都是方形的比較扎眼,建議用chrome瀏覽器運(yùn)行,或者firefox
演示地址:http://www.imkoko.com/app/dadoudou.php
不多說(shuō),上代碼
<!DOCTYPE html>
<html>
<head>
<style>
body{font-size:12px;}
#fly{position:absolute;}
a{text-decoration:none;color:#999;}
.huabu,#main{width:600px;height:450px;position:relative;overflow:hidden;}
.b,.c{height:25px;width:25px;position:absolute;z-index:1;background:#efefef;font-size:12px;}
.c{background:#000;border-radius:12px;text-align:center;line-height:25px;color:#fff;}
.c10{background:#FDADFE}
.c1{background:#0569FF}
.c2{background:#0CCE0C}
.c3{background:#CE6C0A}
.c4{background:#FF9B05}
.c5{background:#CCCC66}
.c6{background:#CD6ACD}
.c7{background:#6DCECE}
.c8{background:#9C9C9C}
.c9{background:#FF6A6A}
#pin{z-index:3;position:absolute;width:600px;height:450px;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.5;background:#fff;}
#time,#cou,.right{position:absolute;bottom:0px;color:#999;}
#cou{left:100px;}
#menu{z-index:3;position:absolute;left:200px;top:100px;width:200px;height:300px;font-weight:bold;font-size:24px;text-align:center;}
#menu button{width:100px; height:50px;}
.right{right:0px;}
</style>
</head>
<body>
<div id="fly">
<div id="dou" class="huabu">
<div id="pin" onmousedown="event.cancelBubble=true;"></div>
<div id="menu"> <button onclick="start()" >開始</button><br><br>玩法:點(diǎn)擊空白地方,上、下、左、右如果有相同的顏色或數(shù)字就可以得分</div>
<div id="main" onmousedown="MoveObject.down(this,cc)"></div>
<div id="time">剩余時(shí)間:120</div>
<div id="cou">得分:0</div>
<div class="right">Power by <a >酷酷網(wǎng)</a></div>
</div>
</div>
<script>
/*
*作者:江奇
*演示網(wǎng)站:酷酷網(wǎng) http://www.imkoko.com/app/dadoudou.php
*程序完全免費(fèi)公開,轉(zhuǎn)載請(qǐng)保留此信息,謝謝
*/
function $(o){
return document.getElementById(o);
}
var MoveObject={
down:function (o,fun)
{
document.onselectstart=new Function("event.returnValue=false");
document.body.setAttribute('style','-moz-user-select: none;');
//e=e?e:window.event;
e=arguments.callee.caller.arguments[0] || window.event;
x=e.clientX;
y=e.clientY;
fun([x,y]);
return false;
}
};
var o=new Array();
var it=0;
var fen=0;
function ini(){
var _doc = (document.compatMode != "BackCompat") ? document.documentElement : document.body;
fly_left=_doc.scrollLeft+_doc.clientWidth/2-$('fly').offsetWidth/2;
$('fly').style.left=fly_left+'px';
for(i=0;i<15;i++){
for(j=0;j<12;j++){
tmp=document.createElement('div');
tmp.className="b";
tmp.style.left=(j*50+i%2*25)+'px';
tmp.style.top=i*25+'px';
$('main').appendChild(tmp);
}
}
for(i=0;i<24;i++){
o[i]=new Array();
}
for(i=0;i<200;i++){
var ji=cre();
tmp=document.createElement('div');
tmp.innerHTML=t;
tmp.id=ji[0]+'_'+ji[1];
tmp.className="c c"+t;
tmp.style.left=(x*25)+'px';
tmp.style.top=y*25+'px';
$('main').appendChild(tmp);
}
}
function cre(){
x=parseInt(Math.random()*24);
y=parseInt(Math.random()*15);
t=parseInt(Math.random()*10+1);
if(o[x][y]>0){
var re=cre();
return re;
}else{
o[x][y]=t;
return [x,y];
}
}
function cc(p){
x=parseInt((p[0]-$('fly').offsetLeft)/25);
y=parseInt((p[1]-$('fly').offsetTop)/25);
if(o[x][y]>0){
return false;
}else{
var finded=[];
for(i=y;i>=0;i--){
if(o[x][i]>0){
finded.push([o[x][i],x,i]);
break;
}
}
for(i=y;i<o[x].length;i++){
if(o[x][i]>0){
finded.push([o[x][i],x,i]);
break;
}
}
for(i=x;i>=0;i--){
if(o[i][y]>0){
finded.push([o[i][y],i,y]);
break;
}
}
for(i=x;i<o.length;i++){
if(o[i][y]>0){
finded.push([o[i][y],i,y]);
break;
}
}
find=0;
po(finded,0);
if(find==0){
it+=10;
}
fen=fen+find;
$('cou').innerHTML='得分:'+fen;
}
}
function po(obj,n){
a=obj[n];
tag=0;
for(j=n+1;j<obj.length;){
if(obj[j][0]==a[0]){
o[obj[j][1]][obj[j][2]]=0;
paowuxian.p($(obj[j][1]+'_'+obj[j][2]));
obj.splice(j,1);
tag=1;
find++;
}else{
j++;
}
}
if(tag==0){
n++;
}else{
o[a[1]][a[2]]=0;
paowuxian.p($(a[1]+'_'+a[2]));
find++;
obj.splice(n,1);
}
if(n<obj.length-1){
po(obj,n);
}
}
function time(){
it++;
if(it<121){
$('time').innerHTML='剩余時(shí)間:'+(121-it);
setTimeout('time()',1000);
}else{
$('pin').style.display='block';
$('menu').style.display='block';
$('menu').innerHTML='<button onclick="start()" >開始</button><br><br><br>'+'恭喜你 '+fen+' 分'
}
}
function start(){
it=0;
fen=0;
$('main').innerHTML='';
o=new Array();
ini();
$('pin').style.display='none';
$('menu').style.display='none';
time();
}
ini();
var paowuxian={
_type:[],
bot:0,
o:[],
ini:function(o){
for(i=0;i<this.o.length;i++){
if(this.o[i]==o){
return i;
}
}
for(i=0;i<this.o.length;i++){
if(this._type[i].sta==-1){
break;
}
}
o.style.position='absolute';
this.o[i]=o;
this._type[i]={l:o.offsetLeft,t:o.offsetTop,s:0,nt:0,sta:1};
return i;
},
p:function(o){
this.ini(o);
var _doc = (document.compatMode != "BackCompat") ? document.documentElement : document.body;
var sctop= document.documentElement.scrollTop||document.body.scrollTop;
fly_top=sctop+_doc.clientHeight
this.bot=fly_top-30;
setTimeout("paowuxian.dos("+i+")",20);
},
dos:function(i){
if(this._type[i].nt>this.bot){
if(this._type[i].sta==1){
document.body.removeChild(this.o[i]);
this._type.sta=-1;
}
}else{
this._type[i].l=this._type[i].l+3;
this._type[i].s++;
this._type[i].nt=this._type[i].t-5*this._type[i].s+0.5*1*this._type[i].s*this._type[i].s;
this.o[i].style.top=this._type[i].nt+'px';
this.o[i].style.left=this._type[i].l+'px';
setTimeout("paowuxian.dos("+i+")",20);
}
}
};
</script>
</body>
</html>
我是江奇
下面是源碼,發(fā)布出來(lái)供大家學(xué)習(xí)交流。
由于本程序沒(méi)有用到一個(gè)圖片,所以界面在ie下豆豆都是方形的比較扎眼,建議用chrome瀏覽器運(yùn)行,或者firefox
演示地址:http://www.imkoko.com/app/dadoudou.php
不多說(shuō),上代碼
復(fù)制代碼 代碼如下:
<!DOCTYPE html>
<html>
<head>
<style>
body{font-size:12px;}
#fly{position:absolute;}
a{text-decoration:none;color:#999;}
.huabu,#main{width:600px;height:450px;position:relative;overflow:hidden;}
.b,.c{height:25px;width:25px;position:absolute;z-index:1;background:#efefef;font-size:12px;}
.c{background:#000;border-radius:12px;text-align:center;line-height:25px;color:#fff;}
.c10{background:#FDADFE}
.c1{background:#0569FF}
.c2{background:#0CCE0C}
.c3{background:#CE6C0A}
.c4{background:#FF9B05}
.c5{background:#CCCC66}
.c6{background:#CD6ACD}
.c7{background:#6DCECE}
.c8{background:#9C9C9C}
.c9{background:#FF6A6A}
#pin{z-index:3;position:absolute;width:600px;height:450px;filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5; opacity: 0.5;background:#fff;}
#time,#cou,.right{position:absolute;bottom:0px;color:#999;}
#cou{left:100px;}
#menu{z-index:3;position:absolute;left:200px;top:100px;width:200px;height:300px;font-weight:bold;font-size:24px;text-align:center;}
#menu button{width:100px; height:50px;}
.right{right:0px;}
</style>
</head>
<body>
<div id="fly">
<div id="dou" class="huabu">
<div id="pin" onmousedown="event.cancelBubble=true;"></div>
<div id="menu"> <button onclick="start()" >開始</button><br><br>玩法:點(diǎn)擊空白地方,上、下、左、右如果有相同的顏色或數(shù)字就可以得分</div>
<div id="main" onmousedown="MoveObject.down(this,cc)"></div>
<div id="time">剩余時(shí)間:120</div>
<div id="cou">得分:0</div>
<div class="right">Power by <a >酷酷網(wǎng)</a></div>
</div>
</div>
<script>
/*
*作者:江奇
*演示網(wǎng)站:酷酷網(wǎng) http://www.imkoko.com/app/dadoudou.php
*程序完全免費(fèi)公開,轉(zhuǎn)載請(qǐng)保留此信息,謝謝
*/
function $(o){
return document.getElementById(o);
}
var MoveObject={
down:function (o,fun)
{
document.onselectstart=new Function("event.returnValue=false");
document.body.setAttribute('style','-moz-user-select: none;');
//e=e?e:window.event;
e=arguments.callee.caller.arguments[0] || window.event;
x=e.clientX;
y=e.clientY;
fun([x,y]);
return false;
}
};
var o=new Array();
var it=0;
var fen=0;
function ini(){
var _doc = (document.compatMode != "BackCompat") ? document.documentElement : document.body;
fly_left=_doc.scrollLeft+_doc.clientWidth/2-$('fly').offsetWidth/2;
$('fly').style.left=fly_left+'px';
for(i=0;i<15;i++){
for(j=0;j<12;j++){
tmp=document.createElement('div');
tmp.className="b";
tmp.style.left=(j*50+i%2*25)+'px';
tmp.style.top=i*25+'px';
$('main').appendChild(tmp);
}
}
for(i=0;i<24;i++){
o[i]=new Array();
}
for(i=0;i<200;i++){
var ji=cre();
tmp=document.createElement('div');
tmp.innerHTML=t;
tmp.id=ji[0]+'_'+ji[1];
tmp.className="c c"+t;
tmp.style.left=(x*25)+'px';
tmp.style.top=y*25+'px';
$('main').appendChild(tmp);
}
}
function cre(){
x=parseInt(Math.random()*24);
y=parseInt(Math.random()*15);
t=parseInt(Math.random()*10+1);
if(o[x][y]>0){
var re=cre();
return re;
}else{
o[x][y]=t;
return [x,y];
}
}
function cc(p){
x=parseInt((p[0]-$('fly').offsetLeft)/25);
y=parseInt((p[1]-$('fly').offsetTop)/25);
if(o[x][y]>0){
return false;
}else{
var finded=[];
for(i=y;i>=0;i--){
if(o[x][i]>0){
finded.push([o[x][i],x,i]);
break;
}
}
for(i=y;i<o[x].length;i++){
if(o[x][i]>0){
finded.push([o[x][i],x,i]);
break;
}
}
for(i=x;i>=0;i--){
if(o[i][y]>0){
finded.push([o[i][y],i,y]);
break;
}
}
for(i=x;i<o.length;i++){
if(o[i][y]>0){
finded.push([o[i][y],i,y]);
break;
}
}
find=0;
po(finded,0);
if(find==0){
it+=10;
}
fen=fen+find;
$('cou').innerHTML='得分:'+fen;
}
}
function po(obj,n){
a=obj[n];
tag=0;
for(j=n+1;j<obj.length;){
if(obj[j][0]==a[0]){
o[obj[j][1]][obj[j][2]]=0;
paowuxian.p($(obj[j][1]+'_'+obj[j][2]));
obj.splice(j,1);
tag=1;
find++;
}else{
j++;
}
}
if(tag==0){
n++;
}else{
o[a[1]][a[2]]=0;
paowuxian.p($(a[1]+'_'+a[2]));
find++;
obj.splice(n,1);
}
if(n<obj.length-1){
po(obj,n);
}
}
function time(){
it++;
if(it<121){
$('time').innerHTML='剩余時(shí)間:'+(121-it);
setTimeout('time()',1000);
}else{
$('pin').style.display='block';
$('menu').style.display='block';
$('menu').innerHTML='<button onclick="start()" >開始</button><br><br><br>'+'恭喜你 '+fen+' 分'
}
}
function start(){
it=0;
fen=0;
$('main').innerHTML='';
o=new Array();
ini();
$('pin').style.display='none';
$('menu').style.display='none';
time();
}
ini();
var paowuxian={
_type:[],
bot:0,
o:[],
ini:function(o){
for(i=0;i<this.o.length;i++){
if(this.o[i]==o){
return i;
}
}
for(i=0;i<this.o.length;i++){
if(this._type[i].sta==-1){
break;
}
}
o.style.position='absolute';
this.o[i]=o;
this._type[i]={l:o.offsetLeft,t:o.offsetTop,s:0,nt:0,sta:1};
return i;
},
p:function(o){
this.ini(o);
var _doc = (document.compatMode != "BackCompat") ? document.documentElement : document.body;
var sctop= document.documentElement.scrollTop||document.body.scrollTop;
fly_top=sctop+_doc.clientHeight
this.bot=fly_top-30;
setTimeout("paowuxian.dos("+i+")",20);
},
dos:function(i){
if(this._type[i].nt>this.bot){
if(this._type[i].sta==1){
document.body.removeChild(this.o[i]);
this._type.sta=-1;
}
}else{
this._type[i].l=this._type[i].l+3;
this._type[i].s++;
this._type[i].nt=this._type[i].t-5*this._type[i].s+0.5*1*this._type[i].s*this._type[i].s;
this.o[i].style.top=this._type[i].nt+'px';
this.o[i].style.left=this._type[i].l+'px';
setTimeout("paowuxian.dos("+i+")",20);
}
}
};
</script>
</body>
</html>
我是江奇
您可能感興趣的文章:
- 用js做一個(gè)小游戲平臺(tái) (一)
- 用javascript做一個(gè)小游戲平臺(tái) (二) 游戲選擇器
- 12個(gè)非常有創(chuàng)意的JavaScript小游戲
- 由JavaScript技術(shù)實(shí)現(xiàn)的web小游戲(不含網(wǎng)游)
- 原創(chuàng)javascript小游戲?qū)崿F(xiàn)代碼
- JavaScript打字小游戲代碼
- js猜數(shù)字小游戲的簡(jiǎn)單實(shí)現(xiàn)代碼
- JavaScript制作windows經(jīng)典掃雷小游戲
- Javascript編寫2048小游戲
- 純javascript模仿微信打飛機(jī)小游戲
- javascript實(shí)現(xiàn)別踩白塊兒小游戲程序
相關(guān)文章
JavaScript 數(shù)組常見(jiàn)操作技巧 (二)
這篇文章主要介紹了JavaScript 數(shù)組常見(jiàn)操作技巧,上一篇文章已經(jīng)給大家分享了(一),下面緊接上一篇文章分享下面技巧,需要的小伙伴可以參考一下2022-02-02javascript表單驗(yàn)證以及正則表達(dá)式舉例詳解
正則表達(dá)式描述了一種字符串匹配的模式,可以用來(lái)檢查一個(gè)串是否含有某種子串、將匹配的子串替換或者從某個(gè)串中取出符合某個(gè)條件的子串等,常用于表單驗(yàn)證等,下面這篇文章主要給大家介紹了關(guān)于javascript表單驗(yàn)證以及正則表達(dá)式的相關(guān)資料,需要的朋友可以參考下2023-05-05JavaScript實(shí)現(xiàn)的簡(jiǎn)單加密解密操作示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的簡(jiǎn)單加密解密操作,涉及javascript基于charCodeAt與fromCharCode的字符串編碼與解碼操作相關(guān)使用技巧,需要的朋友可以參考下2018-06-065秒后跳轉(zhuǎn)效果(setInterval/SetTimeOut)
實(shí)現(xiàn)5秒后自動(dòng)跳轉(zhuǎn)效果有兩種方式setInterval與SetTimeOut,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下2013-05-05一個(gè)用js實(shí)現(xiàn)過(guò)濾重復(fù)字符的函數(shù)
一個(gè)用js實(shí)現(xiàn)過(guò)濾重復(fù)字符的函數(shù)...2007-08-08JavaScript設(shè)計(jì)模式之單例模式簡(jiǎn)單實(shí)例教程
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之單例模式,結(jié)合簡(jiǎn)單實(shí)例形式分析了單例模式的概念、功能及javascript定義與使用單例模式相關(guān)操作技巧,需要的朋友可以參考下2018-07-07javascript中的replace函數(shù)(帶注釋demo)
在js中有兩個(gè)replace函數(shù) 一個(gè)是location.replace(url) 跳轉(zhuǎn)到一個(gè)新的url.一個(gè)string.replace("xx","yy") 替換字符串 返回一個(gè)新的字符串,該方法并不改變字符串本身。下面通過(guò)本文給大家介紹javascript中的replace函數(shù)2018-01-01