if (solved) {

    setTimeout(function() {alert("You solved

it!");}, 500);

}

复制代码

当一个拼图被点击时，我们要知道它的四周是否可以移动。判断的方法是当前位置到空白位置的总距离为1时就可以移动。
简单点说就是x相同要判断y的距离是否为1，y相同要判断x的距离是否为1。

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;

}

复制代码

如果有一个拼图不正确函数就会返回false,否则返回true。
最后，重绘被点击的拼图到新的位置。

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 * tileSize, y * tileSize, tileSize, tileSize,

                     i * tileSize, j * tileSize, tileSize, tileSize);

            }

        }

    }

}

复制代码

当画拼图时，这个函数可以防止填充画板时匹配空的位置，因为在游戏中用户可以选择不同的难度。




转自天地会