HTML5实验报告

HTML5实验报告

1441904232 谢凯

1.实验目的：

通过分析基于青瓷引擎制作的小游戏《神奇的六边形》的制作文档，认识青瓷引擎的特点，以进一步了解HTML5编程。

2.实验内容：

介绍《神奇的六边形》的动画表现部分。

算法部分包括方块飞入，方块消除和分数增加等

实验选取方块飞入为例。

(1)双击Assets/prefab/Shape.bin，编辑预制

(2)选中Shape节点，添加TweenPosition组件，属性设置如下：

动画曲线设置了个“回弹”效果，from和to的值将在代码中动态设置

(3)保存预置

(4)打开Scripts/ui/Pool.js，添加flyIn接口，处理飞入动画的播放

代码如下：

/**

* 播放飞入的动画

*/

Pool.prototype.flyIn = function(index) {

var self = this, o = self.gameObject, children = o.children;

var offset = o.width * (0.5 - 0.165);

// 先确保位置都正确

self.resize();

if (index === 0) {

var o = children[0], c = o.getScript('qc.tetris.ShapeUI');

c.flyIn(offset);

}

if (index === 0 || index === 1) {

var o = children[1], c = o.getScript('qc.tetris.ShapeUI');

c.flyIn(offset);

}

var o = children[2], c = o.getScript('qc.tetris.ShapeUI');

c.flyIn(offset);

};

(5)打开Scripts/ui/ShapeUI.js，添加flyIn接口，处理单个形状飞入动画代码如下：

/**

* 飞入动画

*/

ShapeUI.prototype.flyIn = function(offset) {

var self = this,

tp = self.getScript('qc.TweenPosition');

tp.delay = 0.5;

tp.to = new qc.Point(self.gameObject.x, self.gameObject.y);

tp.from = new qc.Point(tp.to.x + offset, tp.to.y);

tp.resetToBeginning();

tp.playForward();

};

3.实验效果：

代码实现效果如下图所示：

可见右侧方块飞入新的方块。

4.实验体会：