Made with Nano Banana 2 Lite · CC0 · 2 Oct 2026

Hand-drawn

Generated from: a scene from a small video game about: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Goober's EM Adventure</title> <style> * { box-sizing: border-box; user-select: none; -webkit-user-select: none; touch-action: manipulation; margin: 0; padding: 0; } body, html { width: 100%; height: 100vh; overflow: hidden; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: linear-gradient(135deg, #090d16 0%, #111827 50%, #1e1b4b 100%); color: #fff; display: flex; flex-direction: column; } .font-game { font-family: Impact, "Arial Black", sans-serif; letter-spacing: 1.5px; } /* UI Overlays & Modals */ #start-screen, .modal-overlay { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 16px; background: rgba(3, 7, 18, 0.94); backdrop-filter: blur(10px); } .card { width: 100%; max-width: 480px; background: rgba(15, 23, 42, 0.92); border: 2px solid rgba(245, 158, 11, 0.5); border-radius: 16px; padding: 14px; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.6); } .alert-box { margin-top: 8px; background: rgba(127, 29, 29, 0.6); border: 1px solid rgba(239, 68, 68, 0.6); border-radius: 10px; padding: 8px; font-size: 11px; color: #fecaca; font-weight: bold; } /* Buttons */ .btn-main { padding: 12px 24px; background: linear-gradient(180deg, #10b981 0%, #047857 100%); color: #ffffff; font-weight: 900; font-size: 20px; border-radius: 16px; border: 2px solid #a7f3d0; cursor: pointer; box-shadow: 0 6px 0 #064e3b; text-align: center; } .btn-main:active { transform: translateY(4px); box-shadow: 0 2px 0 #064e3b; } .btn-shop { padding: 10px 20px; background: linear-gradient(180deg, #f59e0b 0%, #b45309 100%); color: #ffffff; font-weight: 900; font-size: 16px; border-radius: 14px; border: 2px solid #fef08a; cursor: pointer; box-shadow: 0 5px 0 #78350f; } .btn-shop:active { transform: translateY(3px); box-shadow: 0 2px 0 #78350f; } .diff-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px; } .diff-btn { padding: 8px; background: #1e293b; border: 2px solid #334155; border-radius: 12px; font-size: 12px; font-weight: bold; color: #cbd5e1; cursor: pointer; } .diff-btn.selected { border-color: #f59e0b; background: #78350f; color: #fef08a; box-shadow: 0 0 10px rgba(245, 158, 11, 0.5); } /* HUD */ #game-hud { width: 100%; height: 50px; background: rgba(15, 23, 42, 0.95); border-bottom: 1px solid rgba(51, 65, 85, 0.8); padding: 0 16px; display: flex; align-items: center; justify-content: space-between; z-index: 20; } .hud-pill { background: rgba(30, 41, 59, 0.85); padding: 5px 14px; border-radius: 999px; border: 1px solid rgba(245, 158, 11, 0.4); display: flex; align-items: center; gap: 6px; font-weight: bold; font-size: 14px; } /* Canvas & Controls */ #canvas-container { flex: 1; width: 100%; position: relative; overflow: hidden; background: #020617; } #game-canvas { width: 100%; height: 100%; display: block; } #touch-controls { width: 100%; height: 90px; background: #0f172a; border-top: 1px solid #1e293b; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; z-index: 20; } .touch-btn { width: 64px; height: 64px; border-radius: 16px; border: none; color: white; font-size: 24px; background: linear-gradient(180deg, #3b82f6 0%, #1d4ed8 100%); box-shadow: 0 5px 0 #1e3a8a; cursor: pointer; } .touch-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #1e3a8a; } .jump-btn { width: 100px; height: 64px; border-radius: 16px; border: none; color: white; font-weight: bold; font-size: 18px; background: linear-gradient(180deg, #10b981 0%, #047857 100%); box-shadow: 0 5px 0 #064e3b; cursor: pointer; } .jump-btn:active { transform: translateY(3px); box-shadow: 0 2px 0 #064e3b; } /* Shop Grid */ .shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 10px; width: 100%; } .shop-item { background: #1e293b; border: 2px solid #334155; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .hidden { display: none !important; } </style> </head> <body> <!-- START SCREEN --> <div id="start-screen"> <h1 class="font-game" style="font-size: 32px; color: #f59e0b; text-shadow: 0 0 12px rgba(245, 158, 11, 0.6);"> GOOBER'S EM ADVENTURE </h1> <div class="card"> <h2 style="font-size: 13px; color: #fde047; text-transform: uppercase;">📜 Mission Briefing</h2> <p style="font-size: 12px; color: #cbd5e1; margin-top: 6px; line-height: 1.4;"> Guide Goober across elevated floating platforms in all 7 EM Spectrum regions! Collect 🍌 bananas, execute 360° double-jump backflips, and unlock quiz gates! </p> <div class="alert-box"> ⚠️ PENALTY: Touching hazards or answering quiz questions wrong costs 1 BANANA! </div> </div> <div style="width: 180px; height: 130px; background: #0f172a; border: 3px solid #f59e0b; border-radius: 16px; overflow: hidden;"> <canvas id="goober-preview-canvas" width="180" height="130"></canvas> </div> <div style="width: 100%; max-width: 320px;"> <label style="font-size: 11px; color: #94a3b8; text-transform: uppercase; font-weight: bold; display: block; text-align: center;">Select Difficulty</label> <div class="diff-grid"> <button onclick="setDifficulty('easy')" id="diff-easy" class="diff-btn">🟢 EASY</button> <button onclick="setDifficulty('medium')" id="diff-medium" class="diff-btn selected">🟡 MEDIUM</button> <button onclick="setDifficulty('hard')" id="diff-hard" class="diff-btn">🔴 HARD</button> </div> </div> <div style="display: flex; gap: 12px; width: 100%; max-width: 320px; justify-content: center;"> <button onclick="openShop()" class="btn-shop font-game">🛍 SHOP</button> <button onclick="startGame()" class="btn-main font-game" style="flex: 1;">▶ PLAY NOW</button> </div> </div> <!-- SHOP MODAL --> <div id="shop-modal" class="modal-overlay hidden"> <h2 class="font-game" style="font-size: 28px; color: #f59e0b;">GOOBER'S OUTFIT SHOP</h2> <div class="hud-pill" style="margin-top: 6px;"> <span>🍌 Bananas Available:</span> <span id="shop-banana-count" style="color: #f59e0b;">0</span> </div> <div class="card" style="max-height: 60vh; overflow-y: auto;"> <div class="shop-grid"> <div class="shop-item"> <span style="font-size: 13px; font-weight: bold;">Classic Brown</span> <span style="font-size: 11px; color: #a7f3d0;">Unlocked</span> <button onclick="equipOutfit('default')" class="diff-btn" style="width:100%;">Equip</button> </div> <div class="shop-item"> <span style="font-size: 13px; font-weight: bold;">Space Helmet</span> <span style="font-size: 11px; color: #fde047;">🍌 3 Bananas</span> <button onclick="buyOutfit('red', 3)" id="btn-buy-red" class="diff-btn" style="width:100%;">Buy</button> </div> <div class="shop-item"> <span style="font-size: 13px; font-weight: bold;">Golden Goober</span> <span style="font-size: 11px; color: #fde047;">🍌 8 Bananas</span> <button onclick="buyOutfit('gold', 8)" id="btn-buy-gold" class="diff-btn" style="width:100%;">Buy</button> </div> <div class="shop-item"> <span style="font-size: 13px; font-weight: bold;">Speed Boost (+25%)</span> <span style="font-size: 11px; color: #fde047;">🍌 5 Bananas</span> <button onclick="buyUpgrade('speed', 5)" id="btn-buy-speed" class="diff-btn" style="width:100%;">Upgrade</button> </div> </div> </div> <button onclick="closeShop()" class="btn-main font-game" style="width: 100%; max-width: 280px;">CLOSE</button> </div> <!-- HUD --> <div id="game-hud"> <div class="hud-pill"> <span>🍌</span> <span id="score-display" style="color: #f59e0b;">0</span> </div> <div class="hud-pill" style="border-color: rgba(99, 102, 241, 0.5);"> <span id="zone-display" style="color: #c7d2fe; font-size: 12px; text-transform: uppercase;">Radio Waves</span> </div> <button onclick="openShop()" style="background:none; border:none; font-size: 22px; cursor: pointe, as an in-game screenshot in a hand-drawn ink and watercolour style. Palette: paper #f2e8cf, ink #283618, player tomato #bc4749, threat plum #6d597a, accent leaf #a7c957. Everything is original: never draw or resemble characters, places or logos from existing games, films or brands (no red-capped plumbers, no famous mascots), even when the idea names one. Keep the pictures honest: they promise what a small first version of this game, made in a game engine in a few days, can look like. Simple readable shapes, clear silhouettes, few flat materials, the in-game camera view. Never film stills, photoreal renders, AAA key art, detailed textures, cinematic lighting, or anything that looks like a big-studio game. No text, UI, HUD, logos or editor screens inside any image.