如何用HTML5开发一款手机游戏

话提前先简单介绍一下phaser，这是一款HTML5的游戏开发框架，下面的介绍也是基于这个框架进行写的

 

下面这个是游戏的演示，控制白色的方块移动，并躲避黑色的方块，靠吃掉黄色的方块得分

 

---

 

代码1：先搭出来游戏框架

说明：暂时先构建了两个状态函数：Load和Play

Load：用于加载资源，很多游戏中的加载进度条也是写在这里面的

Play：游戏的主运行模块

 

代码2：加载游戏资源，Load模块

下面这个图是验证屏幕尺寸等比例缩放的

下面是引入的图片素材

代码3：创建游戏世界，Play模块的create函数，先定义一些基本信息

 

代码4：创建sprite并显示，sprite是用于操作或者显示动画的游戏元件

this.loadLevel(); //创建sprite（操作的方块、移动的方块、用于吃掉的方块、和被吃掉或撞击后散开的小方块），这个函数在create里被调用 

下面是结果画面的演示图

发现没有黑色来回移动的方块，这是因为虽然把它添加到group中，但没有给他设定一个显示位置，后面的几步会通过移动来显示它

 

代码5：键盘按键操作白块移动

上/下/左/右 我先贴出一个上的例子图，下/左/右 和 上 一样，感兴趣的同学可以读一读源码

this.movePlayer()要加在周期函数的update函数中才可被循环调用

下面是效果图

 

代码6：手机触摸滑屏操作

有很多的原理和代码5的相似，就不添加注释了，注释里记录的是手机操作思想

手机操作暂时演示不了。。。。。

 

代码7：碰撞检测，我也只举一个例子白块碰黄块的例子，白碰黑的同理，感兴趣的可以翻看代码

update函数内部添加下面这个调用

game.physics.arcade.overlap(this.square, this.coin, this.takeCoin, null, this);

这个是覆盖检测，当参数1(square：白块)覆盖了参数2(coin：黄块)，会自动调用参数3(回调函数)，而参数4是重叠后二次检查的回调函数(如果重叠不是最终目的，还需要其他的判断时)，参数4对象应用的上下文(一般都是this)，结果返回true/false

 

下面是takeCoin检测覆盖后触发的函数

 

代码8：粒子发射器，就是撞击后产生的散列效果

this.loadParticles()因为是属于创建函数，创建一次就可以了，所以要放在create里调用

 

代码9：被撞击后的黄块重新生成

这段是代码7中，time.events触发的回调函数，game.time.events.add(500, this.addCoin, this);

意思是当执行到这段代码时，间隔500毫秒后，触发this.addCoin

下面的目前的效果图

 

代码10：spawnEnemies和addEnemy本来想把代码段贴出来，但考虑到和程序的关联性比较强，我就不贴了，感兴趣的同学可以对照着源码来看。

有几行逻辑我单独列出来解释一下：

enemy.body.velocity.x = -100*i*speed; //这个是设定速度，速度是只能设定在物理体上的，有了这个速度就可以自行运动

enemy.body.velocity.y = -100*j*speed; //物理系统的速度有两种，一种是 速度+角度（可以看看api文档），一种就着这个x轴和y轴各自包含一个速度

enemy.reset(game.width/2 +i*8*8, game.height/2 +j*8*8 +j*190); //重置显示的坐标位置，功能和enemy.setTo一样，下面讲区别

enemy.anchor.setTo(0.5); //重设锚点

enemy.checkWorldBounds = true; //检查世界边界

enemy.outOfBoundsKill = true; //超出边界的时候执行kill()

 

再说一下kill()函数，kill不会真正的删除对象，对象还是原来的对象，

只是把下面这3个设置成了false 

this.alive = false; //是否是活着的
this.exists = false; //是否存在
this.visible = false; //是否可见

物理系统的众多运动和动画、补间动画等，都会先判断这几个；

所以当重置reset坐标位置的时候，这几项会重新赋成true，而set则不会

 

---

 

注：源码我放到了附件里

再分享几个网站：
http://www.phaserengine.com/ （这是phaser框架的中文网，吐槽：网站目测是机器翻译的，略有些糟糕）

http://phaser.io/ （这是官方网站，文档例子非常全）

http://phasereditor.boniatillo.com/blog/downloads （官方出的开发工具，收费的，不知道网上有没有破解的）

转载于:https://www.cnblogs.com/wujianbufengsao/articles/6835927.html