javascript原生小练习（三）--拼图小游戏

function setClass(obj,classname)
{
//alert(obj.className)
var reg =new RegExp("(\\s|^)" + classname + "(\\s|$)");//前面有空格或者以classname为开头，后面有空格或者以classname为结尾
return {
hasClass : obj.className.match(reg),
addClass : function(){
if(!this.hasClass)
{
obj.className += " "+classname;
}
},
removeClass : function(){
if(this.hasClass)
{

obj.className = obj.className.replace(reg,"");
}
}
}
}

function pintuGame(id)
{
var arr = [
{num:1,x:0,y:0},
{num:2,x:0,y:0},
{num:3,x:0,y:0},
{num:4,x:0,y:0},
{num:5,x:0,y:0},
{num:6,x:0,y:0},
{num:7,x:0,y:0},
{num:8,x:0,y:0},
{num:9,x:0,y:0}
],
bg = "http://ww1.sinaimg.cn/thumb150/005YV5glgw1f1n1ric7uij30c80c8aan.jpg",
firstClick = null,
ifComplete = false,
step = 0,
obj = document.getElementById("js-pintu").getElementsByTagName("ul")[0];

arr = arr.sort(randomArr);//随机排列拼图
resetHtml(arr);//重置开始

function randomArr(a,b)
{
return Math.random() - 0.5;
}
function resetHtml(array)
{
var t ="";
for(var i = 0;i < array.length;i++)
{
array[i].x = - ((array[i].num - 1) % Math.sqrt(array.length))*50;
array[i].y = - parseInt((array[i].num - 1) / Math.sqrt(array.length))*50
t += "<li class=\"item\""+"style=\"background-image:url("+bg+");background-position:"+array[i].x+"px "+array[i].y+"px\""+">"+array[i].num+"<\/li>"
}
obj.innerHTML = t;
for(var i = 0;i < arr.length;i++)
{
if(arr[i].num != i+1)
{
ifComplete = false;
}
}
if(ifComplete)
{
alert("恭喜您，一共用了"+step+"步");
}
else
{
for(var i = 0;i < arr.length;i++)
{
(function(i){
obj.getElementsByTagName("li")[i].onclick = function(){
if(firstClick === null)
{
firstClick = i;
setClass(this,"current").addClass();
}
changePic(i);
}
})(i);
}

}
}

function changePic(index)
{
var cha = Math.abs(index - firstClick);
if(cha == 1 || cha == Math.sqrt(arr.length))
{

var ar = arr[firstClick];
arr[firstClick] = arr[index];
arr[index] = ar;
firstClick = null;
step++;
ifComplete = true;
resetHtml(arr);
}
}

}

window.onload = function(){
pintuGame("#js-pintu");
}

*{margin:0;padding:0;list-style:none;}
.piclist {width:150px;border:1px solid #ddd;overflow:hidden;*zoom:1;margin:50px;}
.piclist li{float:left;width:50px;height:50px;border-left:1px solid #ddd;border-top:1px solid #ddd;margin-left:-1px;margin-top:-1px;text-align:center;cursor:pointer;position:relative;}
.piclist .current:after{content:""; background:#000;opacity:.5;filter:alpha(opacity=50);width:100%;height:100%;position:absolute;top:0;left:0;}