CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bird Catcher</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
.birdcatcher5391-body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #87CEEB;
}
.birdcatcher5391-game-container {
display: flex;
flex-direction: row;
gap: 20px;
}
.birdcatcher5391-game-area {
width: 400px;
height: 400px;
background-color: #E0F7FA;
border: 2px solid #4FC3F7;
position: relative;
overflow: hidden;
}
.birdcatcher5391-bird {
font-size: 30px;
color: #FFA000;
position: absolute;
transition: all 0.5s ease;
}
.birdcatcher5391-net {
width: 50px;
height: 50px;
border: 2px dashed #4CAF50;
border-radius: 50%;
position: absolute;
cursor: pointer;
}
.birdcatcher5391-info-panel {
width: 200px;
padding: 20px;
background-color: #FFFFFF;
border-radius: 10px;
}
.birdcatcher5391-button {
display: block;
width: 100%;
padding: 10px;
margin-top: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.birdcatcher5391-button:hover {
background-color: #45a049;
}
.birdcatcher5391-score {
font-size: 18px;
font-weight: bold;
margin-bottom: 10px;
}
.birdcatcher5391-timer {
font-size: 16px;
margin-bottom: 10px;
}
@media (max-width: 700px) {
.birdcatcher5391-game-container {
flex-direction: column;
}
.birdcatcher5391-game-area {
width: 300px;
height: 300px;
}
.birdcatcher5391-info-panel {
width: 300px;
}
}
</style>
</head>
<body class="birdcatcher5391-body">
<div class="birdcatcher5391-game-container">
<div class="birdcatcher5391-game-area" id="gameArea">
<div class="birdcatcher5391-bird" id="bird"><i class="fas fa-dove"></i></div>
<div class="birdcatcher5391-net" id="net"></div>
</div>
<div class="birdcatcher5391-info-panel">
<h2>Bird Catcher</h2>
<p>Catch birds with your net to collect karma and create new birds!</p>
<ul>
<li>Move your mouse to control the net</li>
<li>Click to catch a bird when it's inside the net</li>
<li>Collect as much karma as possible before time runs out</li>
</ul>
<div class="birdcatcher5391-score" id="score">Karma: 0</div>
<div class="birdcatcher5391-timer" id="timer">Time: 60s</div>
<button class="birdcatcher5391-button" id="startButton">Start Game</button>
<button class="birdcatcher5391-button" id="newGameButton" style="display: none;">New Game</button>
<button class="birdcatcher5391-button" id="pauseButton" style="display: none;">Pause</button>
</div>
</div>
<script>
const gameArea = document.getElementById('gameArea');
const bird = document.getElementById('bird');
const net = document.getElementById('net');
const scoreElement = document.getElementById('score');
const timerElement = document.getElementById('timer');
const startButton = document.getElementById('startButton');
const newGameButton = document.getElementById('newGameButton');
const pauseButton = document.getElementById('pauseButton');
let score = 0;
let timeLeft = 60;
let gameInterval;
let birdInterval;
let isPaused = false;
function startGame() {
score = 0;
timeLeft = 60;
updateScore();
updateTimer();
moveBird();
gameInterval = setInterval(updateGame, 1000);
birdInterval = setInterval(moveBird, 2000);
startButton.style.display = 'none';
newGameButton.style.display = 'none';
pauseButton.style.display = 'block';
isPaused = false;
}
function updateGame() {
if (isPaused) return;
timeLeft--;
updateTimer();
if (timeLeft <= 0) {
endGame();
}
}
function moveBird() {
if (isPaused) return;
const maxX = gameArea.clientWidth - bird.clientWidth;
const maxY = gameArea.clientHeight - bird.clientHeight;
const randomX = Math.floor(Math.random() * maxX);
const randomY = Math.floor(Math.random() * maxY);
bird.style.left = `${randomX}px`;
bird.style.top = `${randomY}px`;
}
function updateScore() {
scoreElement.textContent = `Karma: ${score}`;
}
function updateTimer() {
timerElement.textContent = `Time: ${timeLeft}s`;
}
function endGame() {
clearInterval(gameInterval);
clearInterval(birdInterval);
alert(`Game Over! You collected ${score} karma!`);
newGameButton.style.display = 'block';
pauseButton.style.display = 'none';
}
function togglePause() {
isPaused = !isPaused;
pauseButton.textContent = isPaused ? 'Resume' : 'Pause';
}
gameArea.addEventListener('mousemove', (e) => {
if (isPaused) return;
const rect = gameArea.getBoundingClientRect();
const x = e.clientX - rect.left - net.clientWidth / 2;
const y = e.clientY - rect.top - net.clientHeight / 2;
net.style.left = `${Math.max(0, Math.min(x, gameArea.clientWidth - net.clientWidth))}px`;
net.style.top = `${Math.max(0, Math.min(y, gameArea.clientHeight - net.clientHeight))}px`;
});
gameArea.addEventListener('click', () => {
if (isPaused) return;
const netRect = net.getBoundingClientRect();
const birdRect = bird.getBoundingClientRect();
if (
birdRect.left < netRect.right &&
birdRect.right > netRect.left &&
birdRect.top < netRect.bottom &&
birdRect.bottom > netRect.top
) {
score++;
updateScore();
moveBird();
}
});
startButton.addEventListener('click', startGame);
newGameButton.addEventListener('click', startGame);
pauseButton.addEventListener('click', togglePause);
</script>
</body>
</html>