今天给大家带来一款美女拼图游戏,拼图游戏十分简单,就是将一张好好的图分成若干的小块,然后又将若干的小块拼回成一张图。那么是怎么实现的?对没错,还是要用到我们的老朋友,Jquery!
实现原理:
1.首先,找到一张图,然后把它打成碎片。打碎的方法很简单,创建若干个格子,设置背景为同一张图片,通过改变"background-position"来形成不同的碎片。
2. 编写拖动程序,让碎片可随意拖动,并当拖到特定的位置时,和对应的图片交换位置。
3. 绑定事件,这个很关键,拖动的程序一定要可以灵活添加和移除。这里我没使用"标志判断",而是用到了"$.Callbacks"。
4. 添加条件判断,拖拽图片成功后执行,若完成的图片和原图一致,则为成功。
完成上面的这些核心功能,再增加一些必要的周边功能,如"开始"、"重置"、"下一张"和设置碎片的多少。这样,更能增加游戏的趣味性。
这个web系统可以内置到您的网页上,增加您网站的趣味性和粘性。内置到404页面上是个不错的选择。