Fuggler Adoptions: The Lost Crates 📦
by QuantumBolt10282 lines15.4 KB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fuggler Adoptions: The Lost Crates 📦</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
fugg: {
brown: '#5C3A21',
red: '#990000',
green: '#2ECC71',
yellow: '#F1C40F',
dark: '#2C1A0E',
oldpaper: '#F2E8C9'
},
},
fontFamily: {
fugg: ['"Comic Sans MS"', 'cursive', 'sans-serif'],
},
}
}
}
</script>
<style type="text/tailwindcss">
@layer utilities {
.content-auto {
content-visibility: auto;
}
.pixel-border {
border: 4px solid #000;
box-shadow: 4px 4px 0 #000;
}
.check-mark::after {
content: "✅";
position: absolute;
top: -10px;
right: -10px;
font-size: 20px;
}
}
</style>
</head>
<body class="bg-fugg-oldpaper font-fugg overflow-hidden select-none">
<div id="gameContainer" class="relative w-[100vw] h-[56.25vw] max-w-[1920px] max-h-[1080px] mx-auto pixel-border bg-gradient-to-b from-amber-100 to-amber-300">
<!-- Start Screen -->
<div id="startScreen" class="absolute inset-0 z-50 flex flex-col items-center justify-center bg-black/80 text-white">
<h1 class="text-[clamp(2rem,6vw,5rem)] font-bold text-fugg-yellow mb-4 drop-shadow-[0_0_10px_rgba(241,196,15,0.8)]">FUGGLER ADOPTIONS</h1>
<h2 class="text-[clamp(1rem,3vw,2.5rem)] mb-8 text-fugg-green">THE LOST CRATES</h2>
<p class="text-center max-w-2xl mb-6 text-lg">Find ALL rare Fugglers: Uncle Squeezy, Mr Buttons, Fugg Stars, Laboratory Misfits & the legendary Green Checkmark Boxes!</p>
<button id="startBtn" class="bg-fugg-red hover:bg-fugg-red/80 text-white font-bold py-3 px-8 rounded-lg text-2xl pixel-border transition-all hover:scale-105">START GAME 🦷</button>
<p class="mt-4 text-sm text-gray-300">Arrow Keys to Move & Jump | Space to Collect</p>
</div>
<!-- HUD -->
<div id="hud" class="absolute top-0 left-0 w-full p-4 flex justify-between items-center z-40 pointer-events-none hidden">
<div class="bg-white/90 pixel-border p-2 rounded">
<p class="text-xl font-bold">CRATES: <span id="score">0</span>/12</p>
<p class="text-sm">LIVES: <span id="lives">3</span> ❤️</p>
</div>
<div class="bg-white/90 pixel-border p-2 rounded text-center">
<p class="font-bold text-fugg-red">LEGENDARY HUNT</p>
<p class="text-xs">Uncle Squeezy: <span id="uncleFound">❌</span> | Green Box: <span id="greenFound">❌</span></p>
</div>
</div>
<!-- Player -->
<div id="player" class="absolute bottom-10 left-20 w-16 h-20 transition-all duration-75 z-30" style="transform: translateZ(0);">
<div class="w-full h-full relative">
<!-- Fuggler Character -->
<div class="absolute bottom-0 w-14 h-16 bg-amber-700 rounded-t-full left-1/2 -translate-x-1/2"></div>
<div class="absolute bottom-8 w-10 h-8 bg-amber-800 rounded-full left-1/2 -translate-x-1/2"></div>
<div class="absolute top-2 left-3 w-3 h-3 bg-white rounded-full"></div>
<div class="absolute top-2 right-3 w-3 h-3 bg-white rounded-full"></div>
<div class="absolute top-4 left-1/2 -translate-x-1/2 w-6 h-2 bg-red-600 rounded-full"></div>
<div class="absolute top-5 left-1/2 -translate-x-1/2 text-[10px] font-bold">🦷</div>
<!-- Legs -->
<div class="absolute bottom-0 left-2 w-2 h-4 bg-amber-900"></div>
<div class="absolute bottom-0 right-2 w-2 h-4 bg-amber-900"></div>
</div>
</div>
<!-- World Elements -->
<div class="absolute bottom-0 w-full h-16 bg-fugg-dark"></div>
<!-- Platforms -->
<div class="absolute bottom-32 left-1/4 w-40 h-6 bg-fugg-brown pixel-border rounded"></div>
<div class="absolute bottom-64 left-2/3 w-40 h-6 bg-fugg-brown pixel-border rounded"></div>
<div class="absolute bottom-48 left-1/3 w-32 h-6 bg-fugg-brown pixel-border rounded"></div>
<div class="absolute bottom-80 left-1/6 w-36 h-6 bg-fugg-brown pixel-border rounded"></div>
<div class="absolute bottom-96 left-4/5 w-48 h-6 bg-fugg-brown pixel-border rounded"></div>
<!-- CRATES - ALL THE ONES WE TALKED ABOUT -->
<!-- 1. Uncle Squeezy - FIRST EVER -->
<div id="crate1" class="crate absolute bottom-[280px] left-[22%] w-12 h-16 bg-fugg-brown pixel-border rounded-sm check-mark cursor-pointer hover:scale-110 transition-transform" data-name="Uncle Squeezy" data-rare="legendary">
<div class="w-full h-full flex flex-col items-center justify-center text-white text-[8px] font-bold">
<span>UNCLE</span>
<span>SQUEEZY</span>
<span class="text-[10px] mt-1">🦷</span>
</div>
</div>
<!-- 2. Mr Buttons -->
<div id="crate2" class="crate absolute bottom-[120px] left-[40%] w-12 h-16 bg-fugg-brown pixel-border rounded-sm cursor-pointer hover:scale-110 transition-transform" data-name="Mr Buttons" data-rare="legendary">
<div class="w-full h-full flex flex-col items-center justify-center text-white text-[8px] font-bold">
<span>MR</span>
<span>BUTTONS</span>
<span class="text-[10px] mt-1">🔘</span>
</div>
</div>
<!-- 3-7. Fugg Stars Series 1 & 2 -->
<div class="crate absolute bottom-[200px] left-[55%] w-10 h-14 bg-fugg-red pixel-border rounded-sm cursor-pointer hover:scale-110 transition-transform" data-name="Lady Gag-Fugg" data-rare="ultra"></div>
<div class="crate absolute bottom-[350px] left-[70%] w-10 h-14 bg-fugg-red pixel-border rounded-sm cursor-pointer hover:scale-110 transition-transform" data-name="Chunky McDunky" data-rare="ultra"></div>
<div class="crate absolute bottom-[180px] left-[82%] w-10 h-14 bg-fugg-red pixel-border rounded-sm cursor-pointer hover:scale-110 transition-transform" data-name="Taylor Fugg-ift" data-rare="ultra"></div>
<div class="crate absolute bottom-[240px] left-[10%] w-10 h-14 bg-fugg-red pixel-border rounded-sm cursor-pointer hover:scale-110 transition-transform" data-name="Fugg Bieber" data-rare="ultra"></div>
<div class="crate absolute bottom-[300px] left-[90%] w-10 h-14 bg-fugg-red pixel-border rounded-sm cursor-pointer hover:scale-110 transition-transform" data-name="Fugg Perry" data-rare="ultra"></div>
<!-- 8-11. Laboratory Misfits -->
<div class="crate absolute bottom-[400px] left-[25%] w-11 h-15 bg-slate-700 pixel-border rounded-sm cursor-pointer hover:scale-110 transition-transform" data-name="Squidge R" data-rare="rare"></div>
<div class="crate absolute bottom-[160px] left-[65%] w-11 h-15 bg-slate-700 pixel-border rounded-sm cursor-pointer hover:scale-110 transition-transform" data-name="Gnawing Terror" data-rare="rare"></div>
<div class="crate absolute bottom-[220px] left-[18%] w-11 h-15 bg-slate-700 pixel-border rounded-sm cursor-pointer hover:scale-110 transition-transform" data-name="Stitch Face" data-rare="rare"></div>
<div class="crate absolute bottom-[320px] left-[48%] w-11 h-15 bg-slate-700 pixel-border rounded-sm cursor-pointer hover:scale-110 transition-transform" data-name="Glitch" data-rare="rare"></div>
<!-- 12. Green Checkmark Box - THE RAREST -->
<div id="greenBox" class="crate absolute bottom-[420px] left-[75%] w-14 h-18 bg-fugg-green pixel-border rounded-sm check-mark cursor-pointer hover:scale-110 transition-transform shadow-[0_0_15px_rgba(46,204,113,0.7)]" data-name="ORIGINAL 2010 HANDMADE" data-rare="MYTHIC">
<div class="w-full h-full flex flex-col items-center justify-center text-black text-[7px] font-extrabold">
<span>✅ VINTAGE</span>
<span>2010-2017</span>
<span class="text-[12px] mt-1">👵🧵</span>
<span class="text-[6px]">NO TAGS • NO BOX</span>
</div>
</div>
<!-- Collect Popup -->
<div id="popup" class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white pixel-border p-4 rounded-lg z-50 text-center hidden min-w-[200px]">
<p class="font-bold text-xl" id="popupText"></p>
<p class="text-sm text-gray-600 mt-1" id="popupRarity"></p>
<button onclick="closePopup()" class="mt-3 bg-fugg-green text-white px-4 py-1 rounded">NICE!</button>
</div>
<!-- Win Screen -->
<div id="winScreen" class="absolute inset-0 z-50 flex flex-col items-center justify-center bg-fugg-green/90 text-white hidden">
<h2 class="text-5xl font-bold mb-4 drop-shadow-[0_0_8px_rgba(0,0,0,0.5)]">YOU FOUND THEM ALL!</h2>
<p class="text-2xl mb-6">You collected EVERY rare Fuggler ever made!</p>
<p class="text-lg mb-8">✅ Uncle Squeezy ✅ Green Checkmark Box ✅ All Fugg Stars ✅ All Misfits</p>
<button onclick="restartGame()" class="bg-white text-fugg-green font-bold py-2 px-6 rounded-lg text-xl pixel-border">PLAY AGAIN</button>
</div>
</div>
<script>
// Game Variables
const player = document.getElementById('player');
const crates = document.querySelectorAll('.crate');
const startScreen = document.getElementById('startScreen');
const startBtn = document.getElementById('startBtn');
const hud = document.getElementById('hud');
const popup = document.getElementById('popup');
const popupText = document.getElementById('popupText');
const popupRarity = document.getElementById('popupRarity');
const winScreen = document.getElementById('winScreen');
let gameRunning = false;
let playerX = 20; // %
let playerY = 10; // % from bottom
let velocityY = 0;
let isJumping = false;
let score = 0;
let lives = 3;
let keys = {};
let collected = new Set();
// Physics constants
const gravity = 0.8;
const jumpStrength = 16;
const moveSpeed = 2.5;
const groundLevel = 10; // % from bottom
// Controls
document.addEventListener('keydown', e => { keys[e.code] = true; });
document.addEventListener('keyup', e => { keys[e.code] = false; });
// Start Game
startBtn.addEventListener('click', () => {
startScreen.classList.add('hidden');
hud.classList.remove('hidden');
gameRunning = true;
requestAnimationFrame(gameLoop);
});
// Game Loop
function gameLoop() {
if (!gameRunning) return;
// Movement
if (keys['ArrowLeft'] && playerX > 5) playerX -= moveSpeed;
if (keys['ArrowRight'] && playerX < 90) playerX += moveSpeed;
// Jump
if (keys['ArrowUp'] && !isJumping) {
velocityY = jumpStrength;
isJumping = true;
}
// Gravity
velocityY -= gravity;
playerY += velocityY * 0.5;
// Ground collision
if (playerY <= groundLevel) {
playerY = groundLevel;
velocityY = 0;
isJumping = false;
}
// Platform collision check
checkPlatformCollisions();
// Update player position
player.style.left = `${playerX}%`;
player.style.bottom = `${playerY}%`;
// Check crate collection
checkCollection();
requestAnimationFrame(gameLoop);
}
// Simple platform collision
function checkPlatformCollisions() {
const platforms = document.querySelectorAll('.bg-fugg-brown');
platforms.forEach(plat => {
const platRect = plat.getBoundingClientRect();
const playerRect = player.getBoundingClientRect();
if (playerRect.bottom >= platRect.top - 10 &&
playerRect.bottom <= platRect.top + 10 &&
playerRect.right > platRect.left + 5 &&
playerRect.left < platRect.right - 5 &&
velocityY < 0) {
playerY = (window.innerHeight - platRect.top) / window.innerHeight * 100;
velocityY = 0;
isJumping = false;
}
});
}
// Collect crates with Space
function checkCollection() {
if (keys['Space']) {
crates.forEach(crate => {
if (collected.has(crate)) return;
const crateRect = crate.getBoundingClientRect();
const playerRect = player.getBoundingClientRect();
// Distance check
const distance = Math.hypot(
(playerRect.left + playerRect.width/2) - (crateRect.left + crateRect.width/2),
(playerRect.top + playerRect.height/2) - (crateRect.top + crateRect.height/2)
);
if (distance < 80) {
collectCrate(crate);
}
});
}
}
// Collect logic
function collectCrate(crate) {
collected.add(crate);
score++;
document.getElementById('score').textContent = score;
const name = crate.dataset.name;
const rarity = crate.dataset.rare;
// Special tracking
if (name === "Uncle Squeezy") document.getElementById('uncleFound').textContent = '✅';
if (name === "ORIGINAL 2010 HANDMADE") document.getElementById('greenFound').textContent = '✅';
// Visual feedback
crate.style.opacity = '0.3';
crate.style.transform = 'scale(0.8)';
// Popup
popupText.textContent = `YOU FOUND: ${name}!`;
popupRarity.textContent = `Rarity: ${rarity.toUpperCase()}`;
popup.classList.remove('hidden');
// Win check
if (score >= 12) {
setTimeout(() => {
winScreen.classList.remove('hidden');
gameRunning = false;
}, 1500);
}
}
function closePopup() {
popup.classList.add('hidden');
}
function restartGame() {
window.location.reload();
}
</script>
</body>
</html>Game Source: Fuggler Adoptions: The Lost Crates 📦
Creator: QuantumBolt10
Libraries: none
Complexity: complex (282 lines, 15.4 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: fuggler-adoptions-the-lost-crates-quantumbolt10" to link back to the original. Then publish at arcadelab.ai/publish.