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

问题描述

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

Iterable

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

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

Phaser 3 / JavaScript 代码：

xxxxx 
xxxxx 
xxxxx
...

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

解决方法

代码有几个问题

• Javascript 数组从 0 开始，因此 for 循环从 1 开始 遗漏了一些条目。

• 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])
       }
    }