laurelch / hexagon

An HTML5 game on a hexagonal map implemented with Stage.js.

Hexagon

• Hexagon
  • Goal
  • Implementation
  • Gameplay
    • Lv. 1
    • Future
  • References
    • Theories
    • Implementations
  • Timeline & To-do List
    • Versions
    • Elements
    • Gameplay
    • UI/UX
    • Bugs
    • Utilities

Goal

Implement a game involving one or more players in the future, where they move, collaborate, and fight enemies in a hexagonal grid.

Implementation

This project is implemented in HTML5, CSS, and JavaScript with Stage.js.

Gameplay

The player controls the character (represented as a circle) that starts from the center of the screen and will encounter random enemies.

Lv. 1

The player toggles the moving range and wins if they move to the hexagon cell where the enemy resides.

Future

Several forms of attack will be available for players to choose from. Different forms may have different ranges, distances, and damage.

References

Theories

• Red Blob Games | Hexagonal Grids
• 石鸦的博客：战术级战棋设计思考随笔1-战棋分类

Implementations

• Stage.js | 2D HTML5 rendering and layout engine
• eperezcosano/hexagonal-grid: How to draw a hexagonal grid on HTML Canvas

---

Timeline & To-do List

Versions

• Lv. 1 - A player can move from one hexagon cell to another within a defined range
  • implementation time range 5/9/22 ~ 5/25/22, with ~28 hours
• Lv. 2 - A player can move and attack enemies while moving in the hexagon grid
• Lv. 3 - To be continued...

Elements

Lv. 1

• Create a hexagon grid.
• Create a basic shape for players and enemies (round shape).

Lv. 2

• Create a basic shape for the environment and obstacles.
• Create complex shapes for players and enemies.

Gameplay

Lv. 1

• Move the player from one hexagon cell to another with a mouse click.
• Move player with step-wise animation.
• Show a range of possible moves with color.
• Constrain player to move within the range.
• Show different types of move/attack - Part 1.
  • 1. Move between adjacent cells, with a range of 360°, distance toggled by key.
• Add enemies that appear randomly in the view and will disappear if the player moves to that cell.

Lv. 2

• [Canceled] Add direction of player.
• Move player with WASD.
• Show different types of move/attack - Part 2.
  • 2. Attack fan-shaped area with a specified degree.
  • 3. Attack distant cells with specified rules.
• Allow player to attack the enemies within attack range by mouse click.

UI/UX

Lv. 1

• Add styled instructions.

Lv. 2

• Add HP bar.
• Add skill information.

Bugs

Lv. 1

• Distance does not reflect the third coordinate.
• While the player is moving, the user can still click any cells to interfere with the move.
• The colored hexagon cells are on top of existing enemy cells. Temporary workaround: set alpha (transparency) = 0.2.

Lv. 2

• Irregular shape is not rotated with respect to its center.

Utilities

• Bach script to convert MOV to GIF: demo/mov_to_gif.sh.