簡陋的拼圖_純javascript

題外話：
光看書學javascript是不會有多大進展的，必需要實踐才知道本身有沒有記住那些看過的東西。
常言道：「出來混，早晚是要還的！」，因此我看了那麼多別人的博客，也是時候嘗試着去寫本身的博客了～

效果圖：

個人思路： javascript

下面說一下我作這個拼圖的思路吧： css

先將整個頁面分爲2個部分，左側爲image-box,右側爲image-piece；
隨機生成小圖片：每一個小圖片都是li元素的背景圖片。在生成圖片的過程，只須要使用一張大圖片。根據本身的規劃，是要4*5仍是3*5或者怎樣，再在css樣式中給li設定好寬度以及高度（在這裏，我使用的大圖片大小是600寬、376高度而我是要4*5的拼圖，那麼li的樣式width:120px;height:94px）。在javascript中生成li元素，而且隨機產生left、top值，利用絕對定位將li元素定位在image-piece中。此外，用javascript給每個li元素設置background-position值。
拖拽圖片：利用onmousedown、onmouseup、onmousemove實現圖片的拖拽。

關於上述第二點的background-position的值，爲了簡單說明是什麼意思，下面給出一個圖解（以600px*376px的圖片爲例）

每一個小圖片，就是經過css中設置width:120px,height:94px，以及javascript給每一個li元素設定不同的可是有規律的background-position獲得的。

遇到的問題：

在寫這個小玩意兒的時候，我曾經笨笨地用了構造函數與原型結合的模式來建立對象，後來得知這種作法在我這種小東西上太大動干戈。呵呵，雖然我有着重看了關於建立對象的書本內容，不過我仍是忘了。因此說，看了不必定記得住啊！因而後面我只用了構造函數建立對象。
此外，在寫關於拖拽的事件的時候，我把return false;給忘記了，致使出現了無數問題。

囉嗦完了，代碼也寫得很亂，嘿嘿~歡迎你們吐槽~~~

html:

<!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" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="stylesheets/puzzleTwo.css" />
	<script type="text/javascript" src="javascripts/puzzleTwo.js"></script>
	<title>Puzzle_Two</title>
	<style>
	* {
		margin: 0;
		padding: 0;
	}
	li {
		list-style: none;
	}
	#box {
		width: 1120px;
		margin: 0 auto;
		overflow: hidden;
	}
	#image-box {
		float: left;
		width: 610px;
		height: 390px;
		margin-top: 50px;
		border: 1px solid #ccc;
	}
	#image-box li {
		height: 95px;
		width: 120px;
		float: left;
		border: 1px dashed #ccc;
	}
	#image-piece {
		position: relative;
		float: left;
		width: 500px;
		height: 390px;
		margin: 50px 0px 0px 0px;
		border: 1px solid #ccc;
		border-left: none;
	}
	#image-piece li {
		width: 120px;
		height: 94px;
		position: absolute;
		cursor: move;
		background-image: url("../images/image.png");
		background-repeat: no-repeat;
	}
	#upload {
		width: 1120px;
		margin: 0 auto;
	}
	#upload input {
		height: 30px;
		width: 100px;
	}
	</style>
</head>
<body>
	<div id="box">
		<div id="image-box">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>			
		<div id="image-piece"></div>
	</div>
	<div id="upload">
		<input type="button" value="Start" id="start"/>
	</div>
</body>
</html>

javascript:

var $ = function(id) {
	return typeof id === "string" ? document.getElementById(id) : id;
}
var $$ = function(tagName,oParent) {
	return (oParent||document).getElementsByTagName(tagName);
}
var Demo = function(box,imgBox,originalImg,lis,imgsNum,url) {
	var oThis = this;
	this.box = box;
	this.imgBox = imgBox;
	this.originalImg = originalImg;
	this.lis = lis;
	this.imgsNum = imgsNum;
	this.url = url;
	this.init = function() {
		var x = 120;
		var y = 94;
		var newChild = document.createElement("ul");
		for(var i = 0;i < oThis.imgsNum;i ++) {
			var liChild = document.createElement("li");
			liChild.style.left = oThis.order("left") + "px";
			liChild.style.top = oThis.order("top") + "px";
			liChild.style.backgroundPositionX = -Math.floor(i%5)*x + "px";
			liChild.style.backgroundPositionY = -Math.floor(i/5)*y + "px";
			newChild.appendChild(liChild);
		}
		oThis.imgBox.appendChild(newChild);
		// compatible with FF and IE
		try{
			oThis.box.style.opacity = 0.5;
		}
		catch(e) {
			oThis.box.filters.alpha.opacity = 0.5;
		}
	};
	this.start = function() {
		var imgLis = $$("li",oThis.imgBox);
		try {
			oThis.box.style.opacity = 1;			
		}
		catch(e) {
			oThis.box.filters.alpha.opacity = 1;			
		}
		for(var i = 0;i < oThis.imgsNum;i ++) {
			oThis.dragEvent(imgLis[i],i);
		}
	}
	this.order = function(target) {
		if(target === "left") {
			return Math.floor(Math.random(10)*350);
		}
		else if(target === "top") {
			return Math.floor(Math.random(10)*250);
		}
		else {
			return;
		}
	};
	this.dragEvent = function(li,index) {
		var disX = 0,
			disY = 0,
			left = 0,
			top = 0,
			flag = false;	
		li.onmousedown = function(event) {
			var e = event || window.event;
			flag = true;
			disX = parseInt(e.clientX) - parseInt(li.style.left);
			disY = parseInt(e.clientY) - parseInt(li.style.top);
			li.style.zIndex = 1;
			document.onmousemove = function(event) {
				var e = event || window.event;
				if(flag) {
					li.style.left = parseInt(e.clientX) - disX + "px";
					li.style.top = parseInt(e.clientY) - disY + "px";
					if(oThis.matchImg(li,index))  {
						flag = false;
						li.onmousedown = null;
						li.onmousemove = null;
						li.onmouseup = null;
					}
				}
				return false;
			};
			document.onmouseup = function(event) {
				li.style.zIndex = 0;
				flag = false;
				return false;
			};
			return false;
		};
	};
	this.matchImg = function(li,index) {
		var left = parseInt(oThis.imgBox.offsetLeft - oThis.lis[index].offsetLeft);
		var top = parseInt(oThis.imgBox.offsetTop - oThis.lis[index].offsetTop);
		var liLeft = -parseInt(li.style.left);
		var liTop = -parseInt(li.style.top);
		var maxLeft = left + 5;
		var minLeft = left - 5;
		var maxTop = top + 5;
		var minTop = top - 5;
		if(liLeft < maxLeft && liLeft > minLeft && liTop < maxTop && liTop > minTop) {
			li.style.left = -left + "px";
			li.style.top = -top + "px";
			return true;
		}
		else 
			return false;
	};
	this.checkTime = function() {
		var time = new Date();
		var minute = time.getMinutes();
		var second = time.getSeconds();


	};
}
window.onload = function(){
	var imgsNum = 20;
	var imgBox = $("image-piece");
	var originalImg = $("image-box");
	var button = $("start");
	var lis = $$("li",originalImg);
	var box = $("box");
	var url = "url(../images/image.png)";
	var puzzleDemo = new Demo(box,imgBox,originalImg,lis,imgsNum,url);
	puzzleDemo.init();
	button.onclick = function() {
		puzzleDemo.start();
	}
}