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

希望幫助！