最近喜欢上玩拼图游戏，仔细想了一下，发现用“画app吧”开发拼图游戏其实非常简单。这里还是以FirefoxOS为例开发一个美女拼图游戏，“画app吧”是HTML5 app开发工具，所以这个拼图游戏是可以在所有支持HTML5的手机上运行（当然要手机配置要好点才行）的。有前面几篇文章作为基础，从今天开始的文章里，生成界面的部分就不再详细说明，有任何疑问请在文章后面留言。

1.用支持HTML5的浏览器(Chrome/Firefox/Safari/IE9+)打开http://www.drawapp8.com/appedit.php。

选择”新建“创建一个新的app，缺省情况下的设备是iphone5（或者其它设备）。

2.现在我们把设备切换成FirefoxOS的手机。双击设备打开设备的属性对话框，在设备列表中选择firefoxOS的手机。

3.选择“确定”之后，我们就可以看到iphone5变成了FirefoxOS手机了。我们不需要上面的toolbar，把它删除掉。

4.在窗口中放入三个按钮用来选择游戏的难度，难度决定要把原始图片分成的块数。

5.再向模拟器中插入一个窗口(菜单"插入"->"窗口")，用来选择图片。窗口上面是一个图片控件，中间是一个缩略图控件，下面是两个按钮（如下图）。在缩略图控件的属性对话框中填入准备好的图片的URL。我把图片放在csdn code上的，因为csdn code不支持外链，所以还是通过getimage.php作为代理访问。

6.再向模拟器中插入一个窗口，用作拼图的主界面。窗口上面是一个工具条，下面是一个网格控件。在网格控件的属性对话框中设置可拖动。再向网格控件中放入一个图片控件。