The solution to the ATITIT.HTML5 puzzle game.

The solution to the ATITIT.HTML5 puzzle game .

1. Operation of Puzzle Games ( click and drag ) 1

1. Support keyboard on, down, left and right key movement; 1

2. Support Click the left and right arrows in the blank module to move; 1

3. Support to move adjacent modules by clicking on the blank module. 1

4. Or click on the law , compatibility is good ... Mobile Phone and Computer 1

2. Note : Questions of no solution ( reverse order and discriminant method) 2

5.3*3 's approximate 50% no solution 2

6. Grid Rotation Issue : 2

7. APIs to apply Test success 2

8. Test picture digitization for easy testing : 2

3. The 2 that can be used

4. How to implement the puzzle Game 3

9. Background Image offset mode : 3

HTML5 Canvas API Implementation puzzle game 4

4 comparison between Canvas and SVG

5. Two figure AB dislocation 4

6. Reverse order and discriminant method 5

7. Rotation Discriminant Method 6

8. Jeig Bnen Use 8

9. Reference 10

1. Operation of Puzzle games (click Method andDrag Method)1. Support keyboard on, down, left, right key movement, 2. Support Click the left and right arrows in the blank module to move; 3. Support for moving adjacent modules by clicking on the blank module. 4. Or click on the right way,Good compatibility...Mobile Phone andComputer

Author:: Old Wow's paw attilax Ayron, email:[email protected]
Reprint please indicate source: Http://blog.csdn.net/attilax

2. Notes:problems with no solution(Reverse order and discriminant method) 5. 3*3the approximate50%No solution6. Gridthe problem of rotation..

Transform:rotate (40DEG)

7. To apply a successful testAPI

Biers Yao Pin yva time Tsainen syaod ok le.

8. Test Image Digitization,for easy testing..3. Can use the

HTML5 Web puzzle game code, support Ff_chrome and IE9 download-fire network download channel. htm

JavaScript version of the Web puzzle game, because this game based on HTML5 technology, so only support firefox4.0[and above], chrome11[and above), and IE9 above version.

Game Commentary: Please add the pieces of the jigsaw puzzle to the right in the preview of the image to win. Support keyboard to move on, down, left and right, support to click the left and next arrows in the blank module, and support the move of adjacent modules by clicking on the blank module.

4. Puzzle game Implementation Mode 9. Background image offsetWay..

Liehuo Walk Ten this,,, relaxed .

Ten. HTML5 Canvas APIrealization of jigsaw puzzle game

· Tags: jigsaw puzzle game time: 2014-01-27 read: 689

· HTML5 combined with the canvas API, file API and drag-and-drop API to make jigsaw puzzles, HTML 5 development Essentials and example of a book in detail, please use in support HTML5 browser, such as Chrome or Firefox and opera and other browsers can, IE8 no OH. This puzzle game in the run, the user needs to specify a picture, the game will automatically break the picture. The main practice is to practise the use of canvas properties.

One. Canvaswith theSVGthe comparison

The following table lists some of the differences between canvas and SVG.

Canvas

· Dependent resolution

· Event handlers are not supported

· Weak text rendering capabilities

· Ability to save result images in. png or. jpg format

· Best for image-intensive games where many of the objects are redrawn frequently

Svg

· Not dependent on resolution

· Support for event handlers

· Best for applications with large rendering areas (e.g. Google Maps)

· High complexity slows rendering speed (any applications that overuse the DOM are unpleasant)

· Not suitable for gaming applications

5. Two graphsABDislocation

When the two figure ab dislocation, first use the space to insert a figure C in the middle of two graphs, and then let ABC with their above or below the EFG6 diagram rotation, when the order correction after the C will find that C EFG can be found in the move and AB has been corrected position.
When the abcdef line dislocation becomes fabcde, drag F down to the bottom of a abcdex "A is F" and then turn F to X.
Drag the Abcdex line 1 to the left and then f to the right of X BCDEXF "a under B"
Take x out of the ABCDE, drag it back and straighten it back.

6. Reverse order and discriminant method

* Although have learned the skills of mobile, but a little experience of people know that if the use of random fancy play, will have half the chance of a non-solution, after spending a time to find no solution, that taste is really uncomfortable. If the use of the conversion of the specified pattern of play, especially when someone asked each other to test, finally found to be the case of no solution to tease, not a bit not reconciled? So if you have learned whether there is a solution to the decision method, before moving to determine whether there is a solution, not the anti-can let those who want to tease us are bluffing a leng?
* To determine whether the specified random fancy has a solution, reverse order and discriminant method is easier to get started.
* The steps to distinguish this law are as follows:
1. First step: The space is returned to place.
You can move the space to the lower-right corner with any moving mode. Taking the random pattern of fig. 1 and Fig. 2 As an example, Figure 11 and Figure 12 use different homing methods respectively.

8 4 7 9 Ten 3 5 1 6 2 9 ===> 8 4 7 3 12 13 10 11 5 15 1 6 14 2 (Figure 11) Place the space in place with the first move down and right.
8 2 1 13 10 4 5 147 9 each 3 6 8 ===> 2 1 13 10 4 5 14 7 9 11 6 3 12 15 (Fig. 12) Place the space in place by moving it first and then down.

2. The second step: the number of points in reverse order, and to seek its and.
The number in the digital disk as a series, the order of the left and right, from top to bottom, in Figure 11 to the right of the homing fancy, can be seen as the following series
9, 8, 4, 7, 3, 12, 13, 10, 11, 5, 15, 1, 6, 14, 2
What is reverse order? When the smaller number in the series is behind a larger number, it is reversed.
Take the above sequence as an example,
The number 9 has a total of 8 reverse order, because 1, 2, 3, 4, 5, 6, 7, 8 are in its rear,
The number 8 has a total of 7 reverse order, because 1, 2, 3, 4, 5, 6, 7 are in its rear,
The number 4 has a total of 3 reverse order, because 1, 2, 3 are in its rear,
The number 7 has a total of 5 reverse order, because 1, 2, 3, 5, 6 are in its rear,
The number 3 has a total of 2 reverse, because 1, 2 are in its rear,
The number 12 has a total of 6 reverse order, because 1, 2, 5, 6, 10, 11 are in its rear,
The number 13 has a total of 6 reverse order, because 1, 2 5, 6, 10, 11 are in its rear,
The number 10 has a total of 4 reverse, because 1, 2 5, 6 are in its rear,
The number 11 has a total of 4 reverse, because 1, 2 5, 6 are in its rear,
The number 5 has a total of 2 reverse, because 1, 2 are in its rear,
The number 15 has a total of 4 reverse order, because 1, 2, 6, 14 are in its rear,
The number 1 has 0 reverse order, because it is the smallest number,
The number 6 has a total of 1 reverse, because only 2 in its rear,
The number 14 also has only 1 reverse order, is 2,
The number 2 is the last number in the series, and of course there is no reverse order.
So the reverse is 8 + 7 + 3 + 5 + 2 + 6 + 6 + 4 + 4 + 2 + 4 + 0 + 1 + 1 = 53
3. Step three: judgment. In reverse order and for even there is a solution, for odd is no solution.
Since Figure 5 in reverse order and 53, so the random fancy Figure 11 is no solution.
Please the reader to calculate their own test, Figure 12, the return of the fancy in reverse order and 38, so the random fancy Figure 12 has a solution.
Think of it? In the second step to calculate the reverse order and, in fact, can steal a lazy, only attention and is odd even good, do not have to honestly add total, that very tired! (Can't you understand?) It doesn't matter! As a strange I did not say it just fine)
* Because our purpose of fancy (sequential fancy) and 0 is even, so all the solution of the fancy also must be even in reverse order and.
If our purpose fancy (for example, reverse-order fancy) is reversed and odd, then all the fancy flowers must be odd in reverse.

7. Rotation Discriminant method

* To determine whether the specified random fancy has a solution, the reverse order and discriminant method is easier to get started, but points up a little trouble is not it? If you feel the same, try the alternate discriminant Method!
* The steps to distinguish this law are as follows:
1. First step: The space is returned to place. The operation of the same reverse order and discriminant method.
2. Step two: Write the multiplication of the rotation.
The same number in the digital disk as a left and right, the top down of the sequence, in Figure 11 to the right of the homing fancy, can be seen as the following series
9, 8, 4, 7, 3, 12, 13, 10, 11, 5, 15, 1, 6, 14, 2
Starting with the number 1 test, if its location and values do not match, it is necessary to start the following rotation process:
The first digit of this rotation is the value 1, and its position runs to position 12, which is recorded (1, 12
Position 12 should be a value of 12, but it ran to position 6 went, recorded (1, 12, 6
Position 6 should be a value of 6, but it ran to position 13 went, recorded (1, 12, 6, 13
Position 13 should be a value of 13, but it ran to position 7 went, recorded (1, 12, 6, 13, 7
Position 7 should be a value of 7, but it ran to position 4 went, recorded (1, 12, 6, 13, 7, 4
Position 4 should be a value of 4, but it ran to position 3 went, recorded (1, 12, 6, 13, 7, 4, 3
Position 3 should be a value of 3, but it ran to position 5 went, recorded (1, 12, 6, 13, 7, 4, 3, 5
Position 5 should be a value of 5, but it ran to position 10 went, recorded (1, 12, 6, 13, 7, 4, 3, 5, 10
Position 10 should be a value of 10, but it ran to position 8 went, recorded (1, 12, 6, 13, 7, 4, 3, 5, 10, 8
Position 8 should be a value of 8, but it ran to position 2 went, recorded (1, 12, 6, 13, 7, 4, 3, 5, 10, 8, 2
Position 2 should be a value of 2, but it ran to position 15 went, recorded (1, 12, 6, 13, 7, 4, 3, 5, 10, 8, 2, 15
Position 15 should be a value of 15, but it ran to position 11 went, recorded (1, 12, 6, 13, 7, 4, 3, 5, 10, 8, 2, 15, 11
Position 11 should be a value of 11, but it ran to position 9 went, recorded (1, 12, 6, 13, 7, 4, 3, 5, 10, 8, 2, 15, 11, 9
Position 9 should be a value of 9, but it ran to position 1, but because the rotation of the starting number is 1, so the rotation ended, recorded (1, 12, 6, 13, 7, 4, 3, 5, 10, 8, 2, 15, 11, 9)
The number that is not included in this rotation is only 14, and it happens to be in position 14, so there is no need to make another rotation. The return-to-fancy rotation product of Figure 11 is (1, 12, 6, 13, 7, 4, 3, 5, 10, 8, 2, 15, 11, 9).
3. Step three: Determine the rotation product is even or odd arrangement.
Take each element of rotation minus 1 and add it, and let's call it a length! An even-numbered rotation product is called a even arrangement, and an odd-numbered rotation product is called an odd permutation.
(1, 12, 6, 13, 7, 4, 3, 5, 10, 8, 2, 15, 11, 9) There is only one rotation and the number of elements is 14, so the length is 13, which is an odd arrangement.
4. Fourth step: judgment. If there is a solution for the even arrangement, there is no solution for the odd arrangement.
Since the corresponding rotation product in Figure 11 is an odd arrangement, the random fancy of Figure 11 is no solution.
Please try the reader on their own, the corresponding rotation product of Figure 12 is (1, 3, 13, 4, 6, 12, 14, 8) (5, 7, 9, 10), so the length is (8-1) + (4-1) = 10 is even arranged, so there is a solution.
* Because our purpose fancy (sequential fancy) is even arrangement, so all the solution of the fancy must also be an even arrangement.
If our purpose fancy (for example, reverse fancy) is a singular arrangement, then all the fancy solutions must also be odd-aligned.

3*3 GridComparison of hardship.

* The above demonstration and discussion is to use the general 4 * 4 disk surface, if changed to n * m of the disk, whether it can also leaf out it? Yes, all of the above methods and conclusions apply.
* So what are the commercially available physical digital discs or general gameplay that are mostly made of 4*4? In addition to the physical digital disk to do arbitrarily change the size is very difficult, another reason is that 3 * 3 of the disk only the number 1 of the return is simple, and each of the other numbers to be a big consideration, and 5 * 5 above the disk, more than half of the figures are not challenging, the right two rows and the bottom two columns although it is more difficult degree, but can solve two, it is said to have mastered the mobile skills, and then a lot of similar situation can be smooth clearance, so there is no meaning. The 4*4 of the disc is therefore the most moderate, so everyone is accustomed to

8. Jeig Bnen Use

Now HTML5 big hot, but saw a lot of introduction, are focused on canvas and relatively ignored SVG, I personally feel that these two technologies, complementary advantages, the use of SVG interactive and Cansvas drawing ability, to better play their role.

Previously using pure SVG to do a puzzle demo, now instead of SVG and canvas, took one weeks to rewrite This example, in CHROME17 and FF12 tested. Bi Chun svg speed is fast.

Always optimistic about SVG, but for various reasons, including whether the browser support, etc., has not been widely used. Within the framework of HTML5, SVG has the power to do what it deserves.

Jeig bsin \

HTML5 puzzle game Code - Download channel -CSDN.NET.htm

9. Reference

Mesh Puzzle Skills _ Xin Yang Lou _ Baidu space . htm

Intelligent Jigsaw Skills _ Xin Yang Lou _ Baidu space . htm

Nine basic techniques -- exclude method _ Xin Yang Lou _ Baidu space .htm