携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情
示例代码采用three.js-r73版本: github.com/mrdoob/thre…
大家平时应该都有玩过游戏，那有没有想过游戏怎么制作呢？让我们通过three.js来制作一个飞行游戏吧。
我们先来看下最终实现效果：
概要
揭示一个游戏的完整制作思路，包括地图、碰撞、模型、移动、摄像等关键技术。
游戏策划
- 制作游戏，需要有一个游戏背景，我们这个游戏展示的是一个拯救的故事
- 一个勇敢的男人，他的女人被恶魔抓走了，藏在一个很远很远的地方，被建筑物包围。这个男人必须驾驶飞行器，穿过一个一个建筑，到达最后一个建筑，就可以救出女人了。飞行过程中，碰撞了建筑，就失败了。
游戏中各个场景和物体的比例
游戏中使用了地面，天空盒，建筑物，飞行器等等，他们的大小是︰
- 天空盒的大小是500050005000米;
- 摄像机至少看1米，至多看10000米;
- 地图的宽度width是12个方块，每个方块的大小是10，所以宽度是120
- 每栋楼房的宽度cubeScale = 10，刚好和地面的一个方块大小相同。
游戏架构
游戏架构是比较复杂的，我们这里使用js中的类来简单表示我们游戏的架构：
- 游戏类GAME: 负责游戏的初始化，开始和结束等。
- 地图类MAPS: 负责存储地图数据，关卡数据和碰撞检测，因为地图数据中存有用于碰撞的信息，所以在地图类中写碰撞较为合适。如果程序大了，就单独用一个类来写碰撞吧。
- 飞行器飞行类: NAVIGATION:键盘控制飞行器的飞行。
游戏的状态机
游戏的状态机解释了我们整个游戏的声明周期，包括
-
游戏开始、游戏运行中和游戏暂停（包括游戏重来一次)
对于我们的飞行游戏需要介绍了就这些了，后面我们要开始实现我们的飞行游戏。
