HTML5 App实战(六)：拼图游戏 _HTML/CSS

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.在窗口中放入三个按钮用来选择游戏的难度，难度决定要把原始图片分成的块数。

main

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

image chooser

thumb-view-prop

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

puzzle

grid_prop

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

preview

preview_prop

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

done

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安装包"。

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

在线编辑

在线运行