Over 30 lines of js Code to write an M * N puzzle game

I have just written an article titled more than 20 lines of js Code to write the simplest 3x3 puzzle game. Inspired by zswang, I improved the code, now we have made a puzzle of any M rows and N columns (M, N is greater than or equal to 2), with over 30 lines of js Code.

First:

 

Gameplay: direction keys, no need to explain.

Click here for a direct experience.

There are two main ways to ensure that a puzzle can be solved:

1. Move several times from the ending point, which is easy to understand, but the space is not at the end. If you want to move the space back to the end, there will be two more cycles;

2. Use an algorithm to check whether there is a solution for the random start. If there is no solution, adjust it to a solution or start again.

This article uses method 2. The algorithm used is called "Backward order and" to ensure that there is a solution and spaces are at the end.

 

There are three methods to generate the startup:

1. random array sorting.

2. Simulate the shuffling algorithm.

3. perform several random moves starting from the ending.

In this article, algorithm 2 is used, algorithm 1 is used, and zswang is used for algorithm 3 in "write the simplest 3x3 puzzle game with over 20 lines of js Code.

The efficiency of random array sorting may be poor, so it is changed to a simulated shuffling algorithm and a cyclic Random Switching Algorithm.

In addition, I added the convenient layout () and replay () functions to immediately start and switch the layout.

<Div id = "t1" style = "border: 1px solid black; padding: 5px; display: inline-block;"> </div>
<Script>
Var t1 = document. getElementById ("t1 ");
Function layout (M, N ){
R = M; C = N; r = R-1; c = C-1; D = []; n = R * C-1;
W = (n + ''). length;
Rgx = new RegExp ('(. {' + (w * C + c-1) + '}),', 'G ');
Space = new Array (w + 1). join ('_');
Zero = new Array (w). join (0 );
Replay ();
}
Function replay (){
I = n;
While (I --){
D [I] = (zero + (I + 1). slice (-w );
}
D [n] = space;
OK = D + '';
While (++ I <n ){
J = D [rnd = Math. random () * (n-1) | 0];
D [rnd] = D [I];
D [I] = j;
}
For (I = 0, k = 0; I <n; I ++)
For (j = I + 1; j <n; j ++)
D [I]> D [j] & (k = 1-k );
K & (I = D [N-2]) & (D [N-2] = D [n-1]) & (D [n-1] = I );
T1.innerHTML = (D + ''). replace (rgx, '$1 <br> ');
}
Function move (dir ){
If (dir> = 0 & dir <4 ){
K = [[], [], [0,-1], [-] [dir], rr2 = r + k [0], cc2 = c + k [1];
If (r2 + 1 & r2 <R & c2 + 1 & c2 <C)
Return D [r * C + c] = D [r2 * C + c2],
D [(r = r2) * C + (c = c2)] = space,
T1.innerHTML = (D + ''). replace (rgx, '$1 <br> ');
}
}
Document. onkeyup = function (e ){
If (move (e | window. event). keyCode-37) & (D + '') = OK & alert ('You WIN! '));
}
Layout (4, 4 );
</Script>

From unintentional Columns