I am making a top view bird game, and trying to change the color of only one of the chosen element from the array. I am pretty new to JavaScript and general. I think I did the choosing part correct, but whatever I do, couldn't manage to change the color. I am only stuck with changing the color part, so didn't include the rest of the code. Cheers!
//Drawing the basic bird shape
function drawBird(ctx, bird) {
const angle = Math.atan2(bird.dy, bird.dx);
ctx.translate(bird.x, bird.y);
ctx.rotate(angle);
ctx.translate(-bird.x, -bird.y);
ctx.fillStyle = "yellow";
ctx.beginPath();
ctx.moveTo(bird.x, bird.y);
ctx.lineTo(bird.x - 30, bird.y + 10);
ctx.lineTo(bird.x - 30, bird.y - 10);
ctx.lineTo(bird.x, bird.y);
ctx.fill();
ctx.setTransform(1, 0, 0, 1, 0, 0);}
//Choosing one of the elements of the array
const randomElement = birds[Math.floor(Math.random() * birds.length)];
//Here suppose to be changing the color
You can add a color parameter to your drawBird function and run it again after randomly choosing a bird
//Drawing the basic bird shape
function drawBird(ctx, bird, color) {
const angle = Math.atan2(bird.dy, bird.dx);
ctx.translate(bird.x, bird.y);
ctx.rotate(angle);
ctx.translate(-bird.x, -bird.y);
ctx.fillStyle = color;
ctx.beginPath();
ctx.moveTo(bird.x, bird.y);
ctx.lineTo(bird.x - 30, bird.y + 10);
ctx.lineTo(bird.x - 30, bird.y - 10);
ctx.lineTo(bird.x, bird.y);
ctx.fill();
ctx.setTransform(1, 0, 0, 1, 0, 0);
}
//Choosing one of the elements of the array
const randomElement = birds[Math.floor(Math.random() * birds.length)];
//Here suppose to be changing the color
drawBird(ctx, randomElement, "purple");