将六边形网格数据存储到数组中

Question

我正在按照 Amit Patel 的网站中的说明生成六边形网格 redblobgames.com

我已经测试了网格和所有东西，包括坐标都是正确的。

现在我想将网格数据存储到一个数组中。我部分弄明白了，但主要问题是某些列从索引 1 而不是 0.

开始

所以我想找到一种方法，如何以相同的顺序放置六边形，但都从 0.

开始

必须根据 [q,r, -q-r] 方格位置计算索引，这样我就可以使用相同的技术访问数组。

这就是我现在生成网格和存储数据的方式：

for (var q = -this.grid_r; q <= this.grid_r; q++) {
        var r1 = Math.max(-this.grid_r, -q - this.grid_r);
        var r2 = Math.min(this.grid_r, -q + this.grid_r);
        for (var r = r1; r <= r2; r++) {
            row = r + this.grid_r ;
            col = (q+Math.floor(r/2)) + this.grid_r;
            if( ! this.hexes[ row ] ){
                this.hexes[ row ] = [];
            }
            n_hex = new Hex( q, r, this.layout );
            this.hexes[ row ][ col ] = n_hex;
        }
    }

从数据的角度来看，数组是这样的。

    0   1   2   3   4   5   6
0       0   0   0   0   
1       0   0   0   0   0 
2   0   0   0   0   0   0   
3   0   0   0   0   0   0   0
4   0   0   0   0   0   0   
5       0   0   0   0   0   
6       0   0   0   0

我只是想避免在绘制或更新方法中使用任何条件来检查列是否为空。

draw: function( ctx ){
        for( var r = 0, r_l = this.hexes.length; r < r_l;  r++ ){
            for( var c = 0, c_l = this.hexes.length; c < c_l;  c++ ){
               if( typeof( this.hexes[r][c]) !== "undefined" ){ 
                   this.hexes[r][c].draw( ctx );
               }
            }
        }
    },

Answer 1

您的外循环是 q，您的内循环是 r。您的数组索引需要遵循相同的结构，使用 this.hexes[col][row] 而不是 this.hexes[row][col]:

for (var q = -this.grid_r; q <= this.grid_r; q++) {
    var r1 = Math.max(-this.grid_r, -q - this.grid_r);
    var r2 = Math.min(this.grid_r, -q + this.grid_r);
    for (var r = r1; r <= r2; r++) {
        col = q + this.grid_r;
        row = r - r1;
        if (!this.hexes[col]) { this.hexes[col] = []; }
        this.hexes[col][row] = new Hex(q, r, this.layout);
    }
}

col 将 q 减去 q 循环开始的位置 (-this.grid_r)。 row 将是 r 减去 r 循环开始的位置 (r1)。

将六边形网格数据存储到数组中

Storing hexagonal shape grid data into an array

html

javascript

grid

hexagonal-tiles