How can I apply different color to my JavaScript balls?


#1

I have been trying to use my constructor to apply individual colors to my Javascript balls. This challenge is from page 234 of the JavaScript for kids book. I have tried several methods. The closest solution I have come to is making the balls display a rainbow pattern(still cool but not what I want). I did that by writing this code======> ctx.fillstroke = this.color[Math.floor(Math.random() * this.color.length)]; inside my draw function . I would like to know how to apply one set color to each individual ball in my animation. Here is my code:

\\

Bouncing Ball var Ball = function () { this.x = 100; this.y = 100; this.xSpeed = Math.random() * 10 - 5; this.ySpeed = Math.random() * 10 - 5; this.color = ["Red","Orange", "Yellow", "Green", "Blue", "Purple"]; };

var circle = function (x, y, radius, fillCircle){
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
if (fillCircle) {
ctx.fill();
}else{
ctx.stroke();
}
};

    Ball.prototype.draw = function () {
        ctx.fillStyle = this.color;
        circle(this.x, this.y, 3, true);
               
    };
   //This is what Is the function I used to randomly pick the color. It does not work. 
    var pick = function () {
        
        return this.color[Math.floor(Math.random() * this.color.length)];
    }
    
    
    Ball.prototype.move = function () {
        this.x += this.xSpeed;
        this.y += this.ySpeed;
    };
    
    Ball.prototype.checkCollision = function () {
        if (this.x < 0 || this.x > width) {
            this.xSpeed = -this.xSpeed;
        }
        if (this.y < 0 || this.y > height) {
            this.ySpeed = -this.ySpeed;
        }
    };
    
    var newB = [];
    for( var i = 0; i < 11; i++){
        newB.push("Ball" + [i]);
    }

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    //canvas size 
    var width = canvas.width;
    var height = canvas.height;
    
    for (var i = 0; i< newB.length; i++){
        newB[i] = new Ball();
    }
    
    var ball = new Ball();
  
    setInterval(function (){
        ctx.clearRect(0, 0, width, height);
        for (var i = 0; i < newB.length; i++){
   
        newB[i].draw();
     
        newB[i].move();
     
        newB[i].checkCollision();
        }
        ctx.strokeRect(0, 0, width, height);
    }, 30);
    
</script>
\\\

#2

Hey @zootechdrum I played with something similar last year and stuck it in a code pen - maybe it will give you a solution…

Bouncing Balls on Codepen


#3

I’ve been staring at it for a few hours. Kinda of confusing but I will keep working on it. The answer has to be in there somewhere.


#4

Give each ball a unique ID number and then use javascript to loop through them adjusting CSS for each ID on page render, you could even randomize each color. Anything is possible :smiley:


#5

Thanks for the reply. I figured it out. The book was all about Javascript so CSS was out of scope. Thanks though!