网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

纯js拼图游戏源码

关注我吧
 2011/9/2 15:06:06 阅读次数:4000

今天随手写了个js的拼图游戏!这样休息的时候可以玩玩。呵,因为时间有限只写了这么多。大家可以自己去改善下,做成自己想要的效果。

JS重现_经典拼板游戏,如果看不到图片,请在刷新几遍,有可能图片加载中。拼图游戏,之前玩过吧,一款小巧的益智游戏,通过编写JS游戏,可提高你对JS原理的理解。

废话不多说了直接贴代码了:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯js拼图游戏源码http://www.86y.org幸凡在线学习网</title>
</head>
<body>
<style>
*{margin:0;padding:0;}
.shell{margin:20px auto;position:relative;width:499px;height:299px;border:#666 10px solid;background:#FAFAFA;}
.shell p{position:absolute;width:99px;height:99px;background:url(http://img.vlongbiz.com/news/h010/h07/img200906291517352301.jpg) no-repeat 0 0;cursor:pointer;}
.bar{margin:0 auto;width:499px;font:600 16px/1.8em Verdana;}
.bar em{font-style:normal;margin-right:10px;color:#F00;}
#showall{font:12px/1.8em Verdana;cursor:pointer;}
#show{background:url(http://img.vlongbiz.com/news/h010/h07/img200906291517352301.jpg) no-repeat 0 0;}
</style>
<div id="shell" class="shell"></div>
<div id="bar" class="bar">
	<b>计时:</b><em id="times">00:00</em>
	<b>步数:</b><em id="steps">0</em>
	<select id="hard">
		<option value="1">入门模式</option>
		<option value="7">简单模式</option>
		<option value="81">一般模式</option>
		<option value="201">困难模式</option>
		<option value="501">超难模式</option>
	</select>
	<b id="showall">查看原图</b>
</div>
<div id="show" class="shell" style="display:none;"></div>
<script type="text/javascript">
speller={
	init:function(n){
		this.hard=n||5;
		this.step=this.useTime=0;
		this.blank=14;
		this.createGrid();
		clearInterval(this.timer);
		this.timer=setInterval(function(){
			speller.useTime++;/* 累加时间并格式化显示 */
			document.getElementById("times").innerHTML=(''0''+parseInt(speller.useTime/60)).slice(-2)+'':''+(''0''+speller.useTime%60).slice(-2);
		},1000);
	}
	,createGrid:function(){
		var X=function(n){return n%5*100;},Y=function(n){return parseInt(n/5)*100;};
		for(var i=0,html=[];i<15;i++){
			html.push(''<p onclick="speller.move(this);" id="''+i+''" class="''+i+''"  style="left:''+X(i)+''px;top:''+Y(i)+''px;background-position:-''+X(i)+''px -''+Y(i)+''px;"></p>'');
		}
		document.getElementById("shell").innerHTML=html.join('''');
		this.random();
	}
	,random:function(p){
		var ps=document.getElementById("shell").getElementsByTagName("P"),l=ps.length,me=this;
		ps[this.blank].style.display="none";
		var en=function(n){
			var arr=[];
			if(n<14 && n%5!=4){arr.push(n+1);}
			if(n>0 && n%5!=0){arr.push(n-1);}
			if(n>4){arr.push(n-5);}
			if(n<10){arr.push(n+5);}
			return arr[parseInt(Math.random()*arr.length)]*1;
		}
		var getp=function(n){for(var i=0;i<l;i++){if(ps[i].className==n){return ps[i];}}}
		for(var i=0;i<me.hard;i++){
			this.move2(getp(en(this.blank*1)));
		}
	}
	,move2:function(p){
		var pos=p.className*1,POS=this.blank*1,abs=Math.abs(pos-POS),max=pos>POS?pos:POS;
		p.style.top=parseInt(POS/5)*100+"px";
		p.style.left=POS%5*100+"px";
		p.className=POS;this.blank=pos;
	}
	,move:function(p){
		var pos=p.className*1,POS=this.blank*1,abs=Math.abs(pos-POS),max=pos>POS?pos:POS;
		if(abs==5){
			this.fx(parseInt(pos/5)*100,parseInt(POS/5)*100,function(x){p.style.top=x+"px";},function(){},100,.4)
		}else if(abs==1&&max%5!=0){
			this.fx(pos%5*100,POS%5*100,function(x){p.style.left=x+"px";},function(){},100,.4)
		}else{return;}
		p.className=POS;this.blank=pos;document.getElementById("steps").innerHTML=++this.step;
		if(this.check()){
			var me=this,last=document.getElementById("shell").getElementsByTagName("P")[14];
			last.style.display="block";
			this.blank=10000;
			this.fx(0,100,function(x){last.style.opacity=x/100;last.style.filter="alpha(opacity="+x+")";},function(){alert(''你真棒!再来一次吧!'');me.init();},200,1)
		}
	}
	,check:function(){
		var p=document.getElementById("shell").getElementsByTagName("P");
		for(var i=0,l=p.length;i<l;i++){if(p[i].className!=p[i].id){return false;}}
		return true;
	}
	,fx:function(f,t,fn,end,tm,pow){
		var D=Date,d=new D,e,c=tm||240,pow=pow||2;
		return e=setInterval(function (){
			var z=Math.min(1,(new D-d)/c);
			(false===fn(+f+(t-f)*Math.pow(z,pow),z)||z==1) && end && end(clearTimeout(e));
		},10);
	}
}
speller.init(document.getElementById("hard").value);
document.getElementById("showall").onclick=function(){
	document.getElementById("show").style.display=document.getElementById("show").style.display=="none"?"":"none";
}
document.getElementById("hard").onchange=function(){
	speller.init(this.value);
}
document.all&&document.execCommand("BackgroundImageCache", false, true);
</script>
</body>
</html>

(完)


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭