前一段時間突然來了一個想法，就是運用前端知識實現(xiàn)一個拼圖游戲，但是不知道具體怎樣實現(xiàn)。今天，想到既然實現(xiàn)不了現(xiàn)實中我們看到的那種拼塊，那么就用正方形來代替吧！
效果如下：

想到就是當(dāng)小的圖片塊放到合適的位置上時，表示拼圖完成。

1. 前端布局

運用css浮動樣式，具體效果為：

兩個div盒子，均采用左浮動，即它們的css樣式表示為：float：left
至于小圖片塊交換位置動態(tài)效果，只是在css樣式中設(shè)置這個屬性即可。

.right li{
	transition: all 1s;
}

這個css屬性小編覺得真的很不錯，其實，現(xiàn)實中我們在網(wǎng)頁端看到的輪播圖等效果都有它的影子，實現(xiàn)一個輪播圖只需用到相對定位和絕對定位、或者采用z-index等技術(shù)結(jié)合transition 等css屬性可以完美實現(xiàn)(額外擴展一下！)

2. js腳本實現(xiàn)小圖片塊變換位置

1. 確定隨機小圖片塊的選擇

既然提到隨機，那么肯定用到 Math.random() 這個函數(shù)呀！這個函數(shù)生成的隨機數(shù)范圍為0~1之間的隨機小數(shù)，如果我們用 Math.floor(Math.random()Xnum)，那么它的結(jié)果將是0~num(不包括num)。這個num為總的小圖片塊的總數(shù)，這樣我們用生成的這個隨機數(shù)即可確定一個小圖片塊的坐標，如 num = 37，每一行最多可以放小圖片塊數(shù)量為18,那么這個num表示的小圖片塊的位置為：(parseInt(num/18),num%18)=(2,1) ，通過這個坐標運用絕對定位相關(guān)知識，從而確定看到的效果中小圖片塊的樣式位置。

let randomPosArr = [];
let randomMap = {},map2 = {};
let countSum = count_w * count_h;
// 小圖片的總數(shù)
let i = 0;
while(i < randomNum){
	let pos = Math.floor(Math.random() * countSum);
	// 0 ~ 179
	let x = pos%count_w,y=Math.floor(pos/count_w);
	let pos_str = `${y},${x}`;
	if(randomMap[pos_str] === undefined){
		randomMap[pos_str] = true;
	}else{
		continue;
	}
	
	let num;
	while(true){
		num = Math.floor(Math.random() * randomNum);
		// 向下取整 0 ~ randomNum - 1 
		if(map2[num] === undefined){
			map2[num] = true;
			break;
		}
	}
	
	randomPosArr.push([y,x,num]);
	i ++;
}

2. 打亂隨機小圖片塊的對應(yīng)關(guān)系

雖然得到的隨機生成的小圖片的位置，那么怎樣打亂它們的對應(yīng)的關(guān)系呢？這里舉一個例子，比如原來的順序為 1，2，3，打亂之后，現(xiàn)在它們的順序為2，3，1，即處于下標為0的1用2來占，下標為1的2用3來占，下標為2的3用1來占。這樣的對應(yīng)關(guān)系，不論隨機小圖片塊的數(shù)量為奇數(shù)還是偶數(shù)，均可以打亂之間的順序。

let posMap = {};
for(let i=0;i<randomNum;i++){
	let pos_y = randomPosArr[i][0],pos_x = randomPosArr[i][1],index = randomPosArr[i][2];
	let pos_str = `${pos_y},${pos_x}`;
	let pos3 = randomPosArr[index];
	let pos_str2 = `${pos3[0]},${pos3[1]}`;
	posMap[pos_str] = pos_str2;
}

這里沒有用到隨機函數(shù) Math.random()，因為在上一個代碼處，已經(jīng)確定了，這里用 i 和生成的數(shù)組randomPosArr[i][2]來進行對應(yīng)關(guān)系。

3. 點擊小圖片塊進行拼圖操作

當(dāng)點擊一個沒有亂序的小圖片塊時，代碼會給出相關(guān)提示。

當(dāng)點擊到一個亂序的圖片時，就進行拼圖操作，即把當(dāng)前位置正確的小圖片塊拼回來，把當(dāng)前圖片放到當(dāng)前位置正確的小圖片塊位置上。

function fun2(ele,v){
	let index = $(ele).attr('index'), index2 = $(ele).attr('index2');
	if(index2 === undefined || index2 === ''){
		alert('無需操作！');
		return;
	}
	// index2 當(dāng)前位置
	else{
		let obj = fun3(index2);
		// console.log(obj);
		if(obj !== null){
			let _index2 = obj.attr('index2'),_arr2 = obj.attr('index').split(',');
			$(ele).attr('index2',_index2);
			obj.attr('index2','');
			// obj 已經(jīng)回到原始位置，去掉index2屬性中的值
			let _arr1 = _index2.split(',');
			
			obj.css({
				'top': parseInt(_arr2[0]) * param + 'px',
				'left': parseInt(_arr2[1]) * param + 'px'
			});
			
			$(ele).css({
				'top': parseInt(_arr1[0]) * param + 'px',
				'left': parseInt(_arr1[1]) * param + 'px'
			});
			
			if(fun4()){
				setTimeout(function(){
					alert('拼圖成功！');
				},2000);
			}
		}
	}
}

fun2函數(shù)對應(yīng)小圖片塊上的點擊事件。

4. 更改小圖片塊的大小和小圖片塊的個數(shù)

代碼頭部這里進行修改參數(shù)即可。

【注】：上傳的圖片寬至少大于或等于900像素

5. 改進方案

小編覺得還可以加一個操作，就是當(dāng)我們點擊沒有亂序的圖片時，把當(dāng)前圖片再加幾個小圖片塊加入到這個隨機小圖片塊中，這樣難度就高一些了，也更加完美，哈哈！

3. 實現(xiàn)參考代碼和運行結(jié)果

參考代碼已經(jīng)上傳到GitCode，鏈接為：拼圖游戲.html

運行結(jié)果為：

到了這里，關(guān)于前端:運用HTML+CSS+JavaScript實現(xiàn)拼圖游戲的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！