How to Make a Dog Jigsaw Puzzle Game by JavaScript

Spread the love

Are you thinking of using your dog’s photo as a puzzle? You’ve come to the right place! Today I’m sharing a jigsaw puzzle with JS.

The picture used in the game is a complete picture of 300 * 300, the interface 3 * 3 nine grids, is nine 100 * 100 DIV, nine DIV using the background are the same picture, the use of CSS background-position offset, spell out a complete picture.

The game supports mouse click and arrow keys to move in two ways.

Data Storage

1 squareds = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [-1, -1, 0]];
2 space = {row: 3, cell: 2};

Squareds array, the record is a nine grid in each grid is currently which piece of number, the last line of the two -1 is not available empty bit, 0 indicates that is a temporary storage bit, the game is the use of this an empty bit to complete the puzzle.

Space array is to record the game process, the current number of 0 in which row and column of this empty space.

Game Initialization

To start a new game, the first thing to do is to randomly disrupt the order of the nine squares. I utilize a step-by-step random shift to disrupt the order. It is actually the inverse process of a puzzle. That is, the initial is the complete state, as shown in the figure.

Game Initialization

Step 1: Find a random moveable grid around the empty space (0), the first step is only 9 this grid, move 9 to the position of 0, into the following form.


Step 2: 0 has three movable positions around, respectively 6, 8, 9, randomly take a position, such as a random to 6 or 8, exchange the position of 6 or 8 and 0, into the form of the following figure.


It should be noted here that the program determines whether the shift forms a round trip with the previous step, and if it is a round trip, it is discarded and randomized again. The second step, if the randomized one is 9, forms a round trip with the previous step, and it is discarded and started again. I set here to move 25 steps randomly in this way.


The algorithm for randomly taking moving blocks is to find the blocks around the space that can be moved, record them in the availableCoords array, and finally take one randomly in the array as the grid to be disrupted in this step. The code is as follows.

var randomAround = function(){
    var u = {row: space.row - 1, cell : space.cell},
        d = {row: space.row + 1, cell: space.cell},
        l = {row: space.row, cell: space.cell - 1},
        r = {row: space.row, cell: space.cell + 1};
    var availableCoords = [];
    var isAvailable = function(coord){
        var r = coord.row >= 0 && coord.row <= 2 && coord.cell >= 0 && coord.cell <= 2;

            r = coord.row == 3 && coord.cell == 2;
        return r;

    isAvailable(u) && availableCoords.push(u);
    isAvailable(d) && availableCoords.push(d);
    isAvailable(l) && availableCoords.push(l);
    isAvailable(r) && availableCoords.push(r);

    return availableCoords[Math.floor(Math.random() * availableCoords.length)];

After 25 steps, the empty space (0) may not be in the initial position, which is not very beautiful, and the empty space (0) is moved to the initial position by the following code.

var lastStep = path[path.length - 1].from,
    coord = null;

for(var i = lastStep.cell + 1; i < 3; i++){
    coord = {row: lastStep.row, cell: i};
    path.push({from: coord, to:{row: space.row, cell: space.cell}, num: squareds[coord.row][coord.cell]});

lastStep = coord || lastStep;
for(var i = lastStep.row + 1; i < 4; i++){
    coord = {row: i, cell: lastStep.cell};
    path.push({from: coord, to:{row: space.row, cell: space.cell}, num: squareds[coord.row][coord.cell]});

Here, to show an animation effect when the disruption, first use a path array to record the disruption steps to move the grid. The disruption steps are calculated and then move according to the steps recorded in the path array. If you remember the steps of the disruption, moving in reverse is the solution to the game 🙂

Final Thoughts

I hope my thoughts can help dog owners who want to make their own jigsaw puzzle game. It’s okay if you can’t read it I found a free online dog puzzle game for you to play. With just a few clicks you can create dog puzzles from your photos or even videos!

Spread the love

Leave a Comment

4 − one =