SHOWING: First 60
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Whack-a-Monkey: Jungle Mayhem</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #2ecc71;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-image: url('/content/b8258c1c0150831b743043f112ce0544360e5c31478cb463d32cfe48e2db9dc0i0');
background-size: cover;
background-repeat: repeat;
}
.game-container {
background-color: rgba(52, 152, 219, 0.9);
border-radius: 20px;
padding: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
h1 {
color: #fff;
text-align: center;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.game-board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 20px;
}
.hole {
width: 100px;
height: 100px;
background-color: #8e44ad;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: inherit;
overflow: hidden;
transition: background-color 0.3s;
}
.hole:hover {
background-color: #9b59b6;
}
.monkey {
width: 80px;
height: 80px;
background-image: url('/content/3ea6044de50994ce7e8a54c4eae8a631eef1b35f31b6f767054e811728f9d063i0');
background-size: cover;
display: none;
}
.whacked {
background-image: url('/content/39803996fb7e04639652bc481fb32459a78dd6337c1ed4088878d4472fe6c4f5i0');
}
.score, .time, .level {
color: #fff;
font-size: 24px;
text-align: center;
margin-bottom: 10px;
}
.start-btn {
display: block;
margin: 0 auto;
padding: 10px 20px;
font-size: 18px;
background-color: #e74c3c;
color: #fff;
border: none;
border-radius: 5px;
cursor: inherit;
transition: background-color 0.3s;
}
.start-btn:hover {
background-color: #c0392b;
}
.level-info {
color: #fff;
text-align: center;
margin-top: 10px;
}
.progress-bar {
width: 100%;
height: 20px;
background-color: #ecf0f1;
border-radius: 10px;
margin-top: 10px;
overflow: hidden;
}
.progress {
width: 0%;
height: 100%;
background-color: #e74c3c;
transition: width 1s linear;
}
</style>
</head>
<body>
<div class="game-container">
<h1>Whack-a-Monkey: Jungle Mayhem</h1>
<div class="score">Score: <span id="score">0</span></div>
<div class="time">Time: <span id="time">25</span>s</div>
<div class="level">Level: <span id="level">1</span></div>
<div class="progress-bar">
<div class="progress" id="progress"></div>
</div>
<div class="game-board">
<div class="hole"><div class="monkey"></div></div>
<div class="hole"><div class="monkey"></div></div>
<div class="hole"><div class="monkey"></div></div>
<div class="hole"><div class="monkey"></div></div>
<div class="hole"><div class="monkey"></div></div>
<div class="hole"><div class="monkey"></div></div>
<div class="hole"><div class="monkey"></div></div>
<div class="hole"><div class="monkey"></div></div>
<div class="hole"><div class="monkey"></div></div>
</div>
<button class="start-btn" id="startBtn">Start Game</button>
<div class="level-info" id="levelInfo"></div>
</div>
<script>
const holes = document.querySelectorAll('.hole');
const monkeys = document.querySelectorAll('.monkey');
const scoreDisplay = document.getElementById('score');
const timeDisplay = document.getElementById('time');
const levelDisplay = document.getElementById('level');
const startBtn = document.getElementById('startBtn');
const levelInfo = document.getElementById('levelInfo');
const progressBar = document.getElementById('progress');
let score = 0;
let timeLeft = 25;
let level = 1;
let gameInterval;
let monkeyTimeout;
const levels = [
{ speed: 1000, description: "Lazy monkeys" },
{ speed: 850, description: "Energetic monkeys" },
{ speed: 700, description: "Caffeinated monkeys" },
{ speed: 550, description: "Super-charged monkeys" },
{ speed: 400, description: "Hyper-speed monkeys" }
];
function randomTime(min, max) {
return Math.round(Math.random() * (max - min) + min);
}
function randomHole(holes) {
const idx = Math.floor(Math.random() * holes.length);
const hole = holes[idx];
return hole;
}
function peep() {
const time = randomTime(levels[level - 1].speed * 0.5, levels[level - 1].speed);
const hole = randomHole(holes);
hole.querySelector('.monkey').style.display = 'block';
monkeyTimeout = setTimeout(() => {
hole.querySelector('.monkey').style.display = 'none';
if (timeLeft > 0) peep();
}, time);
}
function startGame() {
score = 0;
timeLeft = 25;
level = 1;
scoreDisplay.textContent = score;
timeDisplay.textContent = timeLeft;
levelDisplay.textContent = level;
http://progressBar.style.width = '0%';
levelInfo.textContent = levels[level - 1].description;
gameInterval = setInterval(() => {
timeLeft--;
timeDisplay.textContent = timeLeft;
http://progressBar.style.width = `${((25 - timeLeft) / 25) * 100}%`;
if (timeLeft <= 0) {
clearInterval(gameInterval);
clearTimeout(monkeyTimeout);
alert('Game Over! Your score is: ' + score);
}
}, 1000);
peep();
}
function whack(e) {
if (!e.isTrusted) return;
if (e.target.classList.contains('monkey')) {
score++;
e.target.style.display = 'none';
e.target.classList.add('whacked');
scoreDisplay.textContent = score;
setTimeout(() => e.target.classList.remove('whacked'), 300);
}
}
function updateLevel() {
if (score % 10 === 0 && score !== 0) {
level++;
if (level > levels.length) {
level = levels.length;
}
levelDisplay.textContent = level;
levelInfo.textContent = levels[level - 1].description;
timeLeft = 25;
http://progressBar.style.width = '0%';
}
}
startBtn.addEventListener('click', startGame);
holes.forEach(hole => {
hole.addEventListener('click', () => {
if (hole.querySelector('.monkey').style.display === 'block') {
score++;
scoreDisplay.textContent = score;
hole.querySelector('.monkey').style.display = 'none';
updateLevel();
}
});
});
function createBananaCursor() {
const canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 32;
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'yellow';
ctx.beginPath();
ctx.moveTo(2, 16);
ctx.quadraticCurveTo(8, 24, 30, 16);
ctx.quadraticCurveTo(8, 8, 2, 16);
ctx.fill();
ctx.strokeStyle = 'brown';
ctx.lineWidth = 2;
ctx.stroke();
const dataURL = canvas.toDataURL('image/png');
http://document.body.style.cursor = `url(${dataURL}), auto`;
}
createBananaCursor();
</script>
</body>
</html>#72,580,459text