Código del juego Super Tucker Bros Deluxe HTML5

353 829175034

Remix Abrir en el editor Publica tu código

Código del juego Super Tucker Bros Deluxe HTML5

Recomendado

8 July 2026

Animación del botón de pedido

16 May 2025

Un código de DEME

26 May 2025

Un código de Liamgilles76

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Super Tucker Bros Deluxe</title>
  <style>
    * { box-sizing: border-box; }
    html, body {
      margin: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #050816;
      color: white;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      user-select: none;
    }

#wrap {
      position: fixed;
      inset: 0;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 50% 20%, rgba(87, 170, 255, 0.25), transparent 35%),
        linear-gradient(#06142f, #050816 68%);
    }

canvas {
      width: min(100vw, 1280px);
      height: min(100vh, 720px);
      image-rendering: pixelated;
      background: #6cc9ff;
      box-shadow: 0 0 40px rgba(0,0,0,.55);
      border: 2px solid rgba(255,255,255,.15);
    }

#overlay {
      position: fixed;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

.panel {
      pointer-events: auto;
      max-width: 760px;
      padding: 28px;
      background: rgba(5, 8, 22, 0.88);
      border: 2px solid rgba(255,255,255,.18);
      box-shadow: 0 25px 80px rgba(0,0,0,.6);
      text-align: center;
    }

.panel h1 {
      margin: 0 0 10px;
      font-size: clamp(34px, 6vw, 72px);
      line-height: .9;
      letter-spacing: -3px;
      text-transform: uppercase;
      text-shadow: 0 6px 0 #1b2757, 0 0 35px #40d3ff;
    }

.panel p { color: #cfe8ff; font-size: 16px; line-height: 1.55; }
    .panel kbd {
      padding: 3px 8px;
      background: #101936;
      border: 1px solid rgba(255,255,255,.22);
      color: #fff;
      box-shadow: inset 0 -2px rgba(0,0,0,.45);
    }
    button {
      cursor: pointer;
      border: 0;
      padding: 14px 22px;
      margin: 8px;
      color: #06142f;
      background: linear-gradient(#fff472, #ffbf1c);
      font-weight: 900;
      letter-spacing: .5px;
      text-transform: uppercase;
      box-shadow: 0 7px 0 #a96500, 0 14px 28px rgba(0,0,0,.35);
    }
    button:active { transform: translateY(5px); box-shadow: 0 2px 0 #a96500; }
    .hidden { display: none !important; }
  </style>
</head>
<body>
  <div id="wrap">
    <canvas id="game" width="1280" height="720"></canvas>
  </div>

<div id="overlay">
    <div id="menu" class="panel">
      <h1>Super Tucker<br>Bros Deluxe</h1>
      <p>
        Save the last legendary fruit peach from Evil Bowser and his koopas. Collect coins, bonk mystery boxes,
        buy upgrades, eat the peach, grab the seeds, and survive the cinematic boss fight.
      </p>
      <p>
        Move: <kbd>A</kbd>/<kbd>D</kbd> or <kbd>←</kbd>/<kbd>→</kbd> · Jump: <kbd>W</kbd>/<kbd>Space</kbd>/<kbd>↑</kbd><br>
        Attack / Fireball: <kbd>J</kbd> · Shop: <kbd>E</kbd> · Pause: <kbd>P</kbd>
      </p>
      <button id="startBtn">Start Game</button>
    </div>
  </div>

const canvas = document.getElementById('game');
    const ctx = canvas.getContext('2d');
    const overlay = document.getElementById('overlay');
    const menu = document.getElementById('menu');
    const startBtn = document.getElementById('startBtn');

const W = canvas.width;
    const H = canvas.height;
    const TILE = 48;
    const GRAVITY = 2100;
    const FRICTION = 0.82;
    const WORLD_W = 9600;

const keys = new Set();
    let audio = null;
    let last = performance.now();
    let gameState = 'menu';
    let slowMo = 1;
    let shake = 0;
    let flash = 0;
    let cinematicText = '';
    let cinematicTimer = 0;
    let bossMusicTimer = 0;
    let normalMusicTimer = 0;

const camera = { x: 0, y: 0 };

const player = {
      x: 120, y: 350, w: 38, h: 52,
      vx: 0, vy: 0,
      speed: 690,
      jump: 920,
      grounded: false,
      facing: 1,
      coins: 0,
      hp: 5,
      maxHp: 5,
      inv: 0,
      fireCooldown: 0,
      hasBoots: false,
      hasArmor: false,
      hasFire: false,
      seeds: 0,
      atePeach: false,
      alive: true,
      attackTimer: 0
    };

const bowser = {
      active: false,
      defeated: false,
      x: 8920, y: 390, w: 130, h: 150,
      vx: 0, vy: 0,
      hp: 120,
      maxHp: 120,
      phase: 1,
      timer: 0,
      roar: 0,
      stompCooldown: 2,
      fireCooldown: 1.2
    };

const platforms = [];
    const boxes = [];
    const coins = [];
    const enemies = [];
    const particles = [];
    const projectiles = [];
    const seeds = [];
    const clouds = [];
    const shops = [{ x: 4070, y: 462, w: 160, h: 114, open: false }];
    const peach = { x: 8260, y: 410, w: 46, h: 56, collected: false };

function makeAudio() {
      if (audio) return;
      const AC = window.AudioContext || window.webkitAudioContext;
      audio = new AC();
    }

function beep(freq, dur = .08, type = 'square', gain = .03, when = 0) {
      if (!audio) return;
      const t = audio.currentTime + when;
      const osc = audio.createOscillator();
      const g = audio.createGain();
      osc.type = type;
      osc.frequency.setValueAtTime(freq, t);
      g.gain.setValueAtTime(0.0001, t);
      g.gain.exponentialRampToValueAtTime(gain, t + .01);
      g.gain.exponentialRampToValueAtTime(0.0001, t + dur);
      osc.connect(g); g.connect(audio.destination);
      osc.start(t); osc.stop(t + dur + .03);
    }

function noise(dur = .15, gain = .04) {
      if (!audio) return;
      const length = audio.sampleRate * dur;
      const buffer = audio.createBuffer(1, length, audio.sampleRate);
      const data = buffer.getChannelData(0);
      for (let i = 0; i < length; i++) data[i] = Math.random() * 2 - 1;
      const src = audio.createBufferSource();
      const g = audio.createGain();
      const f = audio.createBiquadFilter();
      f.type = 'lowpass'; f.frequency.value = 700;
      g.gain.value = gain;
      src.buffer = buffer;
      src.connect(f); f.connect(g); g.connect(audio.destination);
      src.start();
    }

function playNormalMusic(dt) {
      if (!audio || gameState !== 'play' || bowser.active) return;
      normalMusicTimer += dt;
      if (normalMusicTimer > .36) {
        normalMusicTimer = 0;
        const melody = [523,659,784,659,587,698,880,784,659,523,587,659];
        const n = melody[(Math.floor(performance.now()/360)) % melody.length];
        beep(n, .08, 'triangle', .018);
        if (Math.random() < .35) beep(n/2, .11, 'square', .012, .02);
      }
    }

function playBossMusic(dt) {
      if (!audio || !bowser.active || bowser.defeated) return;
      bossMusicTimer += dt;
      if (bossMusicTimer > .18) {
        bossMusicTimer = 0;
        const bass = [82, 82, 98, 73, 82, 123, 110, 98];
        const lead = [330, 392, 370, 330, 494, 440, 392, 370];
        const i = Math.floor(performance.now()/180) % bass.length;
        beep(bass[i], .13, 'sawtooth', .045);
        if (i % 2 === 0) beep(lead[i], .08, 'square', .018, .04);
        if (i === 0 || i === 4) noise(.06, .02);
      }
    }

function rects(a, b) {
      return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y;
    }

function initWorld() {
      platforms.length = boxes.length = coins.length = enemies.length = particles.length = projectiles.length = seeds.length = clouds.length = 0;
      for (let x = 0; x < WORLD_W; x += 220) addPlatform(x, 600 + ((x/220)%5===3 ? 22 : 0), 220, 120, 'grass');
      addPlatform(700, 470, 220, 36, 'brick');
      addPlatform(1120, 390, 260, 36, 'brick');
      addPlatform(1650, 500, 220, 36, 'brick');
      addPlatform(2050, 430, 280, 36, 'brick');
      addPlatform(2750, 390, 190, 36, 'brick');
      addPlatform(3150, 500, 340, 36, 'brick');
      addPlatform(3750, 470, 650, 36, 'stone');
      addPlatform(4630, 430, 240, 36, 'brick');
      addPlatform(5160, 360, 260, 36, 'brick');
      addPlatform(5740, 500, 380, 36, 'brick');
      addPlatform(6550, 430, 450, 36, 'stone');
      addPlatform(7350, 500, 250, 36, 'brick');
      addPlatform(8050, 500, 420, 36, 'royal');
      addPlatform(8700, 560, 850, 160, 'castle');

const boxData = [
        [520, 430, 'coin'], [760, 410, 'coin'], [1240, 330, 'fire'], [1840, 440, 'coin'],
        [2180, 370, 'heart'], [2880, 330, 'coin'], [3310, 440, 'boots'], [4750, 370, 'coin'],
        [5290, 300, 'coin'], [5900, 440, 'heart'], [6710, 370, 'coin'], [7470, 440, 'armor']
      ];
      boxData.forEach(b => addBox(...b));

for (let x = 350; x < 7800; x += 210) addCoin(x, 520 - Math.sin(x*.01)*60);
      for (let x = 980; x < 7600; x += 560) addEnemy(x, 540, Math.random() < .25 ? 'brute' : 'koopa');
      for (let x = 2500; x < 7000; x += 900) addEnemy(x, 540, 'spike');
      for (let i = 0; i < 20; i++) clouds.push({ x: Math.random()*WORLD_W, y: 60+Math.random()*160, s: .7+Math.random()*1.6 });
    }

function damagePlayer(amount, sourceX) {
      if (player.inv > 0 || !player.alive) return;
      const final = player.hasArmor ? Math.max(1, amount - 1) : amount;
      player.hp -= final;
      player.inv = 1.2;
      player.vx = sourceX < player.x ? 500 : -500;
      player.vy = -500;
      shake = 18;
      flash = .16;
      noise(.12, .05);
      if (player.hp <= 0) {
        player.alive = false;
        gameState = 'dead';
        cinematicText = 'GAME OVER — BOWSER WON THIS ROUND';
        cinematicTimer = 999;
      }
    }

function hitEnemy(e, damage = 1) {
      if (!e.alive) return;
      e.hp -= damage;
      e.stun = .18;
      spawnParticles(e.x+e.w/2, e.y+e.h/2, '#ffe66d', 8);
      beep(180, .05, 'square', .025);
      if (e.hp <= 0) {
        e.alive = false;
        player.coins += e.type === 'brute' ? 5 : 2;
        spawnParticles(e.x+e.w/2, e.y+e.h/2, '#53ff81', 18);
      }
    }

function openShop() {
      const s = shops[0];
      const near = Math.abs((player.x+player.w/2) - (s.x+s.w/2)) < 170 && Math.abs(player.y - s.y) < 160;
      if (!near) return;
      s.open = !s.open;
      beep(740, .08, 'triangle', .025);
    }

function triggerBoss() {
      bowser.active = true;
      bowser.hp = bowser.maxHp;
      cinematicText = 'THE PEACH HAS BEEN EATEN. BOWSER AWAKENS.';
      cinematicTimer = 3.2;
      shake = 45;
      flash = .4;
      noise(.6, .08);
      for (let i = 0; i < 7; i++) seeds.push({ x: peach.x + i*18 - 30, y: peach.y, w: 18, h: 18, taken: false, vy: -500 - Math.random()*240, vx: -260 + Math.random()*520 });
    }

function updatePlayer(dt) {
      const left = keys.has('a') || keys.has('arrowleft');
      const right = keys.has('d') || keys.has('arrowright');
      const jump = keys.has('w') || keys.has(' ') || keys.has('arrowup');

if (left) { player.vx -= player.speed * dt; player.facing = -1; }
      if (right) { player.vx += player.speed * dt; player.facing = 1; }
      if (!left && !right && player.grounded) player.vx *= FRICTION;
      player.vx = Math.max(-390, Math.min(390, player.vx));

if (jump && player.grounded) {
        player.vy = -(player.hasBoots ? player.jump * 1.18 : player.jump);
        player.grounded = false;
        beep(420, .08, 'square', .022);
      }

player.vy += GRAVITY * dt;
      player.inv = Math.max(0, player.inv - dt);
      player.fireCooldown = Math.max(0, player.fireCooldown - dt);
      player.attackTimer = Math.max(0, player.attackTimer - dt);
      solidCollision(player, dt);
      player.x = Math.max(0, Math.min(WORLD_W - player.w, player.x));
      if (player.y > 980) damagePlayer(99, player.x);
      bonkBoxes();

for (const c of coins) {
        if (!c.taken && rects(player, c)) {
          c.taken = true;
          player.coins += 1;
          beep(1046, .05, 'square', .018);
          spawnParticles(c.x+12, c.y+12, '#ffe66d', 5, 150);
        }
      }

if (!peach.collected && rects(player, peach)) {
        peach.collected = true;
        player.atePeach = true;
        player.hp = player.maxHp;
        triggerBoss();
      }

for (const sd of seeds) {
        if (!sd.taken && rects(player, sd)) {
          sd.taken = true;
          player.seeds++;
          player.coins += 3;
          beep(1320, .06, 'triangle', .018);
        }
      }

for (const e of enemies) {
        if (!e.alive) continue;
        if (rects(player, e)) {
          if (player.vy > 220 && player.y + player.h - e.y < 24) {
            player.vy = -560;
            hitEnemy(e, 1);
          } else damagePlayer(e.type === 'brute' ? 2 : 1, e.x);
        }
      }
      if (bowser.active && rects(player, bowser)) damagePlayer(2, bowser.x);
    }

function updateEnemies(dt) {
      for (const e of enemies) {
        if (!e.alive) continue;
        e.stun = Math.max(0, e.stun - dt);
        if (e.stun <= 0) e.vy += GRAVITY * dt;
        const oldVx = e.vx;
        solidCollision(e, dt);
        if (e.vx === 0 && Math.abs(oldVx) > 0) e.vx = -oldVx;
        if (e.x < 0 || e.x > WORLD_W) e.vx *= -1;
      }
    }

function updateBowser(dt) {
      if (!bowser.active || bowser.defeated) return;
      bowser.timer += dt;
      bowser.roar = Math.max(0, bowser.roar - dt);
      bowser.stompCooldown -= dt;
      bowser.fireCooldown -= dt;

const dir = player.x < bowser.x ? -1 : 1;
      bowser.vx += dir * (bowser.phase === 3 ? 95 : 70) * dt;
      bowser.vx = Math.max(-210, Math.min(210, bowser.vx));
      bowser.vy += GRAVITY * dt;
      solidCollision(bowser, dt);
      bowser.vx *= .97;

if (bowser.stompCooldown <= 0 && bowser.grounded) {
        bowser.vy = -720;
        bowser.stompCooldown = bowser.phase === 3 ? 1.15 : 1.7;
        shake = 20;
      }

if (bowser.fireCooldown <= 0) {
        const count = bowser.phase;
        for (let i = 0; i < count; i++) {
          projectiles.push({ x: bowser.x + bowser.w/2, y: bowser.y + 56, w: 34, h: 26, vx: dir * (360 + i*80), vy: -230 - i*110, life: 3, type: 'bossFire' });
        }
        bowser.fireCooldown = bowser.phase === 3 ? .82 : 1.25;
        beep(65, .16, 'sawtooth', .06);
      }
    }

function updateParticles(dt) {
      for (const p of particles) {
        p.x += p.vx * dt; p.y += p.vy * dt; p.vy += 850 * dt; p.life -= dt;
      }
      for (let i = particles.length - 1; i >= 0; i--) if (particles[i].life <= 0) particles.splice(i, 1);
    }

function update(dt) {
      if (gameState !== 'play') return;
      dt *= slowMo;
      updatePlayer(dt);
      updateEnemies(dt);
      updateProjectiles(dt);
      updateSeeds(dt);
      updateBowser(dt);
      updateParticles(dt);
      playNormalMusic(dt);
      playBossMusic(dt);
      cinematicTimer = Math.max(0, cinematicTimer - dt);
      shake = Math.max(0, shake - 36*dt);
      flash = Math.max(0, flash - dt);
      for (const b of boxes) b.bump = Math.max(0, b.bump - dt);
      camera.x += ((player.x + player.w/2) - W/2 - camera.x) * Math.min(1, dt*5);
      if (bowser.active && player.x > 8500) camera.x += ((bowser.x + player.x)/2 - W/2 - camera.x) * Math.min(1, dt*2);
      camera.x = Math.max(0, Math.min(WORLD_W - W, camera.x));
    }

function px(x) { return Math.round(x - camera.x); }
    function py(y) { return Math.round(y - camera.y); }

function drawRect(x, y, w, h, fill, stroke = null) {
      ctx.fillStyle = fill;
      ctx.fillRect(px(x), py(y), w, h);
      if (stroke) { ctx.strokeStyle = stroke; ctx.lineWidth = 3; ctx.strokeRect(px(x), py(y), w, h); }
    }

function drawBackground() {
      const g = ctx.createLinearGradient(0, 0, 0, H);
      g.addColorStop(0, bowser.active ? '#38123f' : '#65cfff');
      g.addColorStop(.55, bowser.active ? '#a13f4e' : '#bdefff');
      g.addColorStop(1, bowser.active ? '#211123' : '#e8ffcf');
      ctx.fillStyle = g;
      ctx.fillRect(0, 0, W, H);

ctx.fillStyle = bowser.active ? 'rgba(255,90,40,.28)' : 'rgba(255,255,255,.9)';
      for (const c of clouds) {
        const x = (c.x * .35 - camera.x*.18) % (W+300) - 150;
        ctx.beginPath();
        ctx.arc(x, c.y, 28*c.s, 0, Math.PI*2);
        ctx.arc(x+32*c.s, c.y-12*c.s, 23*c.s, 0, Math.PI*2);
        ctx.arc(x+70*c.s, c.y, 30*c.s, 0, Math.PI*2);
        ctx.fill();
      }

for (let i = 0; i < 8; i++) {
        const mx = i * 520 - (camera.x * .08 % 520);
        ctx.fillStyle = bowser.active ? '#421833' : '#7bbd6d';
        ctx.beginPath();
        ctx.moveTo(mx - 120, 600);
        ctx.lineTo(mx + 180, 260 + i%3*38);
        ctx.lineTo(mx + 540, 600);
        ctx.fill();
      }
    }

function drawBoxes() {
      for (const b of boxes) {
        const by = b.y - Math.sin(b.bump * 20) * 12;
        drawRect(b.x, by, b.w, b.h, b.used ? '#7c5b38' : '#ffc83d', '#51330e');
        ctx.fillStyle = b.used ? '#3d2c21' : '#fff7a8';
        ctx.font = '900 30px system-ui';
        ctx.textAlign = 'center';
        ctx.fillText(b.used ? '·' : '?', px(b.x+24), py(by+34));
      }
    }

function drawCoins() {
      for (const c of coins) {
        if (c.taken) continue;
        const y = c.y + Math.sin(performance.now()/260 + c.bob) * 6;
        ctx.fillStyle = '#ffd94a';
        ctx.beginPath();
        ctx.ellipse(px(c.x+12), py(y+12), 10, 14, 0, 0, Math.PI*2);
        ctx.fill();
        ctx.strokeStyle = '#9e6800'; ctx.lineWidth = 3; ctx.stroke();
      }
    }

function drawProjectiles() {
      for (const p of projectiles) {
        ctx.fillStyle = p.type === 'bossFire' ? '#ff431f' : '#ffea4a';
        ctx.beginPath(); ctx.ellipse(px(p.x+p.w/2), py(p.y+p.h/2), p.w/2, p.h/2, 0, 0, Math.PI*2); ctx.fill();
        ctx.fillStyle = 'rgba(255,255,255,.65)';
        ctx.beginPath(); ctx.ellipse(px(p.x+p.w/2-5), py(p.y+p.h/2-3), p.w/5, p.h/5, 0, 0, Math.PI*2); ctx.fill();
      }
    }

function drawBowser() {
      if (!bowser.active && !bowser.defeated) return;
      const x = px(bowser.x), y = py(bowser.y + Math.sin(bowser.roar*40)*4);
      ctx.fillStyle = '#2f7d32';
      ctx.fillRect(x+20, y+52, 92, 82);
      ctx.fillStyle = '#b66a24';
      ctx.fillRect(x+10, y+20, 110, 58);
      ctx.fillStyle = '#f0d05a';
      ctx.fillRect(x+34, y+74, 62, 64);
      ctx.fillStyle = '#fff';
      for (let i = 0; i < 5; i++) { ctx.beginPath(); ctx.moveTo(x+24+i*18,y+50); ctx.lineTo(x+32+i*18,y+28); ctx.lineTo(x+40+i*18,y+50); ctx.fill(); }
      ctx.fillStyle = '#111';
      ctx.fillRect(x+35, y+38, 10, 8); ctx.fillRect(x+82, y+38, 10, 8);
      ctx.fillStyle = '#ff392a';
      ctx.fillRect(x+44, y+62, 44, 13);
      ctx.fillStyle = '#1c1c1c';
      ctx.fillRect(x+2, y+125, 42, 24); ctx.fillRect(x+86, y+125, 42, 24);
      ctx.strokeStyle = bowser.phase === 3 ? '#fffd7a' : '#ff6a3d';
      ctx.lineWidth = 5;
      ctx.strokeRect(x+18, y+18, 94, 118);
    }

function drawShop() {
      const s = shops[0];
      drawRect(s.x, s.y, s.w, s.h, '#7b4530', '#2a1411');
      drawRect(s.x+12, s.y+20, s.w-24, 35, '#ffe16b');
      ctx.fillStyle = '#2a1411'; ctx.font = '900 25px system-ui'; ctx.textAlign = 'center';
      ctx.fillText('SHOP', px(s.x+s.w/2), py(s.y+47));
      ctx.fillStyle = '#fff'; ctx.font = '700 16px system-ui';
      ctx.fillText('Press E', px(s.x+s.w/2), py(s.y+88));
      if (s.open) {
        const bx = px(s.x - 90), by = py(s.y - 175);
        ctx.fillStyle = 'rgba(7,10,25,.92)'; ctx.fillRect(bx, by, 350, 150);
        ctx.strokeStyle = '#fff06d'; ctx.lineWidth = 3; ctx.strokeRect(bx, by, 350, 150);
        ctx.fillStyle = '#fff'; ctx.font = '800 18px system-ui'; ctx.textAlign = 'left';
        ctx.fillText('SHOP: press 1-4 to buy', bx+18, by+28);
        ctx.font = '700 16px system-ui';
        ctx.fillText('1 Max Heart - 15 coins', bx+18, by+58);
        ctx.fillText('2 Fireballs - 25 coins', bx+18, by+86);
        ctx.fillText('3 Armor - 35 coins', bx+18, by+114);
        ctx.fillText('4 Jump Boots - 20 coins', bx+18, by+140);
      }
    }

function drawParticles() {
      for (const p of particles) {
        ctx.globalAlpha = Math.max(0, p.life);
        ctx.fillStyle = p.color;
        ctx.fillRect(px(p.x), py(p.y), p.size, p.size);
      }
      ctx.globalAlpha = 1;
    }

function drawHUD() {
      ctx.save();
      ctx.setTransform(1,0,0,1,0,0);
      ctx.fillStyle = 'rgba(5,8,22,.55)';
      ctx.fillRect(18, 18, 450, 88);
      ctx.strokeStyle = 'rgba(255,255,255,.25)'; ctx.lineWidth = 2; ctx.strokeRect(18, 18, 450, 88);
      ctx.font = '900 24px system-ui'; ctx.fillStyle = '#fff'; ctx.textAlign = 'left';
      ctx.fillText('SUPER TUCKER BROS DELUXE', 34, 48);
      ctx.font = '800 21px system-ui';
      ctx.fillStyle = '#ffdf55'; ctx.fillText('Coins: ' + player.coins, 34, 82);
      ctx.fillStyle = '#caff7b'; ctx.fillText('Seeds: ' + player.seeds + '/7', 160, 82);
      for (let i = 0; i < player.maxHp; i++) {
        ctx.fillStyle = i < player.hp ? '#ff3b5f' : '#4a1724';
        ctx.fillRect(300 + i*25, 65, 18, 18);
      }

const upgrades = [];
      if (player.hasFire) upgrades.push('Fire');
      if (player.hasArmor) upgrades.push('Armor');
      if (player.hasBoots) upgrades.push('Boots');
      ctx.fillStyle = '#fff'; ctx.font = '700 16px system-ui';
      ctx.fillText('Upgrades: ' + (upgrades.join(', ') || 'none'), 34, 103);

if (bowser.active) {
        ctx.fillStyle = 'rgba(0,0,0,.65)'; ctx.fillRect(300, 625, 680, 38);
        ctx.fillStyle = '#45111a'; ctx.fillRect(310, 636, 660, 16);
        ctx.fillStyle = bowser.phase === 3 ? '#ffef5a' : '#ff3d24';
        ctx.fillRect(310, 636, 660 * Math.max(0, bowser.hp / bowser.maxHp), 16);
        ctx.strokeStyle = '#fff'; ctx.strokeRect(310, 636, 660, 16);
        ctx.fillStyle = '#fff'; ctx.font = '900 24px system-ui'; ctx.textAlign = 'center';
        ctx.fillText('EVIL BOWSER — PHASE ' + bowser.phase, 640, 616);
      }

if (cinematicTimer > 0) {
        ctx.fillStyle = 'rgba(0,0,0,.45)'; ctx.fillRect(0, 130, W, 92);
        ctx.fillStyle = '#fff8b4'; ctx.font = '900 38px system-ui'; ctx.textAlign = 'center';
        ctx.fillText(cinematicText, W/2, 188);
      }

if (gameState === 'dead' || gameState === 'win') {
        ctx.fillStyle = 'rgba(0,0,0,.72)'; ctx.fillRect(0, 0, W, H);
        ctx.fillStyle = gameState === 'win' ? '#fff36a' : '#ff6174';
        ctx.font = '900 54px system-ui'; ctx.textAlign = 'center';
        ctx.fillText(cinematicText, W/2, H/2 - 30);
        ctx.fillStyle = '#fff'; ctx.font = '700 22px system-ui';
        ctx.fillText('Press R to restart', W/2, H/2 + 35);
      }
      ctx.restore();
    }

function loop(now) {
      const dt = Math.min(.033, (now - last) / 1000);
      last = now;
      update(dt);
      render();
      requestAnimationFrame(loop);
    }

window.addEventListener('keydown', e => {
      const k = e.key.toLowerCase();
      keys.add(k);
      if ([' ', 'arrowup', 'arrowdown', 'arrowleft', 'arrowright'].includes(k)) e.preventDefault();
      if (k === 'j' && gameState === 'play') attack();
      if (k === 'e' && gameState === 'play') openShop();
      if (shops[0].open) {
        if (k === '1') buy('heart');
        if (k === '2') buy('fire');
        if (k === '3') buy('armor');
        if (k === '4') buy('boots');
      }
      if (k === 'p' && gameState === 'play') slowMo = slowMo === 0 ? 1 : 0;
      if (k === 'r' && (gameState === 'dead' || gameState === 'win')) resetGame();
    });
    window.addEventListener('keyup', e => keys.delete(e.key.toLowerCase()));

startBtn.addEventListener('click', async () => {
      makeAudio();
      if (audio && audio.state === 'suspended') await audio.resume();
      menu.classList.add('hidden');
      overlay.classList.add('hidden');
      resetGame();
    });

initWorld();
    requestAnimationFrame(loop);
  })();
  </script>
</body>
</html>

CSS