각도 및 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]); 

희망을!