在介绍小游戏之前，先来看一个框架Phaser。Phaser框架是一个快速、免费、开源的H5游戏开发框架，提供Canvas和WebGL两种渲染方式，兼容PC和手机浏览器。1.Phaser版本在开始Phaser游戏之前，需要定义一个Phaser.Game对象实例，同时向该实例传递配置信息：vargame=Phaser.Game(config)。在Phaser2版本中，定义了一个全局变量，作为几乎所有系统或场景的入口。但升级到Phaser3版本后，全局变量不再用于存储游戏实例。在介绍Phaser2版本之前的小游戏之前，我们先来看一个框架，Phaser。Phaser框架是一个快速、免费、开源的HTML5游戏开发框架，提供Canvas和WebGL两种渲染方式，兼容PC和手机浏览器。1.Phaser版本在开始Phaser游戏之前，需要定义一个Phaser.Game对象实例，同时向该实例传递配置信息：vargame=Phaser.Game(config)。在Phaser2版本中，定义了一个全局变量，作为几乎所有系统或场景的入口。但升级到Phaser3版本后，全局变量不再用于存储游戏实例。Phaser2版本之前和Phaser3版本之后constconfig={};Phaser.Game(config);二、游戏配置configconstconfig={type:'Phaser.AUTO',title:"Starfall",width:800,height:600,parent:"game",backgroundColor:"#18216D",scene:[WelcomeScene,PrizeScene,GameScene,ScoreScene],transparent:false,antialias:true,loader:{baseURL:'https://raw.githubusercontent.com/wqjiao/phaser-prize/master/',//资源基地址crossOrigin:'anonymous'}physics:{default:"arcade",arcade:{debug:false}},}1.type游戏使用的渲染环境可选值：Phaser.AUTO,Phaser.WEBGL,Phaser.CANVAS推荐值：Phaser.AUTO自动尝试使用WebGL，如果浏览器或设备不支持，会回退到Canvas父节点：Phaser生成的canvas元素canvas会直接添加到文档调用脚本的节点上，父容器父级也可以在游戏配置中指定。2.title游戏界面的标题3.width,heightPhaser生成的画布大小，即游戏界面的分辨率默认：width--800，height--6004.parent自定义父容器Phaser5生成的画布（游戏界面）backgroundColor游戏界面背景色，Phaser3版本配置项6.scene游戏场景singlesceneconstconfig={scene:{preload:preload,//preloadcreate:create,//生成游戏界面update:update,//更新游戏界面},}多场景//游戏配置constconfig={scene:[welcomeScene,gameScene],}//Scene1letwelcomeScene=newPhaser.Class({Extends:Phaser.Scene,initialize:functionwelcomeScene(){Phaser.Scene.call(this,{key:'welcomeScene'});},//预加载资源preload:function(){this.load.image('wheel','assets/wheel.png');},//生成游戏界面create:function(){//游戏界面跳转this.input.on('pointerdown',function(){this.scene.start('游戏场景');}，这）;},//更新游戏界面update:function(){console.log('update')},});//Scene2letwelcomeScene=newPhaser.Class({Extends:Phaser.Scene,initialize:functiongameScene(){Phaser.Scene.call(this,{key:'gameScene'});},//预加载资产preload:function(){this.load.image('pin','assets/pin.png');},//生成游戏界面create:function(){//游戏界面跳转this.input.on('pointerdown',function(){this.scene.start('welcomeScene');},this);},//更新游戏界面update:function(){console.log('update')},});以上是Phaser3版本的配置，但是Phaser2版本中的场景设置放在States中：vargame=newPhaser.Game(240,400,Phaser.CANVAS,'game');游戏.States={};game.States.preload=function(){this.preload=function(){game.load.image('wheel','assets/wheel.png');game.load.image('pin','assets/pin.png');};this.create=function(){//点击Canvas——场景跳转game.input.onDown.add(function(){game.state.start('main');},this);};};game.States.main=function(){这个。创建=函数（）{}；日is.update=function(){};};7.transparent是否设置游戏界面透明，默认false，Phaser2版本配置项8.antialias是否显示图片抗锯齿，默认true9.loader表示加载器baseURL--资源基本地址10.physics游戏物理引擎配置3.PhaserAPI分为三个阶段（preload,create,update）介绍Phaser3API1.preloadpreload表示预加载函数，预加载需要在Phaser函数中调用Loaderpreload(){this.load.setBaseURL('https://raw.githubusercontent.com/wqjiao/phaser-prize/master/');this.load.setCORS('匿名');this.load.setPath('资产/');this.load.image('天空','天空.png');this.load.spritesheet('dude','dude.png',{frameWidth:32,frameHeight:48});this.load.image('btnStart','assets/btn-start.png');}this.load.setBaseURL(basePath)修改服务器基路径basePath--基路径地址（资源所在的服务器地址），如果所有场景的图片路径都一样，可以在config的loader中预先配置，但是在本地运行时，需要注意环境搭建，可以在本地搭建一个服务，也可以将资源放在远程服务。this.load.setCORS([crossOrigin])设置加载文件时使用的跨域资源共享值this.load.setPath('assets/')设置资源路径，类似于this.load.setBaseURL(basePath)这个。加载。image(key,[url])preloadedimagekey--表示资源的key，这个字符串是指向加载资源的链接，用于生成游戏对象。url--表示图片路径this.load.spritesheet(key,[url],[frameConfig],[xhrSetting]);this.load.spritesheet({key:'bot',url:'images/robot.png',frameConfig:{frameWidth:32,frameHeight:38,startFrame:0,endFrame:8}});key--精灵图片的keyurl--精灵图片的路径frameConfig--帧配置对象，在至少一个图标的宽度和高度属性frameWidth,frameHeightxhrSetting--XHR设置配置对象。用于替换loader默认的XHR设置，不常用。this.load.audio(key,[urls])预加载音频this.load.bitmapFont(key,[url])预加载字体图像文件this.load.bitmapFont({key:'goldenFont',textureURL:'images/GoldFont.png',fontDataURL:'images/GoldFont.xml'});textureURL--加载的字体图片文件的绝对或相对URLfontDataURL--加载的字体xml数据文件的绝对或相对URL2，createcreate表示生成/creation函数，生成游戏对象，比如preload函数中预加载的图片，在canvas函数中生成并显示create(){letsky=this.add.image(400,300,'sky');天空.setOrigin(0,0);letdude=this.add.sprite(32,48,'dude');让imgText=this.add.text(60,70,'');this.add.button(200,300,'btnStart',function(){this.scene.start('GameScene');},this);}this.add.image(x,y,[key])添加imagex,y--图像坐标；key--在preload中预加载图片的key注意：添加图片的顺序是级联的this.add.sprite(x,y,[key])添加精灵图片x,y--图片坐标；preload中预加载图片的key注意：动画可以设置this.anims.create([config])//向左走this.anims.create({key:'left',frames:this.anims.generateFrameNumbers('伙计'，{开始：0，结束：3}），帧率：10，repeat:-1});//转身this.anims.create({key:'turn',frames:[{key:'dude',frame:4}],frameRate:20});//向右走this.anims.create({key:'right',frames:this.anims.generateFrameNumbers('dude',{start:5,end:8}),frameRate:10,repeat:-1});setOrigin(originX,originY)设置图像的原点位置(0,0)||(0)--图像左上角(0.5,0.5)||(0.5)--图片中心使用Phaser2版本中的anchor锚点设置anchor.set(0.5)this.add.text(x,y,[text])添加文字内容x,y--文字坐标;text--文本内容注意：可以通过imgText.text='testtext'来设置文本内容。add.button(x,y,[key],function(){},this)添加按钮this.input.on('pointerdown',function(){},this)clickcanvasthis.scene.start([scene])场景跳转场景--场景名称3，updateupdate表示更新函数，关注canvascity，可以执行这个函数
