Js implements the jiugongge and js jiugong puzzles games.

Js implements the jiugongge and js jiugong puzzles games.

The effect is as follows:

The Code is as follows:

<! Doctype html> 
Design Concept:
What we need to do is set a large DIV to wrap the small DIV inside, and then set 8 small DIV in it, numbers them from 1. Set two buttons on the right. Click Start Time to start timing. After the puzzle is completed, the timer is stopped. A box is displayed, indicating that the timer is complete. The "re-start" button is used to re-start a new puzzle, disrupt all blocks, and start timing. When you click a square, you need to determine whether the current square is movable. If it is movable, you can move it to the corresponding position. If it cannot be moved, you will not do anything. After moving a piece, you need to determine whether to complete the puzzle. We think of the big DIV as a box with nine positions, starting from 1 to 9. Their positions and numbers will not change. Think of the eight small divs in it as eight small boxes, and set top and left for them to control their positions. Each small DIV starts from 1 to 8. Their positions can be changed at will. So when the numbers of the small DIV and the numbers of the big DIV are all combined, the puzzle is completed.
So there is only one focus. That is how to determine whether it is movable. This is also simple. We set a one-dimensional array variable to save the number of the small DIV loaded in the large DIV. If there is no small square in the big DIV, And it is blank on the surface, it is set to 0. If the current large DIV has a small DIV, set it to the number of the small DIV. Then, set a two-dimensional array variable to save the movable Number of the large DIV. That is, to save all the places where the big DIV can go. For example, if the DIV number is 2, it can only move to the three directions: 1, 3, and 5. For example, 5 can be moved to the four directions of 2, 4, 6, and 8. We traverse this variable cyclically. If there is no square in the corresponding direction, that is, the value is 0, then it can move in this direction.
Tip: the random box scrambling Algorithm Used in the experiment is very simple, but there is a bug that the order of probability generation of 50% cannot be restored. At this time, you can only click to start again.

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!