const gameContainer = document.querySelector(".
game-container");
const shooter = document.getElementById("shooter");
const pointer = document.getElementById("pointer");
const bubbleRadius = 20;
const shooterWidth = 40;
const shooterHeight = 40;
let currentBubbleColor = "red"; // Initial color of the bubble being shot
let isShooting = false;
let shooterAngle = 0;
// Colors for the bubbles
const bubbleColors = ["red", "green", "blue", "yellow", "purple"];
// Function to change the shooter bubble color
function changeShooterBubbleColor() {
currentBubbleColor = bubbleColors[Math.floor(Math.random() *
bubbleColors.length)];
shooter.style.backgroundColor = currentBubbleColor;
}
// Event listener for mouse movement to adjust the angle of the shooter
gameContainer.addEventListener("mousemove", (event) => {
const mouseX = event.clientX;
const mouseY = event.clientY;
const shooterX = shooter.offsetLeft + shooterWidth / 2;
const shooterY = shooter.offsetTop + shooterHeight / 2;
shooterAngle = Math.atan2(mouseY - shooterY, mouseX - shooterX);
pointer.style.transform = `rotate(${shooterAngle}rad)`;
pointer.style.left = shooterX - 5 + "px";
pointer.style.top = shooterY - 5 + "px";
});
// Function to shoot the bubble
function shootBubble() {
if (isShooting) return;
isShooting = true;
const bubble = document.createElement("div");
bubble.classList.add("bubble", currentBubbleColor);
gameContainer.appendChild(bubble);
const shooterX = shooter.offsetLeft + shooterWidth / 2;
const shooterY = shooter.offsetTop;
bubble.style.left = shooterX - bubbleRadius + "px";
bubble.style.top = shooterY - bubbleRadius + "px";
const speed = 4;
const dx = Math.cos(shooterAngle) * speed;
const dy = Math.sin(shooterAngle) * speed;
function moveBubble() {
const bubbleLeft = parseFloat(bubble.style.left);
const bubbleTop = parseFloat(bubble.style.top);
if (bubbleTop <= 0 || bubbleLeft <= 0 || bubbleLeft >=
gameContainer.offsetWidth - bubbleRadius * 2) {
bubble.remove();
isShooting = false;
return;
}
bubble.style.left = bubbleLeft + dx + "px";
bubble.style.top = bubbleTop + dy + "px";
requestAnimationFrame(moveBubble);
}
moveBubble();
}
// Change color on shooter every 3 seconds
setInterval(changeShooterBubbleColor, 3000);
// Event listener for shooting the bubble on click
gameContainer.addEventListener("click", shootBubble);
