I am working on a simple game using HTML canvas and JavaScript.
The canvas is as follows:
The canvas part
When the colored ball hits the sides of the image (img 1 and 2 in the above picture), its color will change randomly.
Now, I further want to add a function to it. What I want is that when the colored ball hits the side of the image, I want to change img 1 and 2. How can I do that in my code? I have done some research here and on YouTube but still have no idea. My code is as follows:
var canvas = document.getElementById("canvas_bb84_1");
canvas.width = 1000;
var c = canvas.getContext("2d");
//Draw the image to the canvas
var x = 220;
var radius = 15;
var color = "#0095DD";
function draw() {
c.drawImage(p_fil, 100, 30, 100, 100); //img1
c.drawImage(p_fil_flip, 810, 30, 100, 100); //img2
c.drawImage(p_det_flip, 10, 30, 100, 100);
c.drawImage(p_det, 900, 30, 100, 100);
//Draw the ball
c.beginPath();
c.arc(x, 80, radius, 0, Math.PI * 2, false);
c.fillStyle = color;
c.fill();
c.closePath();
}
//Update the animation of the ball and collision detection
var dx = 4;
function update() {
if (x + radius > 820 || x - radius < 190) {
dx = -dx;
color = "#" + ((1 << 24) * Math.random() | 0).toString(16);
}
x += dx;
}
//Initialize the images
var p_det = new Image();
var p_det_flip = new Image();
var p_fil = new Image();
var p_fil_flip = new Image();
//Animate
function animate() {
p_det.src = "photon_detector.jpg";
p_det_flip.src = "photon_detector_flip.jpg"
p_fil.src = "p_filter_02.jpg";
p_fil_flip.src = "p_filter_02_flip.jpg";
window.requestAnimationFrame(animate);
c.clearRect(0, 0, canvas.width, canvas.height);
draw();
update();
}
animate();
