· HTML5结合使用Canvas API、文件API与拖放API制作拼图游戏，HTML 5开发精要与实例详解一书的配套示例，请在支持HTML5的浏览器中使用，比如Chrome或火狐以及Opera等浏览器都可以，IE8不行哦。本拼图游戏在运行时，需要用户指定一张图片，游戏会自动打散图片。主要是练习Canvas属性的用法。

11. Canvas 与 SVG 的比较

下表列出了 canvas 与 SVG 之间的一些不同之处。

Canvas

· 依赖分辨率

· 不支持事件处理器

· 弱的文本渲染能力

· 能够以 .png 或 .jpg 格式保存结果图像

· 最适合图像密集型的游戏，其中的许多对象会被频繁重绘

SVG

· 不依赖分辨率

· 支持事件处理器

· 最适合带有大型渲染区域的应用程序（比如谷歌地图）

· 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）

· 不适合游戏应用

5. 两个图AB错位

当两个图AB错位，先利用空格在两个图中间插入一个图C，然后再让ABC与他们上面或下面的EFG6个图旋转，当顺序矫正后抽出C  会发现C EFG在动下就能找回原位  而AB已经矫正了位置。
当ABCDEF整行错位  变成了FABCDE  把F拖下来到A的下面变成ABCDEX【A下面是F】然后把F转到X下面
在把ABCDEx整行向左拖1个格  于是F就到了X的右边即BCDEXF【A在B下面】
把X抽出 ABCDE拖回去  就矫正回来了

6. 逆序和判别法

    * 虽然已学会了移动的技巧，但稍有经验的人都知道，如果採用随机花式的玩法，将会有一半的机率出现无解的情形，花费了一番工夫之后才发现无解时，那种滋味可真不好受。如果採用的是转换指定花式的玩法，尤其是有人出题互考时，最后才发现被以无解的情形来戏弄了，不也有点不甘心？所以如果学会了是否有解的判定法之后，在移动前就判定了是否有解，不是反可让那些想戏弄我们的人被唬得一愣一愣的吗？
    * 要判别指定的随机花式是否有解，逆序和判别法是较易于上手的方法。
    * 本法判别的步骤如下：
         1. 第一步：空格归位。
            可以用任意的移动方式把空格移到右下角。以图 1 和图 2 的随机花式为例，图 11 和图 12 分别採用了不同的归位方式。

 8 4 7 9 12 13 10 3 5 15 1 11 6 14 2 ===> 9 8 4 7 3 12 13 10 11 5 15 1 6 14 2  ( 图 11 ) 以先下移后右移的方式将空格归位。
8 2 1 13 10 4 5 14  7 9 11 3 12 15 6 ===> 8 2 1 13 10 4 5 14 7 9 11 6 3 12 15  ( 图 12 ) 以先右移后下移的方式将空格归位。

         2. 第二步：点数逆序的个数，并求其和。
            把数字盘中的数字当成一个数列，其顺序为由左而右、由上而下，以图 11 右边的归位花式而言，可看成是下面的数列
            9, 8, 4, 7, 3, 12, 13, 10, 11, 5, 15, 1, 6, 14, 2
            什麽是逆序呢？当数列中较小的数字位置在较大数字的后方时，就是逆序。
            以上面的数列为例，
            数字 9 共有 8 个逆序，因为 1, 2, 3, 4, 5, 6, 7, 8 都在它的后方，
            数字 8 共有 7 个逆序，因为 1, 2, 3, 4, 5, 6, 7 都在它的后方，
            数字 4 共有 3 个逆序，因为 1, 2, 3 都在它的后方，
            数字 7 共有 5 个逆序，因为 1, 2, 3, 5, 6 都在它的后方，
            数字 3 共有 2 个逆序，因为 1, 2 都在它的后方，
            数字 12 共有 6 个逆序，因为 1, 2, 5, 6, 10, 11 都在它的后方，
            数字 13 共有 6 个逆序，因为 1, 2 5, 6, 10, 11 都在它的后方，
            数字 10 共有 4 个逆序，因为 1, 2 5, 6 都在它的后方，
            数字 11 共有 4 个逆序，因为 1, 2 5, 6 都在它的后方，
            数字 5 共有 2 个逆序，因为 1, 2 都在它的后方，
            数字 15 共有 4 个逆序，因为 1, 2, 6, 14 都在它的后方，
            数字 1 共有 0 个逆序，因为它就是最小的数了，
            数字 6 共有 1 个逆序，因为只有 2 在它的后方，
            数字 14 也只有 1 个逆序，就是 2，
            数字 2 已是数列中的最后一个数字了，当然没有逆序。
            所以逆序和就是 8 + 7 + 3 + 5 + 2 + 6 + 6 + 4 + 4 + 2 + 4 + 0 + 1 + 1 = 53
         3. 第三步：判定。逆序和为偶是有解，为奇则无解。
            由于图 5 的逆序和为 53，所以图 11 的随机花式无解。
            请读者自行计算试试，图 12 的归位花式其逆序和为 38，所以图 12 的随机花式有解。
            想到了吗？在第二步计算逆序和时，其实可以偷一下懒，只注意和是奇偶就好，不必老老实实的加总，那很累的！(看不懂？没关係！当做尤怪我没说就好了)
    * 因为我们的目的花式(顺序花式)逆序和为 0 是偶数，所以所有有解的花式也一定是偶数逆序和。
      如果我们的目的花式(例如逆序花式)逆序和是奇数，则所有有解的花式也一定是奇数的逆序和。

7. 轮换判别法

    * 要判别指定的随机花式是否有解，逆序和判别法虽然较易于上手，但是点数起来有点麻烦不是吗？如果你有同感，那试试轮换判别法吧！
    * 本法判别的步骤如下：
         1. 第一步：空格归位。同逆序和判别法之操作。
         2. 第二步：写出轮换的连乘积。
            同样的把数字盘中的数字看成是一个由左而右、由上而下的数列，以图 11 右边的归位花式而言，可看成是下面的数列
            9, 8, 4, 7, 3, 12, 13, 10, 11, 5, 15, 1, 6, 14, 2
            由数字 1 开始检验，如果它的位置和数值不符，就要开始以下製作轮换的过程：
            这个轮换的第一个数字是数值 1，它的位置跑到位置 12 去了，记成 (1, 12
            位置 12 应该是数值 12，但它却跑到位置 6 去了，记成 (1, 12, 6
            位置 6 应该是数值 6，但它却跑到位置 13 去了，记成 (1, 12, 6, 13
            位置 13 应该是数值 13，但它却跑到位置 7 去了，记成 (1, 12, 6, 13, 7
            位置 7 应该是数值 7，但它却跑到位置 4 去了，记成 (1, 12, 6, 13, 7, 4
            位置 4 应该是数值 4，但它却跑到位置 3 去了，记成 (1, 12, 6, 13, 7, 4, 3
            位置 3 应该是数值 3，但它却跑到位置 5 去了，记成 (1, 12, 6, 13, 7, 4, 3, 5
            位置 5 应该是数值 5，但它却跑到位置 10 去了，记成 (1, 12, 6, 13, 7, 4, 3, 5, 10
            位置 10 应该是数值 10，但它却跑到位置 8 去了，记成 (1, 12, 6, 13, 7, 4, 3, 5, 10, 8
            位置 8 应该是数值 8，但它却跑到位置 2 去了，记成 (1, 12, 6, 13, 7, 4, 3, 5, 10, 8, 2
            位置 2 应该是数值 2，但它却跑到位置 15 去了，记成 (1, 12, 6, 13, 7, 4, 3, 5, 10, 8, 2, 15
            位置 15 应该是数值 15，但它却跑到位置 11 去了，记成 (1, 12, 6, 13, 7, 4, 3, 5, 10, 8, 2, 15, 11
            位置 11 应该是数值 11，但它却跑到位置 9 去了，记成 (1, 12, 6, 13, 7, 4, 3, 5, 10, 8, 2, 15, 11, 9
            位置 9 应该是数值 9，但它却跑到位置 1 去了，但因为这个轮换的起始数就是 1，所以轮换结束，记成 (1, 12, 6, 13, 7, 4, 3, 5, 10, 8, 2, 15, 11, 9)
            不包括在这个轮换的数值只剩下 14，而它恰好也在位置 14，所以不必製作另一个轮换。图 11 的归位花式轮换积就是 (1, 12, 6, 13, 7, 4, 3, 5, 10, 8, 2, 15, 11, 9) 了。
         3. 第三步：判定轮换积是偶排列或奇排列。
            把每一个轮换的元素个素减 1后相加，其和就姑且称之为长度吧！长度为偶数的轮换积叫做偶排列，长度为奇数的轮换积就叫做奇排列。
            (1, 12, 6, 13, 7, 4, 3, 5, 10, 8, 2, 15, 11, 9) 只有一个轮换且元素个数为 14，所以长度为 13，是奇排列。
         4. 第四步：判定。若为偶排列则有解，为奇排列则无解。
            由于图 11 对应的轮换积是奇排列，所以图 11 的随机花式无解。
            请读者自行试试，图 12 对应的轮换积为 (1, 3, 13, 4, 6, 12, 14, 8)(5, 7, 9, 10)，所以长度为 ( 8 - 1)+ ( 4 - 1 ) = 10 是偶排列，所以有解。
    * 因为我们的目的花式(顺序花式)是偶排列，所以所有有解的花式也一定是偶排列。
      如果我们的目的花式(例如逆序花式)是奇排列，则所有有解的花式也一定是奇排列。

3*3  16  25 grid的困难户比较.

* 以上的示范及讨论都是用一般的 4 * 4 盘面，如果改换成 n * m 的盘面时，是否也可以依样画葫芦呢？是的，以上的方法及结论全部适用。
* 那麽市售的实体数字盘或一般的玩法为什麽大都是採用4*4 的盘面呢？除了实体数字盘要做到任意改变大小实在非常困难外，另一个原因就是 3 * 3 的盘面只有数字 1 的归位是简单的，其他的每一个数字要归位都要大费思量，而 5 * 5 以上的盘面，有一半以上的数字都毫无挑战性，最右两行及最下两列虽然是比较有困难度的，但是能解决两个，就表示已掌握了移动的技巧了，再多的类似情况也可顺利过关，所以并无意义。 4*4 的盘面难易度因此最为适中，所以大家就习以为常了

8. Jeig bnen use

现在HTML5大热，但看了很多介绍，都是重点介绍CANVAS而相对忽略了SVG，我个人感觉这两个技术结合，优势互补，利用SVG的交互性和CANSVAS的绘图能力，才能更好地发挥各自的作用。

以前用纯SVG做到一个拼图的DEMO，现在改为SVG和CANVAS，花了一个星期的时间，重写了这个例子，在CHROME17和FF12中进行了测试。比纯SVG速度快。

一直看好SVG，但由于种种原因，包括浏览器是否支持等等，没有得到广泛的应用。在HTML5的框架内，SVG能够发挥自己应有的威力了吧

Jeig bsin \

HTML5拼图游戏代码 - 下载频道 - CSDN.NET.htm

9. 参考

16格智力拼图技巧_馨阳楼_百度空间.htm

智力拼图技巧_馨阳楼_百度空间.htm

九宫数独基本技巧--摒除法_馨阳楼_百度空间.htm

atitit.html5 拼图游戏的解决之道.,布布扣,bubuko.com

atitit.html5 拼图游戏的解决之道.

码农公寓

1. 拼图游戏的操作(点击法and 拖动法)

1. 支持键盘上、下、左、右键移动；

2. 支持点击空白模块中的上下左右箭头移动；

3. 支持点击空白模块的临近模块移动。

4. 还是点击法好,兼容性好...手机and电脑

2. 注释:无解的问题(逆序和判别法)

5. 3*3的大概50%无解

6. Grid 旋转的问题..

7. 要应用测试成功的api

8. 测试图片数字化,为轻松的测试..

3. 能使用的

4. 拼图游戏实现方式

9. 背景图片offset 方式..

10. HTML5 Canvas API实现拼图游戏