html九图拼图游戏代码,HTML5拼图游戏

拼图游戏介绍 拼图游戏将一幅图片分割成若干拼块并将它们随机打乱顺序。当将所有拼块都放回原位置时，就完成了拼图(游戏结束)。 在“游戏”中，单击滑块选择游戏难易，“容易”为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;

}

拼图游戏

低

高

```