<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Zombie Catchers</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="game-container">
<h1>Zombie Catchers</h1>
<div class="score">Score: <span id="score">0</span></div>
<div class="play-area">
<div class="zombie" id="zombie1"></div>
<div class="zombie" id="zombie2"></div>
</div>
<button id="catchButton">Catch Zombie</button>
</div>
<script src="script.js"></script>
</body>
</html>body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
.game-container {
text-align: center;
margin-top: 50px;
}
.score {
font-size: 24px;
margin-bottom: 20px;
}
.play-area {
position: relative;
width: 300px;
height: 300px;
margin: 0 auto;
border: 2px solid #000;
}
.zombie {
position: absolute;
width: 50px;
height: 50px;
background-color: green;
border-radius: 50%;
cursor: pointer;
}
#zombie1 {
top: 50px;
left: 50px;
}
#zombie2 {
top: 150px;
left: 150px;
}
#catchButton {
padding: 10px 20px;
font-size: 18px;
cursor: pointer;
}let score = 0;
document.getElementById('zombie1').addEventListener('click', function() {
catchZombie('zombie1');
});
document.getElementById('zombie2').addEventListener('click', function() {
catchZombie('zombie2');
});
function catchZombie(zombieId) {
document.getElementById(zombieId).style.display = 'none';
score++;
document.getElementById('score').textContent = score;
if (score % 5 === 0) {
alert('You caught 5 zombies! Keep going!');
}
resetZombie(zombieId);
}
function resetZombie(zombieId) {
setTimeout(() => {
document.getElementById(zombieId).style.display = 'block';
}, 2000);
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.