Share an original classic jigsaw puzzle game (JS Version)

I had nothing to do with my work yesterday, so I suddenly wanted to create a jigsaw puzzle game with Js. So I started to do it.

Let's take a look at the preview of the game:

　　

This jigsaw puzzle game is well understood and its rules are not introduced.

The game uses a complete 300*300 image. The nine grids in 3*3 are nine 100*100 Divs, the nine divs use the same image as the background. The CSS background offset is used to create a complete image.

The game supports Mouse clicking and arrow keys moving.

The following code is a brief introduction:

Data Storage

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

 

The squareds Array records the number of each cell in the nine cells, the two-1 in the last row is unavailable, and 0 indicates a temporary bit, the game uses this vacant space to complete the puzzle.

The space Array records the row and column of the empty space with the current number 0 during the game.

Game Initialization

To start a new game, we must first randomly disrupt the order of the nine grids. I used a step-by-step random shift method to disrupt the order. It is actually a reverse process of the puzzle. That is, the initial state is complete,

　　

Step 1: randomly find a movable lattice around the vacant space (0). The first step is only the 9 lattice, and the position from 9 to 0 is changed to the following form:

　　

In step 2, there are three movable positions around 0, which are 6, 8, and 9 respectively. A random position is obtained, for example, 6 or 8, switch the positions of 6, 8, and 0 to the form of an example:

Or

It should be noted that the program judges whether the shift is round-trip with the previous step. If it is round-trip, it discards the random again. If it is 9 in the second step, A round-trip is formed from the previous step. Discard the round-trip and try again. I set this to randomly move 25 steps here.

The random moving block algorithm is to find the blocks around spaces that can be moved, record them to the availablecoords array, and finally randomly obtain one in the array, as the grid to be disrupted in this step. The Code is as follows:

 1 var randomAround = function(){ 2     var u = {row: space.row - 1, cell : space.cell}, 3         d = {row: space.row + 1, cell: space.cell}, 4         l = {row: space.row, cell: space.cell - 1}, 5         r = {row: space.row, cell: space.cell + 1}; 6     var availableCoords = []; 7     var isAvailable = function(coord){ 8         var r = coord.row >= 0 && coord.row <= 2 && coord.cell >= 0 && coord.cell <= 2; 9         10         if(!r)11             r = coord.row == 3 && coord.cell == 2;12         return r;13     };14     15     isAvailable(u) && availableCoords.push(u);16     isAvailable(d) && availableCoords.push(d);17     isAvailable(l) && availableCoords.push(l);18     isAvailable(r) && availableCoords.push(r);19     20     return availableCoords[Math.floor(Math.random() * availableCoords.length)];21 };

In this way, after 25 steps, the space (0) lattice may not be in the initial position, not very beautiful, and after the following code, move the space (0) to the initial position:

1 var lastStep = path [path. length-1]. from, 2 coord = null; 3 // move spaces to the end of the row. 4 for (var I = lastStep. cell + 1; I <3; I ++) {5 coord = {row: lastStep. row, cell: I}; 6 path. push ({from: coord, to: {row: space. row, cell: space. cell}, num: squareds [coord. row] [coord. cell]}); 7 moveCoord (coord); 8} 9 10 // move the space to the initial position. 11 lastStep = coord | lastStep; 12 for (var I = lastStep. row + 1; I <4; I ++) {13 coord = {row: I, cell: lastStep. cell}; 14 path. push ({from: coord, to: {row: space. row, cell: space. cell}, num: squareds [coord. row] [coord. cell]}); 15 moveCoord (coord); 16}

Here, to show the animation effect when a disruption occurs, first use a path array to record the lattice to be moved by the disruption step. After the disruption step calculation is complete, follow the steps recorded by the path array, step by step. If you remember the steps at the time of disruption, Mobile is the game's solution.

The images used by the game are preset in the images folder and input the image name when initializing the JS object.

1 $ (function () {2 var jigsaw = lhm. jigsaw. getInstance (); 3 jigsaw.init('p-2.jpg '); // input the name of the image preset in the images folder during initialization 4 });

 

The rest of the code is not detailed, and the code is relatively simple. The source code is attached and you are interested in your own research.