CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bubble Pop Blitz</title>
<style>
.bubblePopBlitz7823-body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #6e8efb, #a777e3);
}
.bubblePopBlitz7823-container {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 20px;
}
.bubblePopBlitz7823-game-area {
width: 400px;
height: 600px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 10px;
position: relative;
overflow: hidden;
}
.bubblePopBlitz7823-info-panel {
width: 200px;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 10px;
padding: 20px;
color: white;
}
.bubblePopBlitz7823-title {
font-size: 24px;
margin-bottom: 10px;
}
.bubblePopBlitz7823-description {
font-size: 14px;
margin-bottom: 20px;
}
.bubblePopBlitz7823-instructions {
font-size: 14px;
margin-bottom: 20px;
}
.bubblePopBlitz7823-score {
font-size: 18px;
margin-bottom: 20px;
}
.bubblePopBlitz7823-button {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
.bubblePopBlitz7823-button:hover {
background-color: #45a049;
}
.bubblePopBlitz7823-bubble {
position: absolute;
border-radius: 50%;
cursor: pointer;
}
@media (max-width: 768px) {
.bubblePopBlitz7823-container {
flex-direction: column;
align-items: center;
}
.bubblePopBlitz7823-game-area {
width: 300px;
height: 450px;
}
.bubblePopBlitz7823-info-panel {
width: 300px;
margin-top: 20px;
}
}
</style>
</head>
<body class="bubblePopBlitz7823-body">
<div class="bubblePopBlitz7823-container">
<div class="bubblePopBlitz7823-game-area" id="gameArea"></div>
<div class="bubblePopBlitz7823-info-panel">
<h1 class="bubblePopBlitz7823-title">Bubble Pop Blitz</h1>
<p class="bubblePopBlitz7823-description">Pop as many bubbles as you can before they reach the top!</p>
<div class="bubblePopBlitz7823-instructions">
<h3>How to play:</h3>
<ul>
<li>Click on bubbles to pop them</li>
<li>Gain points for each popped bubble</li>
<li>Don't let bubbles reach the top</li>
<li>Game speed increases over time</li>
</ul>
</div>
<div class="bubblePopBlitz7823-score" id="score">Score: 0</div>
<button class="bubblePopBlitz7823-button" id="startButton">Start Game</button>
<button class="bubblePopBlitz7823-button" id="newGameButton">New Game</button>
<button class="bubblePopBlitz7823-button" id="pauseButton">Pause</button>
</div>
</div>
<script>
const gameArea = document.getElementById('gameArea');
const scoreElement = document.getElementById('score');
const startButton = document.getElementById('startButton');
const newGameButton = document.getElementById('newGameButton');
const pauseButton = document.getElementById('pauseButton');
let score = 0;
let gameInterval;
let bubbles = [];
let gameSpeed = 2000;
let isGameRunning = false;
let isPaused = false;
function createBubble() {
const bubble = document.createElement('div');
bubble.classList.add('bubblePopBlitz7823-bubble');
const size = Math.random() * 40 + 20;
const left = Math.random() * (gameArea.offsetWidth - size);
bubble.style.width = `${size}px`;
bubble.style.height = `${size}px`;
bubble.style.left = `${left}px`;
bubble.style.bottom = '0';
bubble.style.backgroundColor = getRandomColor();
gameArea.appendChild(bubble);
bubbles.push(bubble);
bubble.addEventListener('click', () => {
if (!isPaused) {
popBubble(bubble);
}
});
animateBubble(bubble);
}
function animateBubble(bubble) {
let pos = 0;
const id = setInterval(() => {
if (isPaused) return;
if (pos >= gameArea.offsetHeight) {
clearInterval(id);
gameArea.removeChild(bubble);
bubbles = bubbles.filter(b => b !== bubble);
checkGameOver();
} else {
pos += 1;
bubble.style.bottom = pos + 'px';
}
}, 20);
}
function popBubble(bubble) {
gameArea.removeChild(bubble);
bubbles = bubbles.filter(b => b !== bubble);
score++;
scoreElement.textContent = `Score: ${score}`;
}
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function checkGameOver() {
if (bubbles.some(bubble => parseInt(bubble.style.bottom) >= gameArea.offsetHeight - parseInt(bubble.style.height))) {
stopGame();
alert(`Game Over! Your score: ${score}`);
}
}
function startGame() {
if (!isGameRunning) {
isGameRunning = true;
gameInterval = setInterval(createBubble, gameSpeed);
startButton.textContent = 'Restart Game';
} else {
stopGame();
startGame();
}
}
function stopGame() {
isGameRunning = false;
clearInterval(gameInterval);
bubbles.forEach(bubble => gameArea.removeChild(bubble));
bubbles = [];
score = 0;
scoreElement.textContent = 'Score: 0';
gameSpeed = 2000;
startButton.textContent = 'Start Game';
}
function togglePause() {
isPaused = !isPaused;
pauseButton.textContent = isPaused ? 'Resume' : 'Pause';
}
startButton.addEventListener('click', startGame);
newGameButton.addEventListener('click', () => {
stopGame();
startGame();
});
pauseButton.addEventListener('click', togglePause);
// Increase difficulty over time
setInterval(() => {
if (isGameRunning && !isPaused && gameSpeed > 500) {
gameSpeed -= 100;
clearInterval(gameInterval);
gameInterval = setInterval(createBubble, gameSpeed);
}
}, 10000);
</script>
</body>
</html>