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);
// 先确保位置都正确
size();
            if (index === 0) {
                var o = children[0], c = o.getScript('qc.tetris.ShapeUI');
                c.flyIn(offset);html动画效果
            }
            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 = Script('qc.TweenPosition');
       
            tp.delay = 0.5;
            tp.to = new qc.Point(self.gameObject.x, self.gameObject.y);
            tp.from = new qc. + offset, tp.to.y);
            tp.resetToBeginning();
            tp.playForward();
};
3.实验效果：
代码实现效果如下图所示：
       
可见右侧方块飞入新的方块。
4.实验体会：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。