JS经典拼板游戏

浏览数：42 / 时间：2015年06月09日

原文链接：http://www.guimigame.com/thread-49-1-1.html，对于代码有什么不明白的地方，可以到这里给我发问哦！

废话不多说了，直接上代码！

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS重现_经典拼板游戏</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://www.guimigame.com/data/attachment/portal/201405/07/115743h7mwmw3k6ew0z6lc.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://www.guimigame.com/data/attachment/portal/201405/07/115743h7mwmw3k6ew0z6lc.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="4">简单模式</option>
		<option value="8">一般模式</option>
		<option value="16">困难模式</option>
		<option value="32">超难模式</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;
		this.step=this.useTime=0;
		this.blank = 14;			// 设置第15块为空白
		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;};
		var Y=function(n){return parseInt(n/5) * 100;};
		for(var i = 0, html = []; i < 15; i++)
		{
			// 注意speller.move(this);
			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>‘);
		}
		// 将html数组放到id="shell"的div中。注:可以用firedebug查看哦！
		document.getElementById("shell").innerHTML = html.join(‘‘);
		this.random();
	},
	random:function()
	{
		// 这里获取的ps是上面document.getElementById("shell").innerHTML = html.join(‘‘);的结果，ps是数组
		var ps = document.getElementById("shell").getElementsByTagName("P");
		var l  = ps.length;
		var me = this;
		ps[this.blank].style.display = "none";

		function GetRandomNum()
		{    
			var num = (0 + Math.round(Math.random() * 14));  
			if (num == this.blank) 
			{
				return GetRandomNum();
			}
			return num;
		}   
		var en = function()
		{
			return parseInt(Math.random() * l);
		}
		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(GetRandomNum()));
		}
	},
	move2:function(p)
	{
		var pos = p.className;
		var POS = this.blank;
		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;
		var POS = this.blank;
		var abs = Math.abs(pos-POS);
		var 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;
			var 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;
		var d = new D;
		var e; 
		var c = tm;
		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);


window.open(‘http://www.guimigame.com/thread-49-1-1.html‘);

</script>
<h3>原文链接：<a href="http://www.guimigame.com/thread-49-1-1.html">http://www.guimigame.com/thread-49-1-1.html</a></h3>
</body>
</html>

JS经典拼板游戏,古老的榕树,5-wow.com

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JS经典拼板游戏