코드 수정에 도움을 드리고 싶습니다.

Question

/* Constants */ 
var START_RADIUS = 1; 
var INCREMENT = 1; 
var CHANGE_COLORS_AT = 10; 
var circle; 

function start(){ 
    //Circle is being added once in the start function. 
    circle = new Circle(START_RADIUS); 
    circle.setPosition(getWidth()/2, getHeight()/2); 
    add(circle); 

    //This is the command that will execute every 50 miliseconds. 
    setTimer(grow, 50); 
} 

function grow(){ 
    //This will keep the circle from continually growing past the height of the (premade) canvas. 
    while(circle.getRadius()*2 != getHeight()){ 
     START_RADIUS = START_RADIUS + INCREMENT; 
     circle.setRadius(START_RADIUS); 
     //Changes the color every +10 the radius grows. 
     if(circle.getRadius() % CHANGE_COLORS_AT == 0){ 
      circle.setColor(Randomizer.nextColor()); 
     } 
    } 
} 

이 코드는 지름이 캔버스 상단에 닿을 때까지 지속적으로 커지는 원을 만들기위한 것입니다. 이것은 학교용이며 'codehs.com'웹 사이트에서 매우 단순화 된 버전의 자바 스크립트를 사용하고 있습니다. 나는이 코드에 대해 잠시 동안 작업 해왔고이를 수정하는 방법에 대한 통찰력을 원합니다.

Answer 1

실제로 고쳐졌습니다. 문제는 "while"루프가 하나 있었고 과은 "setTimer"명령이었습니다.이 명령은 어느 정도 while 루프로 작동합니다. 이로 인해 서클이 즉시 전체 크기로 팽창되었습니다. 고정 코드는 여기에 있습니다! VV

/* Constants */ 
var START_RADIUS = 1; 
var INCREMENT = 1; 
var CHANGE_COLORS_AT = 10; 
var circle; 

function start(){ 
    //Circle is being added once in the start function. 
    circle = new Circle(START_RADIUS); 
    circle.setPosition(getWidth()/2, getHeight()/2); 
    add(circle); 

    //This is the command that will execute every 50 miliseconds. 
    setTimer(grow, 5); 
} 

function grow(){ 
    START_RADIUS = START_RADIUS + INCREMENT; 
    circle.setRadius(START_RADIUS); 
    if(circle.getRadius() % CHANGE_COLORS_AT == 0){ 
     circle.setColor(Randomizer.nextColor()); 
    } 
}