Webleb - Extraits de Code - Code du jeu HTML5 Super Tucker Bros Deluxe

HTML CSS JS

<!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>

Preview

Open Advanced Editor Full Screen