拼圖游戲一直是人們喜愛的益智游戲之一。隨著互聯網的普及，人們可以通過網頁拼圖游戲隨時隨地玩樂。而作為網站前端開發中常用的語言之一，JavaScript拼圖游戲的實現也是相對易行的。 JavaScript拼圖游戲的核心思想就是將圖片分割成若干份，然后隨機排列這些份，最后通過操作鼠標或鍵盤，重新將拼亂的圖片組合成原圖。代碼中需要實現圖片分割、隨機排列、鼠標鍵盤操作等功能。 首先，我們需要將圖片分割成若干份。這一步可以通過HTML5的Canvas技術實現。Canvas是HTML5標準中新增的一個繪圖功能，它可以創建圖形、繪制圖像、添加事件等。我們可以調用Canvas的API，將圖片分割成若干份，例如將原圖按照4x4的格子分割成16份（每份大小為原圖大小的1/4）。

let img = new Image();
img.src = "puzzle.png";
img.onload = function() {
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
let pieceWidth = canvas.width / 4;
let pieceHeight = canvas.height / 4;
for (let i = 0; i< 4; i++) {
for (let j = 0; j< 4; j++) {
context.drawImage(img, j * pieceWidth, i * pieceHeight, pieceWidth, pieceHeight, j * pieceWidth, i * pieceHeight, pieceWidth, pieceHeight);
}
}
}

我們用一個4x4的Canvas畫布，然后將原圖按照4x4的格子分割成16份，通過drawImage()函數將每份畫到Canvas上。 其次，我們需要實現拼圖的隨機排列。這一步可以使用JavaScript的數組操作實現。我們可以將16個小塊分別存儲在一個數組中，然后隨機洗牌這個數組。

let pieces = [];
for (let i = 0; i< 16; i++) {
pieces.push({x: i % 4, y: Math.floor(i / 4)});
}
shuffle(pieces);
function shuffle(array) {
for (let i = array.length - 1; i >0; i--) {
let j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}

我們定義一個pieces數組，數組中一共存儲16個小塊的坐標（注意這里的坐標是指每個小塊在原圖中的位置）。然后使用一個shuffle()函數，隨機洗牌這個數組。 最后，我們需要綁定鼠標和鍵盤事件，使得玩家能夠通過操作鼠標或鍵盤將拼亂的圖片重新組合成原圖。這一步可以使用JavaScript的事件監聽機制實現。我們可以在Canvas上監聽鼠標點擊事件和鍵盤按鍵事件，然后根據鼠標或鍵盤操作的位置，判斷移動哪個小塊。

canvas.onclick = function(e) {
let x = Math.floor((e.offsetX - 1) / pieceWidth);
let y = Math.floor((e.offsetY - 1) / pieceHeight);
let index = getIndex(x, y);
if (index == emptyIndex - 4 || index == emptyIndex + 4 || index == emptyIndex - 1 || index == emptyIndex + 1) {
[pieces[index], pieces[emptyIndex]] = [pieces[emptyIndex], pieces[index]];
emptyIndex = index;
draw();
check();
}
}
document.onkeydown = function(e) {
let x = emptyX;
let y = emptyY;
if (e.keyCode == 37) { // left
x += 1;
} else if (e.keyCode == 38) { // up
y += 1;
} else if (e.keyCode == 39) { // right
x -= 1;
} else if (e.keyCode == 40) { // down
y -= 1;
}
let index = getIndex(x, y);
if (index >= 0 && index<= 15) {
[pieces[index], pieces[emptyIndex]] = [pieces[emptyIndex], pieces[index]];
emptyIndex = index;
draw();
check();
}
}

我們在Canvas上綁定一個onclick事件，當鼠標點擊某一小塊時，我們將該小塊與空白小塊交換位置（注意在代碼中我們使用了一個emptyIndex變量來表示空白小塊的位置）。同時，我們也在document上綁定一個onkeydown事件，當玩家按下方向鍵時，我們將相鄰位置的小塊與空白小塊交換位置。 至此，我們的JavaScript拼圖游戲就完成了。通過Canvas技術的圖片分割，JavaScript的數組操作和事件監聽，我們實現了一個簡單的、可玩性強的拼圖游戲。