lambda13/midnight-munchkins-mayhem
0
1<!DOCTYPE html>2<html lang="en" class="dark">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Midnight Munchkins Mayhem 🎪</title>7 <script src="https://cdn.tailwindcss.com"></script>8 <script src="https://unpkg.com/feather-icons"></script>9 <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>10 <script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.2.3/howler.min.js"></script>11 <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.fog.min.js"></script>12 <style>13 @font-face {14 font-family: 'Creepster';15 src: url('https://fonts.googleapis.com/css2?family=Creepster&display=swap');16 }17 .static-effect {18 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.15'/%3E%3C/svg%3E");19 }20 .camera-view {21 filter: sepia(0.5) contrast(1.2) brightness(0.7);22 }23 .power-bar {24 background: linear-gradient(90deg, #ef4444 0%, #f59e0b 50%, #10b981 100%);25 }26 </style>27</head>28<body class="bg-black text-gray-200 font-mono overflow-hidden h-screen">29 <div id="vanta-bg" class="absolute inset-0 opacity-30"></div>30 31 <!-- Main Menu -->32 <div id="main-menu" class="relative z-10 flex flex-col items-center justify-center h-screen">33 <div class="static-effect p-8 rounded-lg bg-gray-900 bg-opacity-80 border border-red-900 shadow-2xl max-w-2xl text-center">34 <h1 class="text-6xl font-bold mb-6 text-red-600" style="font-family: 'Creepster', cursive;">MIDNIGHT MUNCHKINS MAYHEM</h1>35 36 <div class="space-y-4 mt-12">37 <button onclick="startGame()" class="w-full py-4 px-8 bg-red-800 hover:bg-red-700 text-white font-bold rounded-lg transition-all transform hover:scale-105 flex items-center justify-center">38 <i data-feather="play" class="mr-2"></i> START NIGHT39 </button>40 <button onclick="showCustomNight()" class="w-full py-4 px-8 bg-purple-800 hover:bg-purple-700 text-white font-bold rounded-lg transition-all transform hover:scale-105 flex items-center justify-center">41 <i data-feather="sliders" class="mr-2"></i> CUSTOM NIGHT42 </button>43 <button onclick="showExtras()" class="w-full py-4 px-8 bg-blue-800 hover:bg-blue-700 text-white font-bold rounded-lg transition-all transform hover:scale-105 flex items-center justify-center">44 <i data-feather="box" class="mr-2"></i> EXTRAS45 </button>46 <button onclick="showCredits()" class="w-full py-4 px-8 bg-gray-800 hover:bg-gray-700 text-white font-bold rounded-lg transition-all transform hover:scale-105 flex items-center justify-center">47 <i data-feather="info" class="mr-2"></i> CREDITS48 </button>49 </div>50 51 <div class="mt-12 text-sm text-gray-400">52 <p>Beware the Munchkins after midnight...</p>53 <p class="mt-2">Power management is crucial to survival</p>54 </div>55 </div>56 </div>57 58 <!-- Game Screen (Hidden Initially) -->59 <div id="game-screen" class="hidden relative z-10 h-screen">60 <div class="absolute bottom-0 left-0 right-0 bg-gray-900 border-t border-red-900 p-4 flex justify-between items-center">61 <div class="flex space-x-4">62 <button id="left-door-btn" class="bg-red-900 hover:bg-red-800 p-3 rounded-lg">63 <i data-feather="chevron-left"></i> DOOR64 </button>65 <button id="right-door-btn" class="bg-red-900 hover:bg-red-800 p-3 rounded-lg">66 DOOR <i data-feather="chevron-right"></i>67 </button>68 <button id="vent-btn" class="bg-blue-900 hover:blue-red-800 p-3 rounded-lg">69 <i data-feather="wind"></i> VENT70 </button>71 </div>72 73 <div class="power-bar-container bg-gray-800 rounded-full h-6 w-64 overflow-hidden">74 <div id="power-bar" class="power-bar h-full rounded-full transition-all duration-500" style="width: 100%"></div>75 </div>76 77 <div class="text-red-500 font-bold">78 <span id="power-percentage">100%</span> POWER79 </div>80 </div>81 82 <div class="absolute top-4 left-4">83 <button id="map-btn" class="bg-gray-900 hover:bg-gray-800 p-3 rounded-lg border border-gray-700">84 <i data-feather="map"></i>85 </button>86 <div id="time-display" class="mt-2 bg-gray-900 p-2 rounded-lg border border-gray-700 text-center">87 12:00 AM88 </div>89 </div>90 91 <div id="office-view" class="h-full w-full bg-gray-950">92 <!-- Office view will be rendered here -->93 <div class="absolute bottom-0 left-0 right-0 h-1/3 bg-gradient-to-t from-gray-900 to-transparent"></div>94 </div>95 96 <!-- Camera System (Hidden Initially) -->97 <div id="camera-system" class="hidden absolute inset-0 bg-black z-20">98 <div class="grid grid-cols-4 gap-2 p-4">99 <!-- Camera buttons will be generated here -->100 </div>101 <div class="camera-view absolute inset-0 mt-16 mx-4 mb-24 rounded-lg overflow-hidden">102 <!-- Camera feed will appear here -->103 </div>104 <button id="close-camera" class="absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-red-900 hover:bg-red-800 p-3 rounded-lg">105 <i data-feather="x"></i> CLOSE CAMERA106 </button>107 </div>108 </div>109 110 <!-- Jumpscare Screen (Hidden Initially) -->111 <div id="jumpscare-screen" class="hidden absolute inset-0 z-30 bg-black flex items-center justify-center">112 <img id="jumpscare-image" src="" class="max-h-screen max-w-screen" alt="JUMPSCARE">113 <audio id="jumpscare-sound" src=""></audio>114 </div>115 116 <script>117 // Initialize Vanta.js background118 VANTA.FOG({119 el: "#vanta-bg",120 mouseControls: true,121 touchControls: true,122 gyroControls: false,123 minHeight: 200.00,124 minWidth: 200.00,125 highlightColor: 0xff0000,126 midtoneColor: 0x8b0000,127 lowlightColor: 0x0,128 baseColor: 0x0,129 blurFactor: 0.70,130 speed: 1.50131 });132 133 // Game state134 const gameState = {135 currentNight: 1,136 power: 100,137 time: 0,138 animatronics: [139 { name: "Giggles", active: true, aggression: 1, position: "Stage" },140 { name: "Munchy", active: true, aggression: 1, position: "Backstage" },141 { name: "Jester", active: true, aggression: 1, position: "Pirate Cove" },142 { name: "Twitch", active: true, aggression: 1, position: "Vents" },143 { name: "Golden Grin", active: false, aggression: 0, position: "Hidden" }144 ],145 leftDoorClosed: false,146 rightDoorClosed: false,147 ventClosed: false,148 cameraActive: false149 };150// Sound effects151 const sounds = {152 cameraOpen: new Howl({ src: ['https://assets.mixkit.co/sfx/preview/mixkit-security-camera-click-1560.mp3'] }),153 doorClose: new Howl({ src: ['https://assets.mixkit.co/sfx/preview/mixkit-heavy-metal-door-close-1746.mp3'] }),154 staticNoise: new Howl({ 155 src: ['https://assets.mixkit.co/sfx/preview/mixkit-tv-ultra-bright-2583.mp3'],156 loop: true,157 volume: 0.3158 }),159 ambience: new Howl({160 src: ['https://assets.mixkit.co/sfx/preview/mixkit-horror-ambience-169.mp3'],161 loop: true,162 volume: 0.2163 })164 };165 // DOM Elements166 const mainMenu = document.getElementById('main-menu');167 const gameScreen = document.getElementById('game-screen');168 const cameraSystem = document.getElementById('camera-system');169 const jumpscareScreen = document.getElementById('jumpscare-screen');170 const powerBar = document.getElementById('power-bar');171 const powerPercentage = document.getElementById('power-percentage');172 const timeDisplay = document.getElementById('time-display');173 174 // Game functions175 function startGame() {176 mainMenu.classList.add('hidden');177 gameScreen.classList.remove('hidden');178 sounds.ambience.play();179 180 // Start game loop181 gameLoop();182 }183function gameLoop() {184 // Update power185 gameState.power -= 0.1;186 if (gameState.power <= 0) {187 gameOver();188 return;189 }190 191 // Update power display192 powerBar.style.width = `${gameState.power}%`;193 powerPercentage.textContent = `${Math.floor(gameState.power)}%`;194 195 // Update time196 gameState.time += 1;197 updateTimeDisplay();198 199 // Animatronic AI movements200 moveAnimatronics();201 202 // Check for jumpscares203 checkForJumpscares();204 205 // Continue loop206 setTimeout(gameLoop, 100);207 }208 209 function updateTimeDisplay() {210 const hours = Math.floor(gameState.time / 60) % 12 || 12;211 const minutes = gameState.time % 60;212 const ampm = Math.floor(gameState.time / 720) % 2 === 0 ? 'AM' : 'PM';213 timeDisplay.textContent = `${hours}:${minutes < 10 ? '0' + minutes : minutes} ${ampm}`;214 215 // Check for 6 AM216 if (gameState.time >= 360) {217 nightComplete();218 }219 }220 221 function moveAnimatronics() {222 // Simplified movement logic223 gameState.animatronics.forEach(animatronic => {224 if (animatronic.active) {225 // Random chance to move based on aggression226 if (Math.random() < (0.01 * animatronic.aggression * gameState.currentNight)) {227 // Simplified movement path228 const positions = ["Stage", "Dining", "Hallway", "Office"];229 const currentIndex = positions.indexOf(animatronic.position);230 if (currentIndex < positions.length - 1) {231 animatronic.position = positions[currentIndex + 1];232 }233 }234 }235 });236 }237 238 function checkForJumpscares() {239 gameState.animatronics.forEach(animatronic => {240 if (animatronic.position === "Office") {241 // Check if defenses are up242 if ((animatronic.name === "Giggles" || animatronic.name === "Munchy") && 243 !(animatronic.name === "Giggles" && gameState.leftDoorClosed) && 244 !(animatronic.name === "Munchy" && gameState.rightDoorClosed)) {245 triggerJumpscare(animatronic.name);246 } else if (animatronic.name === "Twitch" && !gameState.ventClosed) {247 triggerJumpscare(animatronic.name);248 }249 }250 });251 }252 253 function triggerJumpscare(animatronicName) {254 gameScreen.classList.add('hidden');255 jumpscareScreen.classList.remove('hidden');256 257 // Set jumpscare image (placeholder)258 document.getElementById('jumpscare-image').src = `http://static.photos/horror/1024x576/${Math.floor(Math.random() * 100)}`;259 260 // Play jumpscare sound261 sounds.staticNoise.play();262 263 // Game over after delay264 setTimeout(gameOver, 2000);265 }266 267 function gameOver() {268 alert("Game Over! You didn't survive the night.");269 resetGame();270 }271 272 function nightComplete() {273 alert(`Congratulations! You survived Night ${gameState.currentNight}!`);274 gameState.currentNight++;275 resetGame();276 }277 278 function resetGame() {279 gameState.power = 100;280 gameState.time = 0;281 gameState.animatronics.forEach(a => {282 a.position = a.name === "Twitch" ? "Vents" : "Stage";283 });284 285 sounds.ambience.stop();286 sounds.staticNoise.stop();287 288 jumpscareScreen.classList.add('hidden');289 gameScreen.classList.add('hidden');290 mainMenu.classList.remove('hidden');291 }292 293 // Event listeners294 document.getElementById('left-door-btn').addEventListener('click', () => {295 gameState.leftDoorClosed = !gameState.leftDoorClosed;296 sounds.doorClose.play();297 });298 299 document.getElementById('right-door-btn').addEventListener('click', () => {300 gameState.rightDoorClosed = !gameState.rightDoorClosed;301 sounds.doorClose.play();302 });303 304 document.getElementById('vent-btn').addEventListener('click', () => {305 gameState.ventClosed = !gameState.ventClosed;306 sounds.doorClose.play();307 });308 309 document.getElementById('map-btn').addEventListener('click', () => {310 gameState.cameraActive = !gameState.cameraActive;311 if (gameState.cameraActive) {312 sounds.cameraOpen.play();313 sounds.staticNoise.play();314 cameraSystem.classList.remove('hidden');315 } else {316 sounds.staticNoise.stop();317 cameraSystem.classList.add('hidden');318 }319 });320 321 document.getElementById('close-camera').addEventListener('click', () => {322 gameState.cameraActive = false;323 sounds.staticNoise.stop();324 cameraSystem.classList.add('hidden');325 });326 327 // Initialize feather icons328 feather.replace();329 </script>330</body>331</html>332