使用phaser开发战旗游戏

Demo需求

• 六角格地图
• 舰船在地图中进行移动，点击可以选中舰船，弹出操作面板
• 舰船可以移动、攻击
• 带有小地图
• 红蓝双方分步移动，具有战场迷雾

预先研究

六角格绘制

相关资料可以查询网格思想(英文版) (opens new window)、六边形网格(英文版) (opens new window)、六边形网格（中文翻译） (opens new window)、正六边形网格化(Hexagonal Grids)原理与实现 (opens new window)。

网格既可以用四边形，也可以用六边形，相比较而言，六角格提供的距离失真小于正方形网格，部分是因为每个六边形具有比正方形更多的非对角邻居。

六边形相比四边形，难点在于：（1）平面使用六角格划分更加复杂。由于六角格有六个边，内角为120度，划分麻烦；（2）每个网格的位置确定困难。六角格划分平面时可以使用两种划分方法，分别是使用上下平、左右平的网格进行划分，每种划分又有两种不同的坐标确定方式，如下图所示。

比较好的办法是采用“x-y-z”定位方式，即把六角格看成是三维坐标系中的格子，这样每个格子有唯一确定的坐标点。

小地图设置

phaser3中提供了垂直视角的游戏示例thrust (opens new window)以及带有小地图的游戏样式minimap-camera (opens new window)。

舰船素材

素材可以到爱给网-舰船游戏素材 (opens new window)进行下载，已经下载的游戏素材照片有下面这些。