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

Flat colour

Generated from: a scene from a small video game about: <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Duelo Medieval</title> <style> body { margin: 0; background: #171827; color: white; font-family: system-ui, sans-serif; text-align: center; } h1 { margin: 12px 0 4px; } p { margin: 5px 10px 12px; } canvas { display: block; margin: 0 auto; max-width: 100%; background: #a9d9e8; border: 4px solid #6a4935; image-rendering: pixelated; } </style> </head> <body> <h1>⚔️ Duelo Medieval</h1> <p> Jogador 1: A/D mover · W pular · E atacar · Q dash · 1 espada / 2 lança <br> Jogador 2: ←/→ mover · ↑ pular · Espaço atacar · Enter dash · 8 espada / 9 lança </p> <canvas id="game" width="900" height="500"></canvas> <script> const canvas = document.querySelector("#game"); const ctx = canvas.getContext("2d"); const keys = new Set(); const floorY = 420; const gravity = 0.65; let gameOver = false; let winner = ""; const players = [ { x: 180, y: floorY - 60, w: 38, h: 60, vx: 0, vy: 0, dir: 1, color: "#c74438", health: 100, weapon: "espada", attack: 0, cooldown: 0, dash: 0, dashCooldown: 0, onGround: true }, { x: 680, y: floorY - 60, w: 38, h: 60, vx: 0, vy: 0, dir: -1, color: "#3977c5", health: 100, weapon: "espada", attack: 0, cooldown: 0, dash: 0, dashCooldown: 0, onGround: true } ]; const platforms = [ { x: 0, y: floorY, w: 900, h: 80 }, { x: 105, y: 325, w: 190, h: 18 }, { x: 605, y: 325, w: 190, h: 18 }, { x: 350, y: 255, w: 200, h: 18 } ]; window.addEventListener("keydown", (e) => { const k = e.key.toLowerCase(); if ([" ", "arrowleft", "arrowright", "arrowup", "enter"].includes(k)) { e.preventDefault(); } keys.add(k); if (k === "1") players[0].weapon = "espada"; if (k === "2") players[0].weapon = "lanca"; if (k === "8") players[1].weapon = "espada"; if (k === "9") players[1].weapon = "lanca"; if (k === "r" && gameOver) restart(); }); window.addEventListener("keyup", (e) => keys.delete(e.key.toLowerCase())); function pressed(...names) { return names.some(name => keys.has(name)); } function attack(player, opponent) { if (player.cooldown > 0 || gameOver) return; player.attack = 12; player.cooldown = 32; const reach = player.weapon === "lanca" ? 82 : 56; const hitbox = { x: player.dir === 1 ? player.x + player.w : player.x - reach, y: player.y + 13, w: reach, h: 30 }; if ( hitbox.x < opponent.x + opponent.w && hitbox.x + hitbox.w > opponent.x && hitbox.y < opponent.y + opponent.h && hitbox.y + hitbox.h > opponent.y ) { opponent.health = Math.max(0, opponent.health - 12); opponent.vx = player.dir * 7; opponent.vy = -4; if (opponent.health === 0) { gameOver = true; winner = player === players[0] ? "Jogador 1" : "Jogador 2"; } } } function updatePlayer(p, other, index) { if (gameOver) return; const left = index === 0 ? pressed("a") : pressed("arrowleft"); const right = index === 0 ? pressed("d") : pressed("arrowright"); const jump = index === 0 ? pressed("w") : pressed("arrowup"); const attackKey = index === 0 ? pressed("e") : pressed(" "); const dashKey = index === 0 ? pressed("q") : pressed("enter"); if (left) { p.vx = -4; p.dir = -1; } else if (right) { p.vx = 4; p.dir = 1; } else if (p.dash === 0) p.vx *= 0.75; if (jump && p.onGround) { p.vy = -12; p.onGround = false; } if (dashKey && p.dashCooldown === 0) { p.dash = 9; p.dashCooldown = 55; p.vx = p.dir * 12; p.vy = 0; } if (attackKey) attack(p, other); if (p.dash > 0) p.dash--; if (p.dashCooldown > 0) p.dashCooldown--; if (p.attack > 0) p.attack--; if (p.cooldown > 0) p.cooldown--; p.vy += gravity; p.x += p.vx; p.y += p.vy; p.x = Math.max(0, Math.min(canvas.width - p.w, p.x)); p.onGround = false; for (const plat of platforms) { const overlapsX = p.x + p.w > plat.x && p.x < plat.x + plat.w; const wasAbove = p.y + p.h - p.vy <= plat.y; if (overlapsX && wasAbove && p.y + p.h >= plat.y && p.vy >= 0) { p.y = plat.y - p.h; p.vy = 0; p.onGround = true; } } if (p.y > canvas.height + 100) { p.health = 0; gameOver = true; winner = index === 0 ? "Jogador 2" : "Jogador 1"; } } function drawBackground() { const sky = ctx.createLinearGradient(0, 0, 0, canvas.height); sky.addColorStop(0, "#8bd0e2"); sky.addColorStop(1, "#e7c58a"); ctx.fillStyle = sky; ctx.fillRect(0, 0, canvas.width, canvas.height); // Colinas e castelo ao fundo ctx.fillStyle = "#65885c"; ctx.beginPath(); ctx.ellipse(170, 410, 260, 120, 0, 0, Math.PI * 2); ctx.ellipse(720, 410, 300, 140, 0, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = "#817264"; ctx.fillRect(405, 130, 90, 125); ctx.fillRect(390, 115, 25, 50); ctx.fillRect(485, 115, 25, 50); ctx.fillStyle = "#665143"; ctx.fillRect(437, 200, 27, 55); ctx.fillStyle = "#d7c89a"; ctx.fillRect(397, 126, 12, 12); ctx.fillRect(492, 126, 12, 12); for (const plat of platforms) { ctx.fillStyle = plat.y === floorY ? "#765033" : "#785638"; ctx.fillRect(plat.x, plat.y, plat.w, plat.h); ctx.fillStyle = "#548047"; ctx.fillRect(plat.x, plat.y, plat.w, 7); } } function drawPlayer(p, index) { // pernas e corpo ctx.fillStyle = "#342f38"; ctx.fillRect(p.x + 5, p.y + 42, 11, 18); ctx.fillRect(p.x + 22, p.y + 42, 11, 18); ctx.fillStyle = p.color; ctx.fillRect(p.x + 3, p.y + 20, 32, 28); // cabeça e elmo ctx.fillStyle = "#f1c49a"; ctx.fillRect(p.x + 8, p.y + 3, 23, 21); ctx.fillStyle = index === 0 ? "#9b2e28" : "#254f91"; ctx.fillRect(p.x + 5, p.y, 29, 11); // arma visual e golpe const reach = p.weapon === "lanca" ? 48 : 34; const handX = p.dir === 1 ? p.x + 29 : p.x + 9; const handY = p.y + 30; ctx.lineWidth = p.weapon === "lanca" ? 4 : 6; ctx.strokeStyle = p.weapon === "lanca" ? "#684326" : "#aaaeb7"; ctx.beginPath(); ctx.moveTo(handX, handY); ctx.lineTo(handX + p.dir * reach, handY - 3); ctx.stroke(); if (p.weapon === "lanca") { ctx.fillStyle = "#d9dce2"; ctx.beginPath(); ctx.moveTo(handX + p.dir * (reach + 9), handY - 3); ctx.lineTo(handX + p.dir * reach, handY - 9); ctx.lineTo(handX + p.dir * reach, handY + 3); ctx.fill(); } if (p.attack > 0) { ctx.strokeStyle = "#fff3a6"; ctx.lineWidth = 5; ctx.beginPath(); ctx.arc( p.dir === 1 ? p.x + p.w : p.x, p.y + 30, p.weapon === "lanca" ? 45 : 34, p.dir === 1 ? -0.9 : Math.PI - 0.9, p.dir === 1 ? 0.9 : Math.PI + 0.9 ); ctx.stroke(); } } function drawHealth() { ctx.fillStyle = "#302b32"; ctx.fillRect(35, 25, 300, 25); ctx.fillRect(565, 25, 300, 25); ctx.fillStyle = "#e34b42"; ctx.fillRect(35, 25, 300 * players[0].health / 100, 25); ctx.fillStyle = "#4388e0"; ctx.fillRect(565, 25, 300 * players[1].health / 100, 25); ctx.strokeStyle = "white"; ctx.lineWidth = 2; ctx.strokeRect(35, 25, 300, 25); ctx.strokeRect(565, 25, 300, 25); ctx.fillStyle = "#fff"; ctx.font = "16px system-ui"; ctx.fillText("JOGADOR 1", 35, 19); ctx.fillText("JOGADOR 2", 565, 19); } function draw() { drawBackground(); drawPlayer(players[0], 0); drawPlayer(players[1], 1); drawHealth(); if (gameOver) { ctx.fillStyle = "rgba(20, 18, 30, 0.78)"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = "white"; ctx.textAlign = "center"; ctx.font = "bold 42px system-ui"; ctx.fillText(winner + " venceu!", canvas.width / 2, 225); ctx.font = "22px system-ui"; ctx.fillText("Aperte R para jogar novamente", canvas.width / 2, 270); ctx.textAlign = "left"; } } function restart() { players[0].x = 180; players[0].y = floorY - 60; players[1].x = 680; players[1].y = floorY - 60; for (const p of players) { p.vx = 0; p.vy = 0; p.health = 100; p.attack, as an in-game screenshot in flat colour 2D shapes with a bright limited palette. Palette: sky blue #8ecae6, grass #3a7d44, player sunflower #ffb703, threat red #d62828, accent white #fdfcdc. 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.