HTML5游戏开发案例教程PPT-第四章.pptxVIP

案例实战篇;引入：;4.1帧动画效果;2. 构建超级玛丽动画效果代码清单4-2所示。 script varisAnimStart = false; //是否开始动画 varMarioMovie = null; //动画函数 varframen = 0; //图片切割个数 var frames = []; //保存每帧动画起始坐标,本例图片共有 for (framen=0; framen15; framen++ ) { frames[framen] = [32*framen, 0]; } //定义每帧图像的宽度和高度 varfWidth = 32, fHeight = 32; function $(id) { returndocument.getElementById(id); } functioninit() { //响应onclick事件 $(btnGO).onclick=function() { ;代码解析：;4.2 跳舞蝴蝶效果;2. 蝴蝶跳舞效果代码清单4-4所示。 ;代码解析： ;4.3 颜色拼图游戏;颜色拼图效果代码清单4-6所示。;颜色拼图效果代码清单;代码解析：;4.4 图像处理效果;2. 图形处理效果代码清单4-8所示。;代码解析：;5. 修改init() 函数调用sample()函数：;7. 修改init() 函数调用drawCharacters()函数：;;9. 修改drawCharacters()函数加上如下一句话设置阴影的颜色、角度、与粗细效果；;10. 修改drawCharacters()函数：;11. 修改drawCharacters()函数添加如下代码：;4.5 处理跑跳效果;2. 定义RunningMan.js来实现跑跳页面初始化设计。;3. 用createjs来实现跑跳效果runner.js代码清单4-16所示。;代码解析：;init()函数创建舞台，设置舞台的背景颜色、大小等，再依次相应两个事件：addEventListener(complete, initGame);舞台准备好之后响应initGame事件；.addEventListener(progress, onFileProgress)程序运行时相应onFileProgress事件preloader.update(e.progress)来进度条时时更新进度； 程序运行效果如下如图4-12所示。 initGame() 函数清除默认的背景效果，spritesheet = new createjs.SpriteSheet创建spriteSheet的图片来源、剪切规格和idle、run和jump的效果图；然后调用buildRunner()和buildButtons()函数； buildRunner()调用runner.js来创建runner对象实例，并设置其y轴为100，将runner对象添加到舞台上； buildButtons()函数调用SimpleButton.js 的new ui.SimpleButton函数库创建简单的JUMP、RUN和IDLE按钮。 程序实现效果如图4-13： ;当jumpBtn被点击时，相应runner.jump()效果。程序实现效果如图4-14所示。 当jumpBtn被点击时，相应runner.jump()效果。 程序实现效果如图4-14所示。 当runBtn被点击时，相应runner.run()效果， 程序实现效果如图4-15： 当jump idleBtn Btn被点击时，相应runner. stand ()效果 程序实现效果如图4-16所示。 ;4.6 实现炫酷效果;1. 构建基本窗口代码清单4-17所示。;2. 构建程序主要功能app.js代码清单4-18所示。;代码解析;addS(count,x,y,speed)有四个参数，其中count指明炫酷数量，x、y为x/y轴炫酷范围、speed来制定炫酷的速度；通过一个for(var i = 0;icount;i++)循环，s = sprite.clone()获得实例对象，设置其出现的位置（x，y）轴、用随机数设置透明度alpha的变化、用随机数设置scaleX缩放效果、设置活动的曲线的变化和滑动的速度（vX，vY）、用随机数来设置滑动的图形vS的scaleX缩放、用随机数来设置滑动的图形vA的alpha透明度的变化； clickCanvas()函数调用addS(Math.random()*200 + 100,stage.mouseX,stage.mouseY,2)函数来规定炫酷效果的属性； moveCanvas()函数调用ad