javascript - 从数组创建网格并设置颜色

Question

我需要从 250 种颜色的数组中为颜色选择器创建一个网格。网格布局示例：

xxxxx 
xxxxx 
xxxxx
...

• 已经有效的方法：创建网格并设置按钮的颜色。

• 什么不起作用：颜色的顺序不正确 。

Phaser 3 / JavaScript 代码：

const arrColors = [ '0xF44336', '0xFFEBEE', '0xFFCDD2', '0xEF9A9A', '0xE57373', '0xEF5350', '0xE53935', '0xD32F2F', '0xC62828', '0xB71C1C', '0xFF8A80', '0xFF5252', '0xFF1744', '0xD50000', '0xFCE4EC', '0xF8BBD0', '0xF48FB1', '0xF06292']; 
// Array shortened for readability

for(let xGrid = 1; xGrid < 6; xGrid++) {
    for(let yGrid = 1; yGrid < 12; yGrid++) {
        this.add.sprite( xGrid * 100, yGrid * 100, 'button-color').setTint(arrColors[xGrid+yGrid])
    }
 }

如何按预定义的顺序将颜色设置为网格上的按钮？

标签： javascriptgrid-layoutphaser-framework

Answer 1

代码有几个问题

• Javascript 数组从 0 开始，因此从 1 开始的 for 循环会丢失一些条目。

• xGrid 值每次递增 1，但随后只是
  添加到 yGrid 以获得位置，它需要 xGrid*6 才能正确从 x 行开始。

   const arrColors = [ '0xF44336', '0xFFEBEE', '0xFFCDD2', '0xEF9A9A', '0xE57373', '0xEF5350', '0xE53935', '0xD32F2F', '0xC62828', '0xB71C1C', '0xFF8A80', '0xFF5252', '0xFF1744', '0xD50000', '0xFCE4EC', '0xF8BBD0', '0xF48FB1', '0xF06292']; 
   // Array shortened for readability
  
   for(let xGrid = 0; xGrid < 6; xGrid++) {
       for(let yGrid = 0; yGrid < 12; yGrid++) {
           this.add.sprite( xGrid * 100, yGrid * 100, 'button-color').setTint(arrColors[(xGrid * 6) + yGrid])
       }
    }