拼圖游戲介紹 拼圖游戲將一幅圖片分割成若干拼塊并將它們隨機打亂順序。當將所有拼塊都放回原位置時，就完成了拼圖(游戲結束)。 在“游戲”中，單擊滑塊選擇游戲難易，“容易”為3行3列拼圖游戲，中間為一個4行4列拼圖游戲，“難”為5行5列拼圖游戲。拼塊以隨機順序排列，玩家用鼠標單擊空白塊的四周來交換它們的位置，直到所有拼塊都回到原位置。拼圖游戲運行結果如圖所示。

sliding.js代碼:

var img = new Image();

img.src = 'defa.jpg';

img.addEventListener('load',drawTiles,false);

var boardSize = document.getElementById('puzzle').width;

var tileCount = document.getElementById('scale').value;

var titleSize = boardSize / tileCount;

var clickLoc = new Object;

clickLoc.x = 0;

clickLoc.y = 0;

var emptyLoc = new Object;

emptyLoc.x = 0;

emptyLoc.y = 0;

var solved = false;

var boardParts = new Object;

setBoard();

document.getElementById('scale').onchange = function() {

tileCount = this.value;

titleSize = boardSize / tileCount;

setBoard();

drawTiles();

};

document.getElementById('puzzle').onmousemove = function(e) {

clickLoc.x = Math.floor((e.pageX - this.offsetLeft) / titleSize);

clickLoc.y = Math.floor((e.pageY - this.offsetTop) / titleSize);

};

document.getElementById('puzzle').onclick = function() {

if (distance(clickLoc.x, clickLoc.y,emptyLoc.x,emptyLoc.y)==1) {

slideTile(emptyLoc, clickLoc);

drawTiles();

}

if (solved) {

setTimeout(function (){alert("You solved it!"); },500)

}

};

function setBoard() {

boardParts = new Array(tileCount);

for (var i = 0; i < tileCount; ++i) {

boardParts[i] = new Array(tileCount);

for (var j = 0; j < tileCount; ++j) {

boardParts[i][j] = new Object;

boardParts[i][j].x = (tileCount - 1) - i;

boardParts[i][j].y = (tileCount - 1) - j;

}

}

emptyLoc.x = boardParts[tileCount - 1][tileCount - 1].x;

emptyLoc.y = boardParts[tileCount - 1][tileCount - 1].y;

solved = false;

}

function drawTiles() {

context.clearRect ( 0 , 0 , boardSize , boardSize );

for (var i = 0; i < tileCount; ++i) {

for (var j = 0; j < tileCount; ++j) {

var x = boardParts[i][j].x;

var y = boardParts[i][j].y;

if(i != emptyLoc.x || j != emptyLoc.y || solved == true) {

context.drawImage(img, x * titleSize, y * titleSize, titleSize, titleSize,

i * titleSize, j * titleSize, titleSize, titleSize);

}

}

}

function distance(x1, y1, x2, y2) {

return Math.abs(x1 - x2) + Math.abs(y1 - y2);

}

function slideTile(toLoc, fromLoc) {

if (!solved) {

boardParts[toLoc.x][toLoc.y].x = boardParts[fromLoc.x][fromLoc.y].x;

boardParts[toLoc.x][toLoc.y].y = boardParts[fromLoc.x][fromLoc.y].y;

boardParts[fromLoc.x][fromLoc.y].x = tileCount - 1;

boardParts[fromLoc.x][fromLoc.y].y = tileCount - 1;

toLoc.x = fromLoc.x;

toLoc.y = fromLoc.y;

checkSolved();

}

}

function checkSolved() {

var flag = true;

for (var i = 0; i < tileCount; ++i) {

for (var j = 0; j < tileCount; ++j) {

if (boardParts[i][j].x != i || boardParts[i][j].y != j) {

flag = false;

}

}

}

solved = flag;

}

}

sliding.html代碼：

拼圖游戲

.picture{

border: 1px solid black;

}

拼圖游戲

低

高

```

總結

以上是生活随笔為你收集整理的html九图拼图游戏代码,HTML5拼图游戏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。