疯狂的小鸟公开课.ppt

HTML5 -“新窥视 疯狂的小鸟” 讲师：赖岗华 疯狂的小鸟 疯狂小鸟的游戏展示和介绍 所用到的主要知识点 游戏的制作原理分析 游戏的核心技术 HTML的趋势和发展方向 我们的目标 疯狂小鸟的游戏展示和介绍 展示小鸟游戏 所用到的基础知识点 HTML5 新的特性 内容标签：article文章、footer页脚、header页眉、nav导航、section内容部分 进度条progroess 多媒体元素 Audio：音频标签 Video：视频标签 HTML5-Canvas HTML5神器—Canvas 图形绘制标签 1、创建画板 2、初始化绘图笔 3、笔触颜色 4、笔触大小 5、图形的填充颜色 游戏的制作原理分析 本游戏关键步骤的分析： 1、主要在于完善小鸟的重力加速 2、小鸟的空格飞翔 3、障碍物的出现，障碍物的移动 4、碰撞检测 5、分值增加 游戏的核心技术 Phaser：游戏引擎 1、创建游戏对象 2、自主添加游戏元素（绘制游戏元素） 3、物理引擎（刚体、弹簧、碰撞检测） 4、键盘和鼠标的监听技术 游戏初步实现 游戏的前期准备（素材+游戏引擎） 1、背景图片 小鸟图片 砖块图片 2、游戏的引擎:Phaser.min.js 游戏初步实现 前台布局 !DOCTYPE html html head meta charset=utf-8 / title第一个游戏/title style type=text/css #game_div { width: 400px; margin: auto; margin-top: 20px; border:burlywood solid 1px; } /style /head body div id=game_div/div /body /html 游戏初步实现 游戏引擎的使用： script type=text/javascript src=js/phaser.min.js /script 实例化游戏并启动一个游戏script type=text/javascript var game=new Phaser.Game(400,500,Phaser.AUTO,game_div); var game_state=function(){}; game_state.prototype={}; game.state.add(main,game_state); game.state.start(main); /script 游戏初步实现 游戏的几个状态： preload:function(){//预先加载状态 }, create:function(){//游戏初始化 }, update:function(){//游戏的更新状态 每秒调用60次 } 游戏初步实现 预先加载状态 this.game.load.image(background,assets/background.jpg); this.game.load.image(bird,assets/xiaoniao.png); this.game.load.image(zhuan,assets/zhuan.png); 游戏初步实现-初始化 小鸟刚体添加重力-按空格键跳跃 this.game.add.tileSprite(0,0,game.width,game.height,background); this.bird=this.game.add.sprite(100,225,bird); this.bird.body.gravity.y=1000; var space_key=this.game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); space_key.onDown.add(this.jump,this); 游戏初步实现-初始化 小鸟跳跃 jump: function() { this.bird.body.velocity.y = -350; } 游戏初步实现-初始化 障碍物组策略初始化 this.zhuans=this.game.add.group(); this.zhuans.createMultiple(20,zhuan); this.timer=this.game.time.events.loop(1500,this.add_group_zhuans,this); 游戏初步实现-初始化 分组障碍物-障碍物的位置设定 add_group_zhuans:function(){ var hole = Math.floor(Math