角度と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ループ（12分の120）の長さになることに注意してください。この場合、私はあなたがやろうとしているものに応じて、（％で）あなたの配列をサイクル以上の色を追加することのいずれかをお勧めします：

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

役に立てば幸い！