JavaScript version Puzzle Games

MU Lesson online ready to open a new jquery tutorial, spent 3 days of free time to write a JavaScript version of the puzzle games, as a new tutorial supporting the analysis of the case

Jigsaw Puzzles Online has a lot of implementation cases, but this source code is my own implementation, so do not do too much comparison

Online Preview (Chrome): http://sandbox.runjs.cn/show/pcwfu7i5

Puzzle game is actually quite simple, mainly involves some details of the processing, the following is my own in the implementation of the issues involved:

1. Cutting and splicing of pictures
2. How to randomly layout
3. How to switch pictures
4. Drag picture Overflow processing
5. How to know if the picture is restored successfully

Implementation ideas:

For the sake of simplicity, I only did 3 groups of choices, 3*3, 6*6, 9*9 of course you have to set up 4*4 are OK, maintain this idea and algorithm on the okay

In a container, we cut the layout according to 3*3, and this can be seen as a two-dimensional matrix

row = 3   //3 rows col = 3  //3 columns

The two-dimensional matrix will form a nine Gongge graph, as follows:

Initialize: Matrix diagram of 3*3

0	1	2
3	4	5
6	7	8

One order for each fragment plot, 3*3 = 9

Every time the fragment graph changes on the page, it can actually map to the corresponding originalorder in memory. The change of this array

At this point the real order of the Shard is originalorder= [0,1,2,3,4,5,6,7,8,9]

Move end: New 3*3 matrix diagram

8	4	2
3	1	7
6	5	0

New mapping Table Randomorder = [8,4,2,3,1,7,6,5,0]

After each change, the calculation of the original matrix ordering and the change of the matrix is consistent

Originalorder = = Randomorder Determine if the restore succeeded

Detailed implementation can directly refer to the source code

Attach my git:https://github.com/jsaaron/puzzlegame.

If you need a more detailed tutorial, you can follow the new course in the next class ~ ~

JavaScript version Puzzle Games