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）。

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

1 个答案: