atitit.html5 拼图游戏的解决之道.
atitit.html5 拼图游戏的解决之道.
1. 拼图游戏的操作(点击法and 拖动法)
1. 支持键盘上、下、左、右键移动。
2. 支持点击空白模块中的上下左右箭头移动；
3. 支持点击空白模块的临近模块移动。
4. 还是点击法好,兼容性好...手机and电脑
作者:: 老哇的爪子 Attilax 艾龙， EMAIL:1466519819@qq.com
转载请注明来源： http://blog.csdn.net/attilax
2. 凝视:无解的问题(逆序和判别法)
5. 3*3的大概50%无解
6. Grid 旋转的问题..
transform: rotate(40deg)
7. 要应用測试成功的api
Biers yao pin yva time tsainen syaod ok le ..
8. 測试图片数字化,为轻松的測试..
3. 能使用的
HTML5网页拼图游戏代码。支持FF_Chrome和IE9 下载 - 烈火网下载频道.htm
JavaScript版网页拼图游戏，因为本游戏基于HTML5技术，因此仅支持FireFox4.0[及以上版本号] ，Chrome11[及以上版本号]、和IE9以上版本号。
游戏讲解：请将拼图游戏中的图片碎片拼接成右側预览中的模样即获胜。支持键盘上、下、左、右键移动;支持点击空白模块中的上下左右箭头移动;支持点击空白模块的临近模块移动。
4. 拼图游戏实现方式
9. 背景图片offset 方式..
Liehuo的走十这个,,,轻松的..
10. HTML5 Canvas API实现拼图游戏
· 标签：拼图游戏 时间：2014-01-27 已阅读：689
· 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
