Untitled
unknown
plain_text
a month ago
3.3 kB
1
Indexable
Never
/** * Class representing a Ball. */ class Ball { /** * Constructor for the Ball class. * * @param {number} x - The x-coordinate of the ball's position. * @param {number} y - The y-coordinate of the ball's position. * @param {number} radius - The radius of the ball. * @param {number} speedX - The speed of the ball in the x-direction. * @param {number} speedY - The speed of the ball in the y-direction. */ constructor(x, y, radius, speedX, speedY) { /** @private */ this.x = x; /** @private */ this.y = y; /** @private */ this.radius = radius; /** @private */ this.speedX = speedX; /** @private */ this.speedY = speedY; } /** * Updates the position of the ball based on its speed. * * @param {number} canvasWidth - The width of the canvas. * @param {number} canvasHeight - The height of the canvas. */ updatePosition(canvasWidth, canvasHeight) { this.x += this.speedX; this.y += this.speedY; // Check if the ball has hit the boundaries of the canvas if (this.x + this.radius > canvasWidth || this.x - this.radius < 0) { this.speedX = -this.speedX; } if (this.y + this.radius > canvasHeight || this.y - this.radius < 0) { this.speedY = -this.speedY; } } /** * Draws the ball on the canvas. * * @param {CanvasRenderingContext2D} ctx - The rendering context of the canvas. */ draw(ctx) { ctx.beginPath(); ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2); ctx.fillStyle = "red"; ctx.fill(); ctx.closePath(); } } /** * Function to initialize and animate the bouncing balls inside a circle. * * @param {HTMLCanvasElement} canvas - The canvas element to draw the balls on. * @param {number} numBalls - The number of balls to create. */ function animateBouncingBalls(canvas, numBalls) { const ctx = canvas.getContext("2d"); const canvasWidth = canvas.width; const canvasHeight = canvas.height; const balls = []; // Create the balls with random positions, radii, and speeds for (let i = 0; i < numBalls; i++) { const x = Math.random() * canvasWidth; const y = Math.random() * canvasHeight; const radius = Math.random() * 20 + 10; const speedX = Math.random() * 4 - 2; const speedY = Math.random() * 4 - 2; balls.push(new Ball(x, y, radius, speedX, speedY)); } // Animation loop function animate() { // Clear the canvas ctx.clearRect(0, 0, canvasWidth, canvasHeight); // Update and draw each ball balls.forEach(ball => { ball.updatePosition(canvasWidth, canvasHeight); ball.draw(ctx); }); // Request the next animation frame requestAnimationFrame(animate); } // Start the animation animate(); } // Usage Example for animateBouncingBalls // Create a canvas element const canvas = document.createElement("canvas"); canvas.width = 800; canvas.height = 600; document.body.appendChild(canvas); // Animate 10 bouncing balls inside the canvas animateBouncingBalls(canvas, 10);