这里介绍的是一款名为jqPuzzle的插件,通过它我们只需要简单的几步就可以制作出自己的web拼图游戏.
实现起来也很简单
1.载入jQuery.js 和jqPuzzle.js以及样式表jquery.jqpuzzle.css:
<script type=”text/javascript” src=”jquery-1.3.2.min.js”></script>
<script type=”text/javascript” src=”jquery.jqpuzzle.packed.js”></script>
<link rel=”stylesheet” type=”text/css” href=”jquery.jqpuzzle.css” />
2.在需要生成拼图的图片加上类:class=”jqPuzzle”
<img src=”iinterest.jpg” class=”jqPuzzle” />
好了~一个web拼图就算完成了(真够简单的=.=),但这只是默认的样式,我们还可以根据需求自定样式(这才是jqPuzzle的强大之处,呵呵):
<img src=”iinterest.jpg” class=”jqPuzzle jqp-en-r3-c5-h5-NDE” />
再去看看预览,是不是发生的变化~其实只是在类中增加一串代码:jqp-en-r3-c5-h5-NDE,下面我们就来看看这串代码是什么意思:
en: 定义界面显示为英语(默认的还有德语,法语,葡萄牙语,但没有汉语…尝试过汉化jqPuzzle,但会报错,可能是不支持中文字符…);
r3-c5: rows:3, columns5 就是将图片分割为3行5列;
h5: hole:5 定义空位的位置(这里还可以定义为s1,就是让空位始终出现在最后.)
NDE: 隐藏界面上的numbers, moves,seconds(还可以定义为SAE:隐藏 shuffle 按钮和 seconds )
最后你还可以修改样式表来定义界面的样式.
