verygudgame.html
unknown
html
3 months ago
9.3 kB
5
Indexable
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ARAGON: HALL OF FAME & SURVIVAL</title>
<style>
body { background: #050505; color: #fff; font-family: 'Arial Black', sans-serif; text-align: center; margin: 0; overflow: hidden; }
#fixed-ui-wrapper { position: relative; z-index: 2000; width: 1000px; margin: 0 auto; }
#top-bar { display: flex; justify-content: space-between; align-items: center; background: #111; padding: 10px 20px; border-radius: 12px; border: 2px solid #444; margin-top: 5px; }
#pause-btn { background: #ffeb3b; border: none; padding: 10px 20px; font-weight: bold; cursor: pointer; border-radius: 8px; z-index: 3000; }
#hud { display: flex; justify-content: space-around; background: #d50000; padding: 15px; border: 6px solid #fff; border-radius: 20px; box-shadow: 0 0 30px #ff0000; margin-top: 5px; }
.stat-block { font-size: 35px; font-weight: 900; color: #000; line-height: 1; }
#timer-text { font-size: 22px; margin: 5px; color: #00d2ff; display: flex; justify-content: center; gap: 30px; }
#arena-container { width: 100%; display: flex; justify-content: center; align-items: center; height: 500px; }
#arena { position: relative; width: 1000px; height: 480px; border: 5px solid #444; background: radial-gradient(circle, #1a1a1a, #000); overflow: hidden; }
#ben { position: absolute; bottom: 10px; width: 85px; height: 105px; font-size: 75px; display: flex; align-items: center; justify-content: center; z-index: 50; }
#ben.shielded { border: 5px solid #00ffff; border-radius: 50%; box-shadow: 0 0 35px #00ffff; }
.asparagus { position: absolute; width: 18px; height: 70px; background: linear-gradient(to bottom, #1b5e20, #4caf50, #81c784); border-radius: 20px; border-top: 3px solid #00d2ff; }
/* OVERLAYS */
#overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#leaderboard { background: #fff; color: #000; padding: 20px; border-radius: 10px; width: 400px; margin-bottom: 20px; border: 5px double #000; }
table { width: 100%; text-align: left; }
button#start-btn { padding: 15px 40px; font-size: 24px; font-weight: bold; cursor: pointer; border-radius: 10px; border: none; background: #00ff00; color: #000; }
</style>
</head>
<body>
<div id="fixed-ui-wrapper">
<div id="top-bar">
<div style="color:#ffeb3b">HI-SCORE: <span id="hi-val-ui">0.00</span>s</div>
<div id="clock" style="color: #888; font-size: 14px;">00:00:00</div>
<button id="pause-btn">PAUSE</button>
</div>
<div id="timer-text">
<div>LVL TIME: <span id="level-timer">35.00</span>s</div>
<div>TOTAL SURVIVAL: <span id="total-timer">0.00</span>s</div>
</div>
<div id="hud">
<div class="stat-block"><span id="wet-val">0%</span><div style="font-size:10px;">WETNESS</div></div>
<div class="stat-block"><span id="stink-val">0</span><div style="font-size:10px;">SULFUR</div></div>
</div>
</div>
<div id="arena-container">
<div id="arena">
<div id="overlay">
<div id="leaderboard">
<h2 style="text-align:center; margin-top:0;">🏆 ASPARAGUS HALL OF FAME</h2>
<table>
<tr><th>RANK</th><th>STUDENT</th><th>TIME</th></tr>
<tr><td>1st</td><td>Emerson J. Mosher</td><td>999.99s</td></tr>
<tr><td>2nd</td><td>Benjamin T. Aragon</td><td><span id="lb-hi-val">0.00</span>s</td></tr>
<tr><td>3rd</td><td>Lunch Lady Doris</td><td>12.50s</td></tr>
</table>
</div>
<h1 id="overlay-title" style="color: #ff0000; font-size: 40px; margin: 10px;">WHY IS IT WET?!</h1>
<button id="start-btn">START GAME</button>
</div>
<div id="ben" style="left: 460px;">🤓</div>
</div>
</div>
<script>
const ben = document.getElementById('ben');
const wetVal = document.getElementById('wet-val');
const timerDisplay = document.getElementById('level-timer');
const totalDisplay = document.getElementById('total-timer');
const startBtn = document.getElementById('start-btn');
const pauseBtn = document.getElementById('pause-btn');
const overlay = document.getElementById('overlay');
const arena = document.getElementById('arena');
const hiValUI = document.getElementById('hi-val-ui');
const lbHiVal = document.getElementById('lb-hi-val');
let currentLevel = 1;
let levelTimeLeft = 35;
let totalSurvival = 0;
let isPaused = true;
let gameOver = false;
let posX = 460, velX = 0, wetness = 0, sulfur = 0;
let lastTime = Date.now();
let isShielded = false;
const keys = {};
// Load High Score
let highScore = localStorage.getItem('aragon_hi_final') || 0;
hiValUI.innerText = highScore;
lbHiVal.innerText = highScore;
window.addEventListener('keydown', e => { keys[e.code] = true; });
window.addEventListener('keyup', e => { keys[e.code] = false; });
setInterval(() => { document.getElementById('clock').innerText = new Date().toLocaleTimeString(); }, 1000);
startBtn.onclick = () => {
overlay.style.visibility = 'hidden';
isPaused = false;
lastTime = Date.now();
if(gameOver) location.reload();
};
pauseBtn.onclick = (e) => {
if(!gameOver) {
isPaused = !isPaused;
overlay.style.visibility = isPaused ? 'visible' : 'hidden';
document.getElementById('overlay-title').innerText = "PAUSED";
startBtn.innerText = "RESUME";
}
};
function gameLoop() {
if (!isPaused && !gameOver) {
let now = Date.now();
let dt = (now - lastTime) / 1000;
lastTime = now;
levelTimeLeft -= dt;
totalSurvival += dt;
if (levelTimeLeft <= 0) {
isPaused = true;
currentLevel++;
levelTimeLeft = 35 + (currentLevel * 5);
overlay.style.visibility = 'visible';
document.getElementById('overlay-title').innerText = "WAVE " + (currentLevel-1) + " CLEAR";
startBtn.innerText = "START LEVEL " + currentLevel;
}
timerDisplay.innerText = Math.max(0, levelTimeLeft).toFixed(2);
totalDisplay.innerText = totalSurvival.toFixed(2);
if (keys['ArrowLeft']) velX -= 4;
if (keys['ArrowRight']) velX += 4;
velX *= 0.85; posX += velX;
if (posX < 0) posX = 0;
if (posX > arena.offsetWidth - 85) posX = arena.offsetWidth - 85;
ben.style.left = posX + 'px';
if (wetness > 0) {
wetness = Math.max(0, wetness - 0.015);
sulfur = Math.max(0, sulfur - 0.15);
wetVal.innerText = Math.floor(wetness) + "%";
document.getElementById('stink-val').innerText = Math.floor(sulfur);
}
}
requestAnimationFrame(gameLoop);
}
function spawnAsparagus() {
if (isPaused || gameOver) { setTimeout(spawnAsparagus, 100); return; }
const s = document.createElement('div');
s.className = 'asparagus';
s.style.left = Math.random() * (arena.offsetWidth - 20) + 'px';
s.style.top = '-70px';
arena.appendChild(s);
let speed = 5 + currentLevel + Math.random() * 5;
let fall = setInterval(() => {
if (gameOver || isPaused) { if(gameOver) s.remove(); return; }
let y = parseInt(s.style.top);
let x = parseInt(s.style.left);
if (y > 600) { clearInterval(fall); s.remove(); }
else {
s.style.top = (y + speed) + 'px';
if (y > (arena.offsetHeight - 120) && y < (arena.offsetHeight - 20) && x > posX - 15 && x < posX + 85) {
if (!isShielded) { wetness += 12; sulfur += 100; }
s.remove(); clearInterval(fall);
if (wetness >= 100) {
gameOver = true;
if (totalSurvival > highScore) localStorage.setItem('aragon_hi_final', totalSurvival.toFixed(2));
alert("FINAL SURVIVAL TIME: " + totalSurvival.toFixed(2) + "s");
location.reload();
}
}
}
}, 16);
setTimeout(spawnAsparagus, Math.max(50, 400 - (currentLevel * 40)));
}
gameLoop();
spawnAsparagus();
</script>
</body>
</html>
Editor is loading...
Leave a Comment