Распечатать текст при изменении цвета пути onclick

Question

Я пытаюсь создать игру, в которой вам нужно щелкнуть по кругам. Каждый круг меняет цвет, когда вы нажимаете на него. Я хочу, чтобы он сказал «поздравления», когда были нажаты все круги, но на данный момент он показывает «поздравления» сразу после нажатия одного круга. Любая идея, как я мог это исправить?

var text = new PointText(view.center); 
text.content = 'Congrats'; 
text.visible = false; 
text.style = { 
    fontFamily: 'Courier New', 
    fontWeight: 'bold', 
    fontSize: 100, 
    fillColor: 'black', 
    justification: 'center' 
} 

for (l = 0; l < balls.length; l++) { 
    balls[l].onClick = function(event) { 
     counter++ 



    this.fillColor = '#860d2b'; 
    var areAnyCoral = false; 
    for (var j = 0; j < balls.length; j++) { 
     if (balls[j].fillColor === 'coral') { 
      areAnyCoral = true; 
     } 
    }; 
    if (areAnyCoral === false) { 
     text.visible = true; 
    } 

} 

}

Answer 1

Я думаю, вы должны проверять против counter, а не цвет заливки, для text.visible собственности. Имеет ли это смысл?

var counter = 0; 
var ball1 = { 
    color: "notCoral" 
}; 

var ball2 = { 
    color: "notCoral" 
} 

var balls = [ball1, ball2]; 

balls.forEach(function(ball) { 
    ball.onClick = function(event) { 
    if (ball.color == "notCoral") { 
     ball.color = "coral"; 
     counter++; 
    } 

    if (counter == balls.length) { 
     text.visible = true; 
    } 
    } 
}); 

Answer 2

На самом деле, вам нужно изменить:

balls[j].fillColor === 'coral'; 

к:

balls[j].fillColor.equals('coral'); 

потому что FillColor является объектом, вы должны использовать "равно" метод для сравнения строк цвета например: http://paperjs.org/reference/color/#equals-color