Angular和CreateJS：为beginFill变量遍历数组

Question

我正在创建一个突破游戏，我真的很喜欢块的颜色因行而异（顶行红色到底行蓝色）。我能够创建砖的行，但我不能迭代填充颜色以不同的方式填充每一行。这里是我有：

组件：提前

import { Component, AfterViewInit } from '@angular/core'; 
import { NgClass } from '@angular/common'; 
import * as createjs from 'createjs-module'; 

@Component({ 
selector: 'breakout', 
templateUrl: './breakout.component.html', 
styleUrls: ['./breakout.component.scss'] 
}) 
export class BreakoutComponent implements AfterViewInit { 
    canvas; 
    ngAfterViewInit(){ 
     var stage = new createjs.Stage("canvas"); 
     var g = new createjs.Graphics(); 
     var x = 0; 
     var y = 60; 
     var rect = new createjs.Shape(g); 
      for(y; y < 120; y+=12){ 
       var fill = [ 
        "red", 
        "orange", 
        "yellow", 
        "green", 
        "blue" 
       ] 
       var i = 0; 
       g.beginFill(fill[i++]); 
       for(x; x < 480; x += 42){ 
        g.drawRect(x, y, 40, 10); 
       } 
       x = 0; 
      } 
     stage.addChild(rect) 
     stage.update(); 
    } 
} 

谢谢！

Answer 1

如果你的方块都是红色的，那么因为你的填充列表和i变量都在你的循环中。每次循环做同样的事情，并且从0开始了：

for (...) { 
    var fill = [ 
     "red", 
     "orange", 
     "yellow", 
     "green", 
     "blue" 
    ]; 
    var i = 0; 
    g.beginFill(fill[i++]); // Red fill 
} 

相反，把你的填充阵列环路（即使是在顶部，因为它没有在循环过程中改变）以外，然后初始化而不是你的i变量。

var fill = [ 
    "red", 
    "orange", 
    "yellow", 
    "green", 
    "blue" 
]; 
var i = 0; 
for (...) { 
    g.beginFill(fill[i++]); 
} 

另外请注意，您的i变量将是你for环（120/12）的长度，所以你会得到一堆的不确定色彩。在这种情况下，我建议，要么骑自行车的阵列（％）或增加更多的颜色，这取决于你正在尝试做的事：

var index = i++ % fill.length; // 0, 1, 2, 3, 4, 0, 1, 2, 3, 4 (etc) 
g.beginFill(fill[index]); 

希望帮助！