H5 六边形消除游戏开发

六边形游戏的鼻祖应该是这个 hex-frvr，原作者开发用的是 pixi 游戏引擎，本着快速开发的理念，本游戏采用 cocos creator，UI 延用 hex-frvr。学习过程中，有借鉴各路实现。此源码仅供学习使用，谢谢。

预览

功能介绍

六边形游戏本质是俄罗斯方块，理解这个对接下来的开发会有很大的帮助。

本游戏实现功能如下：

• [x] 六边形棋盘绘制、方块随机生成
• [x] 方块能否落入棋盘的判定
• [x] 方块消除与游戏结束的判定
• [x] 各种动画效果
• [x] 游戏计分

cocos creator

在讲游戏开发思路前，建议先了解 cocos creator

• 文档
• API

必须了解的 API 有：

• Game
• Canvas
• Scene
• Node
• Component
• Sprite
• Texture2D
• Director
• loader
• Event
• Touch
• Action
• Vec2
• Animation
• AnimationClip
• Prefab
• sys

其中，Node、Event、Vec2，是此游戏开发的重点。

开发思路

下面从功能逐一介绍开发思路。

棋盘绘制

棋盘用的是六角网格布局，电子游戏中六角网格的运用没有方形网格那样常见，先来简单了解下六角网格。

六角网格

本文中讨论的六角网格使用的都是正六边形。六角网格最典型的朝向有两种：水平方向( 顶点朝上 )与竖直方形( 边线朝上 )。本游戏用的是，顶点朝上的朝向。

细心的同学会发现，图中有类似坐标系的东西，称之为轴坐标。

轴坐标

轴坐标系，有时也叫做“梯形坐标系”，是从立方坐标系的三个坐标中取两个建立的坐标系。由于我们有约束条件 x + y + z = 0，因此第三个坐标其实是多余的。轴坐标适合用于地图数据储存，也适合用于作为面向玩家的显示坐标。类似立方坐标，你也可以使用笛卡尔坐标系中的加，减，乘，除等基本运算。

有许多种立方坐标系，因此，也自然有许多种由其衍生的轴坐标系。本游戏，选用的是 q = x 以及 r = z 的情况。这里 q 代表列而 r 表示行。

偏移坐标是人们最先会想到的坐标系，因为它能够直接使用方形网格的笛卡尔坐标。但不幸的是ÿ