打豆豆小游戏 用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 window对象属性整理
Oct 24 Javascript
window.onresize 多次触发的解决方法
Nov 08 Javascript
javascript打印输出json实例
Nov 11 Javascript
jQuery+ajax中getJSON() 用法实例
Dec 22 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
微信小程序(应用号)简单实例应用及实例详解
Sep 26 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
微信小程序实用代码段(收藏版)
Dec 17 Javascript
详解JavaScript作用域 闭包
Jul 29 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获取地址栏信息的代码
2008/10/08 PHP
php 保留字列表
2012/10/04 PHP
两种php实现图片上传的方法
2016/01/22 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
基于Laravel 多个中间件的执行顺序详解
2019/10/21 PHP
为超链接加上disabled后的故事
2010/12/10 Javascript
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
JS定时关闭窗口的实例
2013/05/22 Javascript
javascript动态控制服务器控件实例
2014/09/05 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
Node爬取大批量文件的方法示例
2019/06/28 Javascript
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
vue 添加和编辑用同一个表单,el-form表单提交后清空表单数据操作
2020/08/03 Javascript
Python中subprocess的简单使用示例
2015/07/28 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
python爬虫爬取微博评论案例详解
2019/03/27 Python
python正则表达式实例代码
2020/03/03 Python
Python MySQLdb 执行sql语句时的参数传递方式
2020/03/04 Python
Django 404、500页面全局配置知识点详解
2020/03/10 Python
预订全球最佳旅行体验:Viator
2018/03/30 全球购物
澳大利亚领先的女帽及配饰公司:Morgan&Taylor
2019/12/01 全球购物
英语商务邀请函范文
2014/01/16 职场文书
培训楼经理岗位责任制
2014/02/10 职场文书
岗位廉洁从政承诺书
2014/03/27 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
故意伤害罪辩护词
2015/05/21 职场文书
转学证明范本
2015/06/19 职场文书
投诉信范文
2015/07/02 职场文书
开学典礼校长致辞
2015/07/29 职场文书
Redis+AOP+自定义注解实现限流
2022/06/28 Redis