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");
}
	

<div id="js-pintu">
	<ul class="piclist">
    </ul>
</div>

*{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;}