闲来无事，花了两天时间，用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 [url=http://www.imkoko.com]酷酷网[/url]</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实现贪吃蛇游戏，既可以让开发者熟悉JavaScript的基础语法，也能提升对DOM操作、事件监听等...
项目：使用 JavaScript 编写的经典 台球游戏（附源代码） 经典的javascript 台球游戏是一款基于球杆或台球的游戏。整个编程都使用 HTML、CSS 和 JavaScript。这款游戏完全使用 javascript 编写，并使用了一些精灵...
JavaScript 编写的小游戏是一种利用Web技术实现的互动娱乐应用，它们可以在网页上直接运行，无需安装任何额外软件。这种技术基于JavaScript，一种广泛应用于网页开发的编程语言，结合HTML和CSS，构成了Web开发的三大...
"打豆豆小游戏"是一款简单而有趣的休闲游戏，适合初级游戏开发者学习和参考。这个游戏的源码揭示了许多基础的编程概念和技术，对于想要踏入游戏开发领域的人来说，是很好的学习资源。 首先，我们要理解游戏的基本...
用 JavaScript 编写的贪吃蛇游戏。JavaScript 贪吃蛇游戏这是我十多年前用 JavaScript 编写的一款基于 DOM 的贪吃蛇游戏。它给人一种怀旧的感觉。在线玩和编辑游戏！您现在可以在 codesandbox 中实时玩和编辑游戏...
总的来说，"用JavaScript编写的记忆配对游戏"是一个集趣味性和教育性于一体的项目。它展示了JavaScript、HTML和基本网页开发技术的综合运用，同时也是一个提升编程技能和游戏设计能力的良好实践。无论是对编程新手...
使用 JavaScript 编写的 Pong 游戏及其源代码 项目：使用 JavaScript 编写的 Pong 游戏及其源代码 Pong Game 是使用 HTML 和 JavaScript 开发的。这是一款离线模式游戏。这是一款街机网球运动视频游戏，具有 2 个...
JavaScript编写的万年历是一种基于Web的交互式日历应用，它利用了JavaScript这门强大的客户端脚本语言来实现动态显示日期和事件的功能。万年历通常包括年、月、日的选择，以及对特定日期的标记和注解，提供用户友好...
项目：使用 JavaScript 编写的足球游戏（附源代码） 足球游戏仅使用 HTML、CSS 和 JavaScript。谈到游戏玩法，这款游戏的主要目标是尽可能多地进球。没有时间限制，您要做的就是保持球的位置和射门的力量。用户必须...
这款游戏完全是用 javascript 制作的。游戏开发过程中没有使用任何框架。 演示： 该项目为国外大神项目，可以作为毕业设计的项目，也可以作为大作业项目，不用担心代码重复，设计重复等，如果需要对项目进行修改，...
使用 JavaScript 编写 iOS 应用程序！JavaScriptBridge 提供使用 JavaScript 编写 iOS 应用程序的方法。由 JavaScriptCore.framework 提供支持。JavaScriptBridge 使用 Javascript 编写 iOS 应用！JavaScriptBridge ...
项目：使用 JavaScript 编写的 Stack 游戏（附源代码） Stack Game 是一个使用 JavaScript、CSS 和 Canvas 开发的简单项目。这款游戏很有趣。玩家必须通过一个接一个地堆叠瓷砖来建造堆叠塔，以获得积分。用户可以玩...
使用 JavaScript 编写的记忆游戏（附源代码） 项目：JavaScript 记忆游戏（附源代码） 记忆检查游戏是一个使用 HTML5、CSS 和 JavaScript 开发的简单项目。这个游戏是关于测试你的短期 记忆技能。玩这个游戏 时...
使用 JavaScript 编写的井字游戏（附源代码） 项目：使用 JavaScript 编写的井字游戏（附源代码） 井字游戏是一个使用 JavaScript、CSS 和 Html 开发的简单项目。这款游戏很有趣，让人上瘾。我们需要两个玩家来玩这...
项目：用 Javascript 编写的 Dental Defender 游戏 牙齿防御者游戏是一个 HTML5 和 JavaScript 项目。游戏看起来很棒，玩起来很有趣。这款游戏使用了 Phaser框架。如果你想编写一个简单的游戏，那么这款射击游戏...
项目：使用 JavaScript 编写的诺基亚贪吃蛇游戏（附源代码） 诺基亚贪吃蛇游戏是一款单人游戏。玩家必须在有边框的平面上控制蓝色矩形框（称为蛇）。这款游戏非常受欢迎且有趣。您只需按任意箭头键即可开始移动蛇，...
在本项目中，我们将探讨如何使用JavaScript来实现一个经典的打飞机游戏。JavaScript是一种广泛用于网页动态效果和交互的编程语言，它可以与HTML和CSS紧密结合，为用户带来丰富的用户体验。在这个过程中，我们将涉及...
这款游戏使用 JavaScript 语言GruntJs开发。这款游戏是之前游戏的翻版，但采用的是网页版。这款游戏非常有趣。如果您的工作需要，可以对项目进行一些更改。 要运行此项目，您需要 在计算机上安装GruntJs和 NodeJs，...
使用 JavaScript 编写的简单贪吃蛇游戏（附源代码） 项目：使用 JavaScript 编写的简单贪吃蛇游戏（附源代码） 简单的贪吃蛇游戏是一款单人游戏。在这里，玩家必须控制有边框的平面上的黑色矩形框（称为蛇）。这款...
项目：使用 JavaScript 编写的杂货店游戏（附源代码） 杂货店游戏是一个使用 JavaScript、CSS 和 HTML 画布开发的简单项目。这款游戏很有趣。在这个游戏中，玩家在杂货店。玩家决心做出健康的选择，所以他/她只需将...