HTML5 jigsaw puzzle

Introduction to jigsaw puzzle A jigsaw puzzle divides a picture into several pieces and randomly scrambles them. When all the pieces are put back in place, the puzzle is finished. In the "game", click the slider to select the game difficult and easy, "easy" is a 3-row 3-column puzzle, in the middle is a 4-row 4-column puzzle, and "difficult" is a 5-Row 5-column puzzle. The tiles are arranged in random order. Players click the four weeks of the blank tiles to exchange their positions until all the tiles return to their original positions. The result of the puzzle is shown in the figure.

sliding.js Code:


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 Code:

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>Jigsaw puzzle</title>
    <style>
        .picture{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div id="title">
        <h2>Jigsaw puzzle</h2>
    </div>
    <div id="slider">
        <form>
            <label>low</label>
            <input type="range" id="scale" value="4" min="3" max="15" step="1">
            <label>high</label>
        </form>
        <br>
    </div>
    <div id="main" class="main">
        <canvas id="puzzle" width="480px" height="480px"></canvas>
    </div>
    <script src="sliding.js"></script>
</body>
</html>```


Posted on Mon, 23 Mar 2020 13:31:19 -0400 by pixelgirl