原文链接：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经典拼板游戏
时间： 2024-10-22 21:38:31