H5游戏开发：FC小蜜蜂

前言

说起任天堂 FC 那是充满我们童年寒暑假的回忆，那时候没有正版红白机，玩的是几十块一台的山寨小霸王，十块一张的卡带，玩着魂斗罗、马里奥、淘金者、快打旋风、打鸭子等等。

进入正题，今天我们来说说怎么做一个 FC 小蜜蜂游戏，游戏玩法是通过操控飞机，通过发射子弹对蜜蜂造成伤害，蜜蜂全部歼灭则视为胜利。

初始化

本次游戏采用 Phaser 引擎进行开发，Phaser 是一个快速、免费、易于维护的开源 2D 游戏框架，支持 JavaScript 和 TypeScript 两种语言开发，采用 Pixi.js 引擎作为底层渲染，内置了物理引擎、粒子动画、骨骼动画等效果。

在 Phaser 中有一个重要的概念，我们需要通过状态（State）来管理游戏中各个不同的场景，这也是 Phaser 官方建议的游戏代码组织方式，场景可以通过 Phaser.Game.state 来添加（add）和启动（start），每个场景有初始化（init）、预加载（preload）、准备就绪（create）、更新周期（update）、渲染完毕（render） 五种状态，按照顺序依次执行，同一时间只能存在一个场景，并且每个场景中至少包含五种状态中的一个。

比如我们的小蜜蜂游戏一共会分为四个场景：开始场景、游戏场景、获胜场景、失败场景

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

var game = new Phaser.Game( 750, 1206, Phaser.AUTO, 'wrapper') var states = {} states.start = { // 开始场景 preload: function() { ... game.load.image( 'example-1', 'images/example-1.png') ... }, create: function() { game.state.start( 'play') // 加载完成后切换到游戏场景 } } states.play = { ... } // 游戏场景 states.victory = { ... } // 胜利场景 states.defeat = { ... } // 失败场景 game.state.add( 'start', states.load) game.state.add( 'play', states.play) game.state.add( 'victory', states.victory) game.state.add( 'defeat' states.defeat) game.state.start( 'start')

无限滚屏