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

Hand-drawn

Generated from: a scene from a small video game about: <!DOCTYPE html> <html lang="vi"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Dragon Ball 3D: Arena - Publisher: HOÀNG ANH</title> <style> body { background-color: #050510; color: #ffffff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: center; margin: 0; padding: 10px; user-select: none; overflow: hidden; } h1 { color: #ffcc00; text-shadow: 0 0 15px #ff6600; margin: 2px 0; font-size: 22px; } p.subtitle { color: #00ffcc; font-size: 12px; margin: 2px 0; } p.publisher { color: #ff9900; font-size: 14px; font-weight: bold; margin: 4px 0 10px 0; text-shadow: 0 0 8px rgba(255, 153, 0, 0.7); } /* Môi trường 3D Perspective Arena */ #game-container { position: relative; width: 850px; height: 400px; background: radial-gradient(circle at center, #2e1a47 0%, #0d041a 100%); margin: 0 auto; border: 4px solid #ffcc00; border-radius: 12px; overflow: hidden; box-shadow: 0 0 35px rgba(255, 204, 0, 0.5); perspective: 800px; /* Tạo chiều sâu 3D */ } /* Sàn đấu 3D giả lập lưới không gian */ .arena-floor { position: absolute; bottom: 0; width: 100%; height: 160px; background: linear-gradient(to top, #1a082e, transparent); border-top: 2px dashed rgba(0, 255, 255, 0.3); transform: rotateX(60deg); transform-origin: bottom; } .screen-shake { animation: shakeScreen 0.2s; } @keyframes shakeScreen { 0% { transform: translate(0, 0); } 20% { transform: translate(-6px, 4px); } 40% { transform: translate(6px, -4px); } 60% { transform: translate(-4px, -2px); } 80% { transform: translate(4px, 2px); } 100% { transform: translate(0, 0); } } .stats { display: flex; justify-content: space-around; margin-top: 6px; font-size: 13px; font-weight: bold; } .bar-container { width: 200px; height: 16px; background: #222; border: 2px solid #fff; border-radius: 8px; overflow: hidden; display: inline-block; vertical-align: middle; } .hp-fill { height: 100%; width: 100%; background: linear-gradient(to right, #ff3333, #ff6666); transition: width 0.1s linear; } #boss-hp { background: linear-gradient(to right, #8800ff, #cc33ff); } .sub-bar-container { width: 130px; height: 9px; background: #222; border: 1px solid #aaa; border-radius: 4px; overflow: hidden; display: inline-block; vertical-align: middle; margin-left: 4px; } .ki-fill { height: 100%; width: 0%; background: #00ffff; transition: width 0.1s; } .cd-fill { height: 100%; width: 0%; background: #ff9900; } /* Nhân vật 3D với hiệu ứng chuyển động mượt */ #character { position: absolute; font-size: 55px; transition: transform 0.05s linear, left 0.05s linear, bottom 0.05s linear; filter: drop-shadow(0 15px 10px rgba(0,0,0,0.6)); z-index: 10; } #boss { position: absolute; bottom: 70px; right: 120px; font-size: 65px; transition: transform 0.1s ease; filter: drop-shadow(0 15px 10px rgba(0,0,0,0.6)); z-index: 9; } .boss-berserk { filter: drop-shadow(0 0 20px #ff0000) drop-shadow(0 15px 10px rgba(0,0,0,0.6)); animation: bossShake 0.15s infinite alternate; } @keyframes bossShake { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-3px, 3px) scale(1.05); } } .menu-select { margin-top: 4px; background: #1a1a2e; padding: 5px 10px; border-radius: 6px; display: inline-block; } select { background: #333; color: #ffcc00; padding: 3px 8px; border-radius: 4px; font-weight: bold; border: 1px solid #777; cursor: pointer; } .guide-box { margin-top: 8px; background: #151522; border: 1px solid #444; display: inline-block; padding: 6px 15px; border-radius: 8px; font-size: 12px; } .key { background: #333; color: #ffcc00; padding: 2px 5px; border-radius: 4px; border: 1px solid #777; font-weight: bold; } #battle-log { margin-top: 6px; height: 45px; background: #111119; border: 1px solid #444; border-radius: 6px; padding: 5px; width: 838px; margin-left: auto; margin-right: auto; font-size: 11px; color: #00ffcc; overflow-y: auto; text-align: left; font-family: monospace; } .floating-text { position: absolute; font-weight: bold; font-size: 22px; animation: floatUp 0.7s forwards; pointer-events: none; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); z-index: 20; } @keyframes floatUp { 0% { opacity: 1; transform: translateY(0) scale(1); } 50% { transform: translateY(-30px) scale(1.3); } 100% { opacity: 0; transform: translateY(-60px) scale(1); } } </style> </head> <body> <h1>DRAGON BALL 3D: ARENA ARENA</h1> <p class="subtitle">Không gian 3D giả lập: Dùng A/D (Trái/Phải), W/S (Bay lên/Xuống chiều sâu không gian)</p> <p class="publisher">🎮 Nhà Phát Hành / Sáng Lập: HOÀNG ANH</p> <div class="menu-select"> <label>Chọn Chiến Binh 3D: </label> <select id="char-select" onchange="changeCharacter()"> <option value="goku">Goku 3D (Saiyan Huyền Thoại)</option> <option value="vegeta">Vegeta 3D (Hoàng Tử Saiyan)</option> </select> </div> <div class="stats"> <div> <span id="char-name">Goku</span>: <div class="bar-container"><div id="goku-hp" class="hp-fill"></div></div> <span id="goku-hp-text">100/100</span> </div> <div> Frieza 3D (Boss Cuồng Nộ): <div class="bar-container"><div id="boss-hp" class="hp-fill"></div></div> <span id="boss-hp-text">250/250</span> </div> </div> <div style="margin-top: 4px; font-size: 11px; color: #ff9900;"> Thanh Ki Năng Lượng (Ultimate): <div class="sub-bar-container"><div id="ki-bar" class="ki-fill"></div></div> | Tấn công của Boss: <div class="sub-bar-container"><div id="boss-cd" class="cd-fill"></div></div> </div> <div id="game-container"> <div class="arena-floor"></div> <div id="character">🥋</div> <div id="boss">👾</div> </div> <div class="guide-box"> <b>ĐIỀU KHIỂN 3D:</b> <span class="key">, 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.