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

· 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 的盘面难易度因此最为适中，所以大家就习以为常了