`
fcjit
  • 浏览: 10050 次
  • 性别: Icon_minigender_1
  • 来自: 南京
最近访客 更多访客>>
社区版块
存档分类
最新评论

用javascript 编写的“打豆豆”游戏

阅读更多
闲来无事,花了两天时间,用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>




我是江奇

3
0
分享到:
评论
2 楼 ywp46731356 2013-01-15  
请问编写 js一般用什么编辑工具啊
1 楼 465272694 2013-01-08  
大哥,能否写点注释啊,小弟才疏学浅,希望能学习学习

相关推荐

    用javascript编写的贪吃蛇小游戏

    《用JavaScript编写的贪吃蛇小游戏详解》 贪吃蛇是一款经典的电子游戏,深受各年龄段玩家的喜爱。在网页上利用JavaScript实现贪吃蛇游戏,既可以让开发者熟悉JavaScript的基础语法,也能提升对DOM操作、事件监听等...

    javascript编写的小游戏

    JavaScript 编写的小游戏是一种利用Web技术实现的互动娱乐应用,它们可以在网页上直接运行,无需安装任何额外软件。这种技术基于JavaScript,一种广泛应用于网页开发的编程语言,结合HTML和CSS,构成了Web开发的三大...

    打豆豆小游戏,供游戏初学者参考

    "打豆豆小游戏"是一款简单而有趣的休闲游戏,适合初级游戏开发者学习和参考。这个游戏的源码揭示了许多基础的编程概念和技术,对于想要踏入游戏开发领域的人来说,是很好的学习资源。 首先,我们要理解游戏的基本...

    用 JavaScript 编写的贪吃蛇游戏 .zip

    用 JavaScript 编写的贪吃蛇游戏。JavaScript 贪吃蛇游戏这是我十多年前用 JavaScript 编写的一款基于 DOM 的贪吃蛇游戏。它给人一种怀旧的感觉。在线玩和编辑游戏!您现在可以在 codesandbox 中实时玩和编辑游戏...

    使用 JavaScript 编写的 Squareshooter 游戏及其源代码.zip

    使用 JavaScript 编写的 Squareshooter 游戏及其源代码   项目:使用 JavaScript 编写的 Squareshooter 游戏(附源代码) 这款游戏是双人游戏。这是一款使用 JavaScript 编写的射击游戏,带有门户和强化道具。在...

    用JavaScript编写的记忆配对游戏

    总的来说,"用JavaScript编写的记忆配对游戏"是一个集趣味性和教育性于一体的项目。它展示了JavaScript、HTML和基本网页开发技术的综合运用,同时也是一个提升编程技能和游戏设计能力的良好实践。无论是对编程新手...

    使用 JavaScript 编写的小猪游戏及其源代码.zip

    这是用 javascript 编写的一款简单的赌场风格游戏。您所要做的就是掷骰子,并尝试比对手更快达到 100 分。这是一款简单的骰子游戏,游戏规则非常简单。您将掷骰子并尝试获得尽可能多的积分。请记住,连续两次掷出 6 ...

    使用 JavaScript 编写的打砖块游戏(附源代码).zip

    使用 JavaScript 编写的打砖块游戏(附源代码)   项目:JavaScript 打砖块游戏(附源代码) 打砖块游戏是使用 HTML5、CSS 和 JavaScript 开发的简单项目。这款游戏是关于借助弹跳球和滑动平面来打破障碍。您可以玩...

    JavaScript编写的万年历

    JavaScript编写的万年历是一种基于Web的交互式日历应用,它利用了JavaScript这门强大的客户端脚本语言来实现动态显示日期和事件的功能。万年历通常包括年、月、日的选择,以及对特定日期的标记和注解,提供用户友好...

    使用 JavaScript 编写的足球游戏及其源代码39.zip

    项目:使用 JavaScript 编写的足球游戏(附源代码) 足球游戏仅使用 HTML、CSS 和 JavaScript。谈到游戏玩法,这款游戏的主要目标是尽可能多地进球。没有时间限制,您要做的就是保持球的位置和射门的力量。用户必须...

    使用 JavaScript 编写的 Tettet 游戏及其源代码.zip

    项目:使用 JavaScript 编写的 Tettet 游戏及其源代码 该游戏是一个使用 HTML5 和 JavaScript 开发的简单项目。这款游戏与俄罗斯方块游戏相同,但难度更大。游戏允许玩家策略性地旋转下落的方块以清除关卡。要在此...

    使用 JavaScript 编写的绞刑游戏及其源代码.zip

    项目:使用 JavaScript 编写的 Hangman 游戏(附源代码) Hangman 游戏是一个使用 HTML5、CSS 和 JavaScript 开发的简单项目。这个游戏是关于猜字母(AZ)来组成单词。如果玩家猜对了单词中的正确字母,该字母就会...

    使用 JavaScript 编写的冒险游戏(附源代码).zip

    项目:使用 JavaScript 编写的冒险游戏(附源代码) 这款游戏是单人游戏。玩家必须收集生命之心和解锁房间的钥匙。这款游戏的主要目标是收集心和钥匙,并远离警卫以求生存。当警卫触碰玩家时,玩家就会失败。 游戏...

    使用 JavaScript 编写的点击游戏源代码.zip

    这款简单的点击游戏是用 HTML、CSS 和 JavaScript 编写的。谈到游戏玩法,这款游戏的主要目标是获得更高的游戏分数。游戏过程中有时间限制,您所要做的就是在每个级别上越来越快地点击点。用户必须使用鼠标光标点击...

    使用 JavaScript 编写的平台游戏及其源代码.zip

    项目:使用 JavaScript 编写的平台游戏(附源代码) 平台游戏是一个使用 HTML、CSS 和 JavaScript 开发的简单项目。这款游戏是一款有趣且令人上瘾的游戏。用户必须将黑盒向前移动并收集黄色立方体。如果用户碰到掉落...

    使用 JavaScript 编写的射击游戏(附源代码).zip

    项目:使用 JavaScript 编写的射击游戏(附源代码) 最佳视频游戏机 关于项目 简单射击游戏是使用 HTML、CSS 和 JavaScript 开发的。谈到游戏玩法,这是一款简单的游戏,玩家必须射击所有移动的球。玩家必须使用右键...

    使用 JavaScript 编写的益智游戏(附源代码).zip

    项目:使用 JavaScript 编写的 益智游戏(附源代码)   益智游戏是一个使用 JavaScript、CSS 和 Canvas 开发的简单项目。这款游戏很有趣。玩家必须解决图像 拼图并形成原始图像。用户可以玩游戏,直到完成拼图...

    使用 JavaScript 编写 iOS 应用程序!JavaScriptBridge 提供使用 JavaScript 编写 iOS 应用程序的方法 由 JavaScriptCore.frame.zip

    使用 JavaScript 编写 iOS 应用程序!JavaScriptBridge 提供使用 JavaScript 编写 iOS 应用程序的方法。由 JavaScriptCore.framework 提供支持。JavaScriptBridge 使用 Javascript 编写 iOS 应用!JavaScriptBridge ...

    使用 JavaScript 编写的平台游戏(附源代码).zip

    项目:使用 JavaScript 编写的简单平台游戏(附源代码) 关于项目 简单平台游戏是使用 HTML、CSS 和 JavaScript 开发的。谈到游戏玩法,这款游戏的主要目标是收集硬币。您所要做的就是移动玩家,避开或躲避敌人并...

    使用 JavaScript 编写的堆栈游戏(含源代码).zip

    项目:使用 JavaScript 编写的 Stack 游戏(附源代码) Stack Game 是一个使用 JavaScript、CSS 和 Canvas 开发的简单项目。这款游戏很有趣。玩家必须通过一个接一个地堆叠瓷砖来建造堆叠塔,以获得积分。用户可以玩...

Global site tag (gtag.js) - Google Analytics