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){varself=this,o=self.gameObject,children=o.children;varoffset=o.width*(0.5-0.165);//先确保位置都正确self.resize();if(index===0){varo=children[0],c=o.getScript('qc.tetris.ShapeUI');c.flyIn(offset);}if(index===0||index===1){varo=children[1],c=o.getScript('qc.tetris.ShapeUI');c.flyIn(offset);}varo=children[2],c=o.getScript('qc.tetris.ShapeUI');c.flyIn(offset);};(5)打开Scripts/ui/ShapeUI.js，添加flyIn接口，处理单个形状飞入动画代码如下：/***飞入动画*/ShapeUI.prototype.flyIn=function(offset){varself=this,tp=self.getScript('qc.TweenPosition');tp.delay=0.5;tp.to=newqc.Point(self.gameObject.x,self.gameObject.y);tp.from=newqc.Point(tp.to.x+offset,tp.to.y);tp.resetToBeginning();tp.playForward();};3.实验效果：代码实现效果如下图所示：可见右侧方块飞入新的方块。4.实验体会：