如何使用一个函数来更改另一个函数的属性？

Question

I'm quite new to JS and have gone through courses online but, very frustratingly, I just seem to have such a hard time on my own so I'm sorry if this question has an obvious answer. Basically, this program bounces a colored ball around within a box. I want that color to change every time it hits a wall. I figured out a way to do so by putting all information under one function but the tutorial I'm using is saying (for tidy code purposes) that 2 functions will be better and so I really just want to understand how to do what I want to do when info is available in different functions since I know I will have to do that in the future. I will comment important code lines. Thank you so much to anyone who can help.

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

what you can do is pass parameters that will alter the behavior of the function.
in this case you will be passing the color you want.

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

It seems that you mix some concepts of JavaScript. So for reasons of readability and design, I would create a 'class' for the ball. Something like this:

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

You can create an instance of your ball with this:

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

and access the properties in Java-style:

ball.color = "#0095DD";

You can also add some methods to your ball:

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();
     }
}

You can extend your code with this class and code. I think, you get it.