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

【问题标题】：Create a grid and setting colors from an array从数组创建网格并设置颜色
【发布时间】：2021-02-09 20:33:37
【问题描述】：

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

xxxxx 
xxxxx 
xxxxx
...

已经有效：创建一个网格并设置按钮的颜色。
什么不起作用：颜色不在正确顺序中。

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

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

【问题讨论】：

正确的顺序是什么？
@evolutionxbox 在“arrColors”中定义的正确顺序。前 5 种颜色应该是前 5 个按钮，依此类推。
为什么要从 1 开始循环，而不是从 0 开始，因为您使用的是数组

标签： javascript grid-layout phaser-framework

【解决方案1】：

代码有几个问题

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

【讨论】：