HTML5 App实战(6)：拼图游戏

最近喜欢上玩拼图游戏，仔细想了一下，发现用“画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.再向模拟器中插入一个窗口，用作拼图的主界面。窗口上面是一个工具条，下面是一个网格控件。在网格控件的属性对话框中设置可拖动。再向网格控件中放入一个图片控件。

9.再向模拟器中插入一个对话框，用作在拼图过程中，玩家预览原图。在对话框的属性中，设置禁用动画。

9.再向模拟器中插入一个对话框，用作拼图完成时提醒用户。

10.现在开始写代码：

主窗口按钮的点击事件：设置难度系数然后打开图片选择窗口。三个按钮的代码类似，只是难度系数不同。

window.gameDifficult = 3;this.openWindow("win_image_chooser", function (retCode) {console.log("window closed.");}, false);

图片选择窗口上的thumbview的点击事件：设置图片控件的图片。

var src = this.getCurrentImageSrc();var image = this.getWindow().findChildByName("ui-image", true);image.setImageSrc(src);

图片选择窗口上的"Back"按钮的点击事件(自动产生代码)：关闭当前窗口。

var retCode = 0;this.closeWindow(retCode);

图片选择窗口上的"Go"按钮的点击事件：保存当前的选择的图片，然后打开拼图窗口。

var image = this.getWindow().findChildByName("ui-image", true);window.gameImage = image.getHtmlImage();this.openWindow("win_image_puzzle",     function (retCode) {console.log("window closed.");}, false);

拼图窗口上的"Back"按钮的点击事件(自动产生代码)：关闭当前窗口。

var retCode = 0;this.closeWindow(retCode);

拼图窗口上的"Preview"按钮的点击事件(自动产生代码)：打开preview对话框。

this.openWindow("win_image_preview", function (retCode) {console.log("window closed.");}, false);

拼图窗口的onOpen事件：生成随机图片块。

var grid = this.getWindow().findChildByName("ui-grid", true);var rows = window.gameDifficult;var cols = window.gameDifficult;grid.setRows(rows);grid.setCols(cols);var n = rows * cols;var m = n - grid.children.length;for(var i = 0; i < m; i++) {    grid.addChild(grid.dupTemplateChild());}grid.children.length = n;grid.reset =  function() {    var w = grid.w;var h = grid.h;var image = window.gameImage;var imageW = image.width;var imageH = image.height;if(w/imageW > h/imageH) {imageH = imageW * h/w;}else {imageW = imageH * w/h;}var itemW = Math.floor(imageW/cols);var itemH = Math.floor(imageH/rows);var randArr = makeUniqRandArray(0, n-1);for(var i = 0; i < n; i++) {var iter = grid.children[i];iter.setImageSrc(image.src);var randNumber = randArr[i];var r = Math.floor(randNumber/cols);var c = Math.floor(randNumber%cols);var x = c * itemW;var y = r * itemH;iter.index = randNumber;iter.setBorderStyle("Blue", 1);iter.setImageSrcRect(x, y, itemW, itemH);iter.setClickedStyle(UIImage.CLICKED_STYLE_RECT_BORDER, 3);}grid.relayout();}grid.reset();

拼图窗口上网格的onChildDragged事件：移动图片块，如果完成打开提醒对话框。

if(targetChildIndex < 0 || sourceChildIndex >= this.children.length || targetChildIndex >= this.children.length) {    return;}var temp = this.children[sourceChildIndex];this.children[sourceChildIndex] = this.children[targetChildIndex];this.children[targetChildIndex] = temp;for(var i = 0; i < this.children.length; i++) {    var iter = this.children[i];if(iter.index != i) {return;}}//全部完成var grid = this;var win = this.getWindow();this.openWindow("win_done", function (retCode) {if(retCode) {grid.reset();}else {setTimeout(function() {win.closeWindow(0);}, 1000);}}, false);

Preview对话框的onOpen事件：显示图片。

var image = this.getWindow().findChildByName("ui-image", true);image.setImageSrc(window.gameImage.src);

Preview对话框上图片的点击事件：关闭当前窗口。

var image = this.getWindow().findChildByName("ui-image", true);image.setImageSrc(null);var retCode = 0;this.closeWindow(retCode);

拼图完成提醒对话框上的"Back"按钮的点击事件(自动产生代码)：关闭当前窗口。

var retCode = 0;this.closeWindow(retCode);

拼图完成提醒对话框上的"Replay"按钮的点击事件(自动产生代码)：关闭当前窗口，返回1。

var retCode = 1;this.closeWindow(retCode);

好了，基本功能完成了。

11.我们通过菜单"文件“/”在设备上预览“生成一个URL，在实际的设备上看看效果如何。

12.最后当然是生成安装包了，菜单“云编译”/"编译FirefoxOS安装包"。

这里有我们做好的，你可以直接参考：

在线编辑

在线运行