mercredi 30 novembre 2016

js : canvas hex board game

I'm developing a hex-based board game for 3 or 2 players.

Following this excellent tutorial :

http://ift.tt/1xSfUuM

I'm now able to draw hex tiles with in-board ones and wall/holes (tiles outside the map, no display, no interactions)

For the moment and for debugging purposes, the default behavior is to display map tiles, with cube hex references on them, and setting up the background according to tile owned data.

Very basic for.in loop :

var layout = ...;
var ctx = ...;
var tile;

for(var ref in this.tiles) {
  tile = this.tiles[i];
  // something like tile { hex : {q:q,r:r,s:-q-r}, data : { ...} }
  this.render(ctx, layout, tile);
}

Where this.render is a board's method wich calls in turn this.drawBackGround, this.drawOutline, this.drawCoords... and so forth.

But I wish to keep things generic and carry drawing methods outside hex library perimeter...

How does achieve this ?

Tiles should hold : - sprites : who owns the tile, with what type of pawn ? - background gradient colored differently depending on player - animations when dropping or capturing players pawns... - behavior : selectable or not

I guess I have to inject some dependencies, a kind of theme manager for the whole board and draw tiles via a set of main rendering callbacks and various helper sub-callbacks...

Is it the right way ?

Aucun commentaire:

Enregistrer un commentaire