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

【问题标题】：Storing hexagonal shape grid data into an array将六边形网格数据存储到数组中
【发布时间】：2016-07-01 12:33:39
【问题描述】：

我正在生成六边形网格，如 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 或 update 方法中使用任何条件来检查列是否为空。

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 );
               }
            }
        }
    },

【问题讨论】：

标签： javascript html grid hexagonal-tiles

【解决方案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)。

【讨论】：