함수를 사용하여 다른 함수의 속성을 변경하는 방법은 무엇입니까?

Question

저는 JS에 매우 익숙하고 온라인 과정을 밟았지만 아주 좌절감이 있습니다. 혼자 힘든 시간을 보낸 것처럼 보이므로이 질문에 분명한 대답이 있으면 유감입니다. 기본적으로이 프로그램은 상자 안에 색칠 된 공을 튀게합니다. 벽에 부딪 칠 때마다 색상이 바뀌길 바란다. 모든 정보를 한 함수 아래에 두는 방법을 알아 냈습니다. 그러나 사용하고있는 자습서에서는 (깔끔한 코드 목적으로) 2 가지 함수가 더 좋을 것이라고 말하고 있습니다. 그래서 나는 원하는 것을하는 방법을 이해하기를 정말로 원합니다. 정보를 다른 기능에서 사용할 수있을 때해야 할 일은 앞으로 내가해야 할 일이라는 것을 알기 때문입니다. 나는 중요한 코드 라인에 대해 언급 할 것이다. 도와 줄 수있는 사람에게 정말 감사드립니다.

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 

var x = canvas.width/2; 
var y = canvas.height-30; 

var dx = 4; 
var dy = -4; 

var ballRadius = 30; 

function drawBall() {       \\draws the ball 
    ctx.beginPath(); 
    ctx.arc(x, y, ballRadius, 0, Math.PI*2); 
    ctx.fillStyle = "#ff0000"; 
    ctx.fill(); 
    ctx.closePath(); 
} 

function draw() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    drawBall(); 
    x += dx; 
    y += dy; 
    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { \\says when to bounce 
     dx = -dx; 
     drawBall.ctx.fillStyle = "#ff0000"; \\this line and next line are lines I wrote 
     drawBall.ctx.fill();     \\that are obviously incorrect (same goes for 
    }           \\ if statement below). What am I doing wrong? 
    if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { 
     dy = -dy; 
     drawBall.ctx.fillStyle = "#0095DD"; 
     drawBall.ctx.fill(); 
    } 
} 
setInterval(draw, 10); 

Answer 1

당신이 할 수있는 일은 함수의 동작을 변경하는 매개 변수를 전달하는 것입니다.
이 경우 원하는 색상을 전달하게됩니다.

var canvas = document.getElementById("myCanvas"); 
var ctx = canvas.getContext("2d"); 

var x = canvas.width/2; 
var y = canvas.height-30; 

var dx = 4; 
var dy = -4; 

var ballRadius = 30; 

function drawBall(color) {       // draws the ball 
    ctx.beginPath(); 
    ctx.arc(x, y, ballRadius, 0, Math.PI*2); 
    ctx.fillStyle = color; 
    ctx.fill(); 
    ctx.closePath(); 
} 

function draw() { 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
    drawBall(); 
    x += dx; 
    y += dy; 
    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) { // says when to bounce 
     dx = -dx; 
     drawBall("#ff0000");  
    }           
    if(y + dy > canvas.height-ballRadius || y + dy < ballRadius) { 
     dy = -dy; 
     drawBall("#0095DD"); 
    } 
} 

Answer 2

JavaScript의 개념을 혼합 한 것 같습니다. 가독성과 디자인면에서 볼 때 '클래스'를 만들 것입니다. 이런 식으로 뭔가 :

var ball = new Ball(x, y, radius, color); 

및 Java 스타일의 속성에 액세스 : 당신이 당신의 공의 인스턴스를 만들 수 있습니다

function Ball(x, y, radius, color) { 
    this.x = x; 
    this.y = y; 
    this.radius = radius; 
    this.color = color; 
} 

는

ball.color = "#0095DD"; 

당신은 또한 몇 가지를 추가 할 수 있습니다 공에 대한 방법 :

function Ball(x, y, radius, color) { 
    this.x = x; 
    this.y = y; 
    this.radius = radius; 
    this.color = color; 

    this.draw = function(ctx) { 
       ctx.beginPath(); 
       ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2); 
       ctx.fillStyle = this.color; 
       ctx.fill(); 
       ctx.closePath(); 
    } 
} 

이 클래스와 코드로 코드를 확장 할 수 있습니다. 제 생각에, 당신은 그것을 얻습니다.