打豆豆小游戏 用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 限制输入和粘贴(IE,firefox测试通过)
Nov 14 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
Mar 19 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
javascript弹出层输入框(示例代码)
Dec 11 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
在Node.js中使用HTTP上传文件的方法
Jun 23 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
Apr 13 Javascript
javascript开发实现贪吃蛇游戏
Jul 31 Javascript
vue调用本地摄像头实现拍照功能
Aug 14 Javascript
微信小程序实现点赞业务
Feb 10 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数组最大值,最小值的代码
2011/10/31 PHP
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
64位windows系统下安装Memcache缓存
2015/12/06 PHP
ThinkPHP5.0框架验证码功能实现方法【基于第三方扩展包】
2019/03/11 PHP
javascript Discuz代码中的msn聊天小功能
2008/05/25 Javascript
JavaScript 密码强度判断代码
2009/09/05 Javascript
js 多浏览器分别判断代码
2010/04/01 Javascript
23个超流行的jQuery相册插件整理分享
2011/04/25 Javascript
日期处理的js库(迷你版)--自建js库总结
2011/11/21 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
2016/09/05 Javascript
node.js学习之交互式解释器REPL详解
2016/12/08 Javascript
浅谈jquery中ajax跨域提交的时候会有2次请求的问题
2017/11/10 jQuery
一文看懂如何简单实现节流函数和防抖函数
2019/09/05 Javascript
Python os模块学习笔记
2015/06/21 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
python opencv实现任意角度的透视变换实例代码
2018/01/12 Python
Python Pywavelet 小波阈值实例
2019/01/09 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
Python中的list与tuple集合区别解析
2019/10/12 Python
python实现串口通信的示例代码
2020/02/10 Python
Python连接HDFS实现文件上传下载及Pandas转换文本文件到CSV操作
2020/06/06 Python
婴儿鞋,独特的婴儿服装和配件:Zutano
2018/11/03 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
会计电算化应届生求职信
2013/11/03 职场文书
小学数学国培感言
2014/03/10 职场文书
教师反腐倡廉演讲稿
2014/09/03 职场文书
小学生安全教育广播稿
2014/10/20 职场文书
西柏坡导游词
2015/02/05 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
《我的美好婚事》动画化决定纪念插画与先导PV公开
2022/04/06 日漫
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL