CODE:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mole Mania Extreme</title>
<style>
.molemaniaextreme5831-body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(135deg, #6A5ACD, #FF69B4);
color: #FFFFFF;
}
.molemaniaextreme5831-game-container {
display: flex;
flex-direction: row;
gap: 30px;
background-color: rgba(255, 255, 255, 0.1);
padding: 30px;
border-radius: 15px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}
.molemaniaextreme5831-game-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
width: 250px;
}
.molemaniaextreme5831-title {
font-size: 32px;
font-weight: bold;
margin-bottom: 15px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.molemaniaextreme5831-description {
font-size: 16px;
margin-bottom: 20px;
line-height: 1.5;
}
.molemaniaextreme5831-instructions {
font-size: 14px;
margin-bottom: 20px;
padding-left: 20px;
}
.molemaniaextreme5831-button {
padding: 12px 24px;
font-size: 16px;
cursor: pointer;
background-color: #FF4500;
color: white;
border: none;
border-radius: 25px;
margin-bottom: 15px;
transition: all 0.3s ease;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
}
.molemaniaextreme5831-button:hover {
background-color: #FF6347;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.molemaniaextreme5831-score, .molemaniaextreme5831-timer {
font-size: 24px;
margin-bottom: 15px;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.molemaniaextreme5831-game-board {
display: grid;
grid-template-columns: repeat(3, 120px);
grid-gap: 15px;
perspective: 1000px;
}
.molemaniaextreme5831-hole {
width: 120px;
height: 120px;
background: radial-gradient(circle at 30% 30%, #8B4513, #4A2511);
border-radius: 50%;
overflow: hidden;
position: relative;
box-shadow: inset 0 5px 10px rgba(0,0,0,0.5);
transition: transform 0.3s ease;
}
.molemaniaextreme5831-hole:hover {
transform: scale(1.05);
}
.molemaniaextreme5831-mole, .molemaniaextreme5831-bomb {
width: 110px;
height: 110px;
position: absolute;
bottom: -110px;
left: 5px;
transition: bottom 0.1s;
cursor: pointer;
}
.molemaniaextreme5831-mole {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="%23663300"/><circle cx="30" cy="40" r="5" fill="%23FFFFFF"/><circle cx="70" cy="40" r="5" fill="%23FFFFFF"/><path d="M 30 70 Q 50 80 70 70" stroke="%23FFFFFF" stroke-width="3" fill="none"/></svg>');
}
.molemaniaextreme5831-bomb {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="45" fill="%23000000"/><rect x="45" y="5" width="10" height="15" fill="%23FFA500"/><path d="M 20 20 L 35 35 M 65 35 L 80 20" stroke="%23FFA500" stroke-width="5"/></svg>');
}
.molemaniaextreme5831-mole.up, .molemaniaextreme5831-bomb.up {
bottom: 0;
}
.molemaniaextreme5831-difficulty {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.molemaniaextreme5831-difficulty-button {
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 20px;
transition: all 0.3s ease;
}
.molemaniaextreme5831-difficulty-button:hover {
background-color: #45a049;
}
.molemaniaextreme5831-difficulty-button.active {
background-color: #2E8B57;
font-weight: bold;
}
@media (max-width: 768px) {
.molemaniaextreme5831-game-container {
flex-direction: column-reverse;
padding: 20px;
}
.molemaniaextreme5831-game-info {
width: 100%;
align-items: center;
text-align: center;
}
.molemaniaextreme5831-game-board {
grid-template-columns: repeat(3, 100px);
grid-gap: 10px;
}
.molemaniaextreme5831-hole {
width: 100px;
height: 100px;
}
.molemaniaextreme5831-mole, .molemaniaextreme5831-bomb {
width: 90px;
height: 90px;
bottom: -90px;
}
}
</style>
</head>
<body class="molemaniaextreme5831-body">
<div class="molemaniaextreme5831-game-container">
<div class="molemaniaextreme5831-game-info">
<h1 class="molemaniaextreme5831-title">Mole Mania Extreme</h1>
<p class="molemaniaextreme5831-description">Whack moles and avoid bombs in this exciting 60-second challenge!</p>
<ul class="molemaniaextreme5831-instructions">
<li>Click on moles to score points</li>
<li>Avoid clicking on bombs</li>
<li>Game lasts for 60 seconds</li>
<li>Choose your difficulty level</li>
</ul>
<div class="molemaniaextreme5831-difficulty">
<button id="easyButton" class="molemaniaextreme5831-difficulty-button">Easy</button>
<button id="moderateButton" class="molemaniaextreme5831-difficulty-button">Moderate</button>
<button id="expertButton" class="molemaniaextreme5831-difficulty-button">Expert</button>
</div>
<button id="startButton" class="molemaniaextreme5831-button">Start Game</button>
<button id="newGameButton" class="molemaniaextreme5831-button" style="display: none;">New Game</button>
<div id="score" class="molemaniaextreme5831-score">Score: 0</div>
<div id="timer" class="molemaniaextreme5831-timer">Time: 60s</div>
</div>
<div id="gameBoard" class="molemaniaextreme5831-game-board">
<div class="molemaniaextreme5831-hole"><div class="molemaniaextreme5831-mole"></div></div>
<div class="molemaniaextreme5831-hole"><div class="molemaniaextreme5831-mole"></div></div>
<div class="molemaniaextreme5831-hole"><div class="molemaniaextreme5831-mole"></div></div>
<div class="molemaniaextreme5831-hole"><div class="molemaniaextreme5831-mole"></div></div>
<div class="molemaniaextreme5831-hole"><div class="molemaniaextreme5831-mole"></div></div>
<div class="molemaniaextreme5831-hole"><div class="molemaniaextreme5831-mole"></div></div>
<div class="molemaniaextreme5831-hole"><div class="molemaniaextreme5831-mole"></div></div>
<div class="molemaniaextreme5831-hole"><div class="molemaniaextreme5831-mole"></div></div>
<div class="molemaniaextreme5831-hole"><div class="molemaniaextreme5831-mole"></div></div>
</div>
</div>
<pre><code><script>
const startButton = document.getElementById('startButton');
const newGameButton = document.getElementById('newGameButton');
const scoreDisplay = document.getElementById('score');
const timerDisplay = document.getElementById('timer');
const gameBoard = document.getElementById('gameBoard');
const moles = document.querySelectorAll('.molemaniaextreme5831-mole');
const easyButton = document.getElementById('easyButton');
const moderateButton = document.getElementById('moderateButton');
const expertButton = document.getElementById('expertButton');
let score = 0;
let timeLeft = 60;
let gameInterval;
let moleInterval;
let bombInterval;
let difficulty = 'easy';
let moleSpeed = 1000;
let bombFrequency = 0.2;
function setDifficulty(level) {
difficulty = level;
easyButton.classList.remove('active');
moderateButton.classList.remove('active');
expertButton.classList.remove('active');
switch (level) {
case 'easy':
easyButton.classList.add('active');
moleSpeed = 1000;
bombFrequency = 0.2;
break;
case 'moderate':
moderateButton.classList.add('active');
moleSpeed = 700;
bombFrequency = 0.3;
break;
case 'expert':
expertButton.classList.add('active');
moleSpeed = 500;
bombFrequency = 0.4;
break;
}
}
function startGame() {
score = 0;
timeLeft = 60;
updateScore();
updateTimer();
startButton.style.display = 'none';
newGameButton.style.display = 'none';
gameInterval = setInterval(updateGame, 1000);
moleInterval = setInterval(showRandomItem, moleSpeed);
bombInterval = setInterval(showRandomBomb, moleSpeed * 2);
}
function endGame() {
clearInterval(gameInterval);
clearInterval(moleInterval);
clearInterval(bombInterval);
moles.forEach(mole => {
mole.classList.remove('up');
if (mole.classList.contains('molemaniaextreme5831-bomb')) {
mole.classList.remove('molemaniaextreme5831-bomb');
mole.classList.add('molemaniaextreme5831-mole');
}
});
newGameButton.style.display = 'block';
}
function updateGame() {
timeLeft--;
updateTimer();
if (timeLeft <= 0) {
endGame();
}
}
function updateScore() {
scoreDisplay.textContent = `Score: ${score}`;
}
function updateTimer() {
timerDisplay.textContent = `Time: ${timeLeft}s`;
}
function showRandomItem() {
const randomIndex = Math.floor(Math.random() * moles.length);
const item = moles[randomIndex];
item.classList.add('up');
setTimeout(() => {
item.classList.remove('up');
}, moleSpeed - 100);
}
function showRandomBomb() {
if (Math.random() < bombFrequency) {
const randomIndex = Math.floor(Math.random() * moles.length);
const bomb = moles[randomIndex];
bomb.classList.remove('molemaniaextreme5831-mole');
bomb.classList.add('molemaniaextreme5831-bomb');
bomb.classList.add('up');
setTimeout(() => {
bomb.classList.remove('up');
bomb.classList.remove('molemaniaextreme5831-bomb');
bomb.classList.add('molemaniaextreme5831-mole');
}, moleSpeed - 100);
}
}
gameBoard.addEventListener('click', (e) => {
if (timeLeft > 0) {
if (e.target.classList.contains('molemaniaextreme5831-mole') && e.target.classList.contains('up')) {
score++;
updateScore();
e.target.classList.remove('up');
} else if (e.target.classList.contains('molemaniaextreme5831-bomb') && e.target.classList.contains('up')) {
score = Math.max(0, score - 1);
updateScore();
e.target.classList.remove('up');
}
}
});
startButton.addEventListener('click', startGame);
newGameButton.addEventListener('click', startGame);
easyButton.addEventListener('click', () => setDifficulty('easy'));
moderateButton.addEventListener('click', () => setDifficulty('moderate'));
expertButton.addEventListener('click', () => setDifficulty('expert'));
setDifficulty('easy');
</script>
</code></pre>
</body>
</html>