Scribd
Upload
111 views

Java Script For Bubble Shooter Game

java script for bubble shooter game

Uploaded by

muryum29
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
111 views

Java Script For Bubble Shooter Game

java script for bubble shooter game

Uploaded by

muryum29
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

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);

You might also like