前前后后用了将近1个月时间将这个应用完成（虽然还是存在一些bug，界面不是太友好等），开发过程中收获的一些心得拿出来和大家讨论一下吧。
呃，本人只是小鸟一只，对JavaScript的掌握也只是初级阶段，有什么错的请大家包涵啦*^___^*

应用简介
Collage是一个拼图游戏。游戏选取的是三副”霹雳”人物桌布作为拼图材料。游戏所用的资源主要有一张封面，三幅压缩后的霹雳桌布以及以此桌布为原型修改后的提示图片，两幅框架作为选择框。玩家首先进入图片选择场景，在三幅图片里任选一张后进入拼图场景。任一一张拼图都分三关。第一关分为3*3共九幅小图片。第二关分为5*5共二十五幅小图片，第三关为6*6共36幅小图片。在玩家进行游戏的过程中，在后台会有一个计时器记录玩家进行拼图的时间，在每关游戏结束后，会显示游戏时间，并根据此时间给玩家评分（评分规则很简单）。在结束一张拼图的三关后，玩家按相应的键可以返回到图片选择场景，选取另外的图片进行游戏。当然在游戏过程中也可以返回图片选择场景。

开发过程中的一些心得及技巧
1. 让OpenFace来做切割
因为是拼图游戏，所以，如果将每一幅图都在本地切割后，那么图片量会很大，并且也不是很科学。考虑到在OpenFace中，每个View有一个属性“clip“。若
将该属性设置为true的话，那么其子view超过其长宽的部分都会被切割掉。所以可以用父view来切割子view，而每个子view的resource都设置为选择好的图片，
然后将x，y轴坐标依次设置好。例如：若父view的width=height=50，而子view的x=0，y=0那么，这个view将显示整张图片的x：0-50，y：0-50的部分（以
图片的左上角作为坐标原点）。而若子view的x=-50，y=0，那么将显示整张图片的x：50-100，y：0-50的部分。通过这样既可实现OpenFace切割图片。
2. 获取图片
根据选择框的坐标与拼图view中的小图片的坐标作比较，如果坐标相同则返回该view
3. 判断图片是否被选中
在每个包含图片资源的view中添加一个“clicked“属性，拼图场景中在每次响应OK键时，首先获取选择框中的图片，若已经存在被选中的图片（遍历拼图
view的所有子节点，查找”clicked”属性设置为”yes”的节点），则将这两幅图片交换，若没有，将当前选中的view的”clicked”属性设置为”yes”。
4. 判断游戏是否结束
在每一次移动图片之后都应该判断游戏是否应该结束。判断的规则是图片的坐标是否是预期正确的。
5. 打乱图片
可以定义两个数组（或者一个二维数组），arrayX表示view在x方向上的位置，arrayY表示view在y方向上的位置。通过不同的关数给这两个数组赋予不同的
大小和值，再通过这两个数组决定每个子view的坐标，以实现将所有小图打乱。
6. 调试
因为JavaScript的特性，所以调试起来不是很方便。要查看某些变量在某些时刻的属性并不是很容易，所以想到一个很笨的方法。就是在加一些debugTxt的
text标签。可以在运行时，将这些文本标签内容显示为想要查看的变量的值（因为JS可以自动进行类型转换）。例如，要查看id为view1的x的值，只要在合适的函
数里加上一句debugTxt.setText(view1.x + “”);值得注意的是，一般setText的括号里要在每个变量后面加上 +”” 。因为这样，JS会自动将view1.x转化为
字符型变量，才可以正确的显示。（因为主要开发工作是在WebIDE上进行，如果是在本地开发，可以通过查看模拟器的日志文件来查看程序运行过程的变化）
7. 本地开发的一些问题
首先本地开发会遇到的第一个问题就是环境的配置问题。注意端口号和tomcat的版本，按照帮助文档给的帮助就可以解决。
8. 为什么用选择框而不用LzFocus
这和学会用LzFocus的时间也有关。若用选择框可以通过clicked属性来通过坐标交换来实现两个view的交换，如果是LzFocus方法的话，那么需要另外保存一
个对以前节点的引用。各有利弊。
9. 本地编译应用生成.dat文件
曾经提出过一个问题：有些应用，编译能过，但在模拟器上显示的就是一片空白，但反复多编译几次后，这种问题会得到解决，但该编译几次就不好把握了。后来
留意了一下tomcat的控制台，发现其实是自己的问题。只要编译能过，而且保证程序一开始的逻辑没问题，那么一次编译后，模拟器是应该能有东西显示的。问题
出在，一般点击编译后，会弹出一个对话框要求下载文件，有的时候，其他默认下载工具也会弹出来如迅雷，flashget等，这个时候，不要点击取消，即编译完
后，弹出的所有下载框都不要碰，直接去运行模拟器，这样，就可解决上述提到的编译能过，逻辑没错，但无法显示的问题。
当然，编译能过，并不表示一定会有东西显示，前提还要有最基本的逻辑没有错才行。（个人看法 ）

应用开发思路
将游戏划分为三个场景：开始画面、图片选择场景以及拼图场景。以一个变量gameTag来表示。
应用加载时首先调用一个函数，将应用中要用到的资源属性进行设置。将gameTag设置为0，表示加载的时候首先进入开始画面，selectTag设置为零，表示默认选择
的是第一张图片。游戏时间设置为0，因为还未开始游戏

开始画面：
gameTag=0.给玩家显示一张图片。通过按LzKeys.left进入游戏，LzKeys.right退出应用。这张图片是在一个view中给玩家呈现的。另外的一些view标签此时都将
可见性设置为false。

图片选择场景：
gameTag=1.当用户按下LzKeys.left键后，键盘响应时间响应此事件，调用enterGame函数进入图片选择场景。在enterGame函数中将表示选择图片的view标签
以及对应的选择框标签的可见性设置为true（可以用一个约束使这两个view标签的可见性实现共同变化）。玩家通过上下左右键来选择要游戏的图片。当按下上下左右
键时，键盘响应函数根据当前的gameTag来判断该移动哪个选择框（因为在拼图场景里还有另一个选择框，其实用一个选择框就够了）以及如何移动。点击OK键后，
键盘响应函数根据一个标记变量（全局变量）selectTag判断选择的是哪幅图片，进入游戏场景，并将gameTag设置为2.

拼图场景
gameTag=2.默认首先进入的是第一关（9幅小拼图）。用一个标记变量（全局变量）currStage来标示当前的游戏关数。每次在进入拼图场景前，会根据一个全局变
量splitNO来判断要显示多少个拼图view的子view，以及这些子view的width、height、x、y属性。同时，因为将拼图view中的选择框的stretches属性设置为
“both“，所以该选择框会自动调节自己显示时的大小。
在拼图场景中，主要就是移动选择框，通过按OK键选择图片（将包含该图片的view的clicked属性设置为yes），然后继续移动选择框，再按一次OK将两次选择的图片
进行交换（主要就是将两个view的坐标相互交换）并将之前选中的view的clicked属性设置为no。

总结
OpenFace这个平台的入门还是很容易的。Collage这个应用主要就是用最简单的一些JavaScript语句来对一些view的可见性和坐标进行操作，并没有很深的技巧，很多解决问题的方法也很笨拙。

应用的完整源代码可以去
http://webide.openface.org.cn/project/show_project_info_2/101
查看可.