打豆豆小游戏 用javascript编写的[打豆豆]小游戏


Posted in Javascript onJanuary 08, 2013

闲来无事,花了两天时间,用javascript 写了一个打豆豆的游戏,至于怎么玩的就不细说了,到网上搜一下就知道了,很简单。

下面是源码,发布出来供大家学习交流。
由于本程序没有用到一个图片,所以界面在ie下豆豆都是方形的比较扎眼,建议用chrome浏览器运行,或者firefox
演示地址:http://www.imkoko.com/app/dadoudou.php
不多说,上代码

<!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>玩法:点击空白地方,上、下、左、右如果有相同的颜色或数字就可以得分</div> 
<div id="main" onmousedown="MoveObject.down(this,cc)"></div> 
<div id="time">剩余时间:120</div> 
<div id="cou">得分:0</div> 
<div class="right">Power by <a href="http://www.imkoko.com">酷酷网</a></div> 
</div> 
</div> 
<script> 
/* 
*作者:江奇 
*演示网站:酷酷网 http://www.imkoko.com/app/dadoudou.php 
*程序完全免费公开,转载请保留此信息,谢谢 
*/ 
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='剩余时间:'+(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>

我是江奇
Javascript 相关文章推荐
javascript实现二分查找法实现代码
Nov 12 Javascript
《JavaScript函数式编程》读后感
Aug 07 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
Extjs实现下拉菜单效果
Apr 01 Javascript
深入浅析JS Function()构造函数
Aug 22 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
详解vue-Resource(与后端数据交互)
Jan 16 Javascript
支持移动端原生js轮播图
Feb 16 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
js实现GIF图片的分解和合成
Oct 24 Javascript
js实现星星海特效的示例
Sep 28 Javascript
jQuery.buildFragment使用方法及思路分析
Jan 07 #Javascript
js新闻滚动 js如何实现新闻滚动效果
Jan 07 #Javascript
YUI Compressor压缩JavaScript原理及微优化
Jan 07 #Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 #Javascript
jquery实现marquee效果(文字或者图片的水平垂直滚动)
Jan 07 #Javascript
jquery乱码与contentType属性设置问题解决方案
Jan 07 #Javascript
jQuery插件开发基础简单介绍
Jan 07 #Javascript
You might like
使用PHP静态变量当缓存的方法
2013/11/13 PHP
WIN8.1下搭建PHP5.6环境
2015/04/29 PHP
php语言中使用json的技巧及json的实现代码详解
2015/10/27 PHP
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
Javascript中JSON数据分组优化实践及JS操作JSON总结
2017/12/22 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
2018/05/08 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
vue组件暴露和.js文件暴露接口操作
2020/08/11 Javascript
基于js实现的图片拖拽排序源码实例
2020/11/04 Javascript
python调用cmd复制文件代码分享
2013/12/27 Python
python requests 使用快速入门
2017/08/31 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
python中while和for的区别总结
2019/06/28 Python
python文字转语音的实例代码分析
2019/11/12 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
AmazeUI 输入框组的示例代码
2020/08/14 HTML / CSS
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
美国智能家居专家:tink
2019/06/04 全球购物
Linux文件操作命令都有哪些
2015/02/27 面试题
医学专业大学生求职的自我评价
2013/11/27 职场文书
家具商场的活动方案
2014/08/16 职场文书
庆六一宣传标语
2014/10/08 职场文书
生活小常识广播稿
2015/08/19 职场文书
SpringBoot使用AOP实现统计全局接口访问次数详解
2022/06/16 Java/Android
hive数据仓库新增字段方法
2022/06/25 数据库