const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
// Set canvas size
canvas.width = 600;
canvas.height = 400;
// Bubble colors
const colors = ['#ff6347', '#32cd32', '#1e90ff', '#ff1493', '#ff8c00'];
// Bubble class to represent each bubble
class Bubble {
constructor(x, y, radius, color) {
this.x = x;
this.y = y;
this.radius = radius;
this.color = color;
this.speed = 3;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
}
move() {
this.y -= this.speed;
}
}
// Shooter class to represent the shooting mechanism
class Shooter {
constructor() {
this.x = canvas.width / 2;
this.y = canvas.height - 30;
this.radius = 10;
this.color = '#000000';
this.angle = 0;
this.speed = 6;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = this.color;
ctx.fill();
ctx.closePath();
}
shoot(angle) {
const bullet = new Bullet(this.x, this.y, 5, angle);
bullets.push(bullet);
}
}
// Bullet class to handle the shooting
class Bullet {
constructor(x, y, radius, angle) {
this.x = x;
this.y = y;
this.radius = radius;
this.angle = angle;
this.speed = 8;
}
draw() {
ctx.beginPath();
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
ctx.fillStyle = '#000000';
ctx.fill();
ctx.closePath();
}
move() {
this.x += this.speed * Math.cos(this.angle);
this.y -= this.speed * Math.sin(this.angle);
}
}
// Create arrays to hold bubbles and bullets
let bubbles = [];
let bullets = [];
// Shooter instance
const shooter = new Shooter();
// Create random bubbles
for (let i = 0; i < 5; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * 100 + 50;
const radius = 15;
const color = colors[Math.floor(Math.random() * colors.length)];
bubbles.push(new Bubble(x, y, radius, color));
}
// Handle user input for shooting
document.addEventListener('mousemove', (event) => {
const angle = Math.atan2(event.clientY - canvas.offsetTop - shooter.y, event.clientX - canvas.offsetLeft - shooter.x);
shooter.angle = angle;
});
document.addEventListener('click', () => {
shooter.shoot(shooter.angle);
});
// Update game logic
function updateGame() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw and move shooter
shooter.draw();
// Draw and move bubbles
for (let i = 0; i < bubbles.length; i++) {
bubbles[i].draw();
bubbles[i].move();
}
// Draw and move bullets
for (let i = 0; i < bullets.length; i++) {
bullets[i].draw();
bullets[i].move();
}
requestAnimationFrame(updateGame);
}
// Start the game loop
updateGame();
No title
•