Webleb - UI Elements - Pixel Duel: 2D Shooter, 3 Rounds, HTML5 Game

HTML CSS JS

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Pixel Duel Shooter (3 Rounds) - web-leb.com</title>
<style>
  :root { color-scheme: dark; }
  html, body { height: 100%; margin: 0; background:#070a10; }
  body { display:flex; align-items:center; justify-content:center; padding:14px; box-sizing:border-box;
         font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .card{
    width:min(1100px, 100%);
    background:#0b1220;
    border:1px solid #20304a;
    border-radius:14px;
    overflow:hidden;
    box-shadow: 0 18px 55px rgba(0,0,0,.45);
  }
  header{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between;
    padding:10px 12px;
    border-bottom:1px solid #20304a;
    background: rgba(255,255,255,.03);
  }
  .title{ font-weight:900; letter-spacing:.6px; }
  .hud{ display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
  .pill{
    font-size:12px;
    padding:6px 8px;
    border-radius:10px;
    border:1px solid #2a3f66;
    background: rgba(255,255,255,.03);
    white-space:nowrap;
  }
  main{ display:grid; grid-template-columns: 1fr 320px; }
  @media (max-width: 920px){ main{ grid-template-columns: 1fr; } }
  #stageWrap{ padding:12px; }
  canvas{
    width:100%;
    aspect-ratio: 16/9;
    display:block;
    border:1px solid #2a3f66;
    border-radius:12px;
    background:#05080f;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
  }
  aside{
    padding:12px 14px;
    border-left:1px solid #20304a;
    background: rgba(255,255,255,.02);
  }
  @media (max-width: 920px){ aside{ border-left:none; border-top:1px solid #20304a; } }
  .row{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
  button{
    cursor:pointer;
    border:1px solid #2a3f66;
    background: rgba(255,255,255,.04);
    color:#e8f0ff;
    padding:9px 10px;
    border-radius:10px;
    font-weight:900;
  }
  button:hover{ background: rgba(255,255,255,.06); }
  .hint{ font-size:12px; line-height:1.45; opacity:.92; }
  .kbd{ display:inline-block; padding:2px 6px; border:1px solid #2a3f66; border-radius:6px; background:rgba(255,255,255,.03); margin:0 2px; }
  .small{ font-size:11px; opacity:.75; margin-top:8px; }
  .ok{ color:#a7f3d0; }
  .warn{ color:#fde68a; }
</style>
</head>
<body>
<div class="card">
  <header>
    <div class="title">PIXEL DUEL SHOOTER — “AK-27” • Best of 3 Rounds</div>
    <div class="hud">
      <div class="pill">Round: <b id="uiRound">1</b>/3</div>
      <div class="pill">Countdown: <b id="uiCountdown">1.0</b>s</div>
      <div class="pill">Score Blue: <b id="uiBlueScore">0</b></div>
      <div class="pill">Score Red: <b id="uiRedScore">0</b></div>
      <div class="pill">Winner: <b id="uiWinner">—</b></div>
    </div>
  </header>

<aside>
      <div class="row">
        <button id="btnRestart">Restart Match (R)</button>
        <button id="btnSwapMap">New Map (M)</button>
        <button id="btnBot">Red: Human</button>
      </div>

<div class="hint">
        <b>Goal:</b> Win <span class="ok">2</span> out of <span class="ok">3</span> rounds by eliminating the other player.<br><br>

<b>Blue Player</b><br>
        Move: <span class="kbd">W</span><span class="kbd">A</span><span class="kbd">S</span><span class="kbd">D</span><br>
        Aim: mouse (move cursor) or keyboard aiming auto toward movement<br>
        Shoot: <span class="kbd">F</span><br>
        Reload: <span class="kbd">Shift</span><br><br>

<b>Red Player</b><br>
        Move: <span class="kbd">↑</span><span class="kbd">←</span><span class="kbd">↓</span><span class="kbd">→</span><br>
        Shoot: <span class="kbd">/</span> (slash)<br>
        Reload: <span class="kbd">Enter</span><br><br>

<b>Cover:</b> Hide behind walls. Bullets <span class="warn">stop</span> on walls.<br>
        <b>AK-27:</b> Fast fire rate + magazine + reload time (balanced).<br>
      </div>

<div class="small">
        Chromebook-friendly. Single HTML file. Pixel-art characters drawn in code (no external assets).
      </div>
    </aside>
  </main>
</div>

// ===== Canvas / World =====
  const canvas = document.getElementById("c");
  const ctx = canvas.getContext("2d", { alpha: false });

const W = canvas.width, H = canvas.height;
  const TILE = 8;

// ===== UI =====
  const ui = {
    round: document.getElementById("uiRound"),
    countdown: document.getElementById("uiCountdown"),
    blueScore: document.getElementById("uiBlueScore"),
    redScore: document.getElementById("uiRedScore"),
    winner: document.getElementById("uiWinner"),
    btnRestart: document.getElementById("btnRestart"),
    btnSwapMap: document.getElementById("btnSwapMap"),
    btnBot: document.getElementById("btnBot"),
  };

// ===== Helpers =====
  const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
  const rand = (min, max) => Math.random() * (max - min) + min;
  const irand = (min, max) => Math.floor(rand(min, max + 1));
  const hypot = Math.hypot;

function aabb(ax, ay, aw, ah, bx, by, bw, bh) {
    return ax < bx + bw && ax + aw > bx && ay < by + bh && ay + ah > by;
  }

// Line segment vs AABB (for bullet step)
  function segmentIntersectsAABB(x1, y1, x2, y2, r) {
    // Liang–Barsky style for axis-aligned box:
    const minX = r.x, maxX = r.x + r.w;
    const minY = r.y, maxY = r.y + r.h;
    let t0 = 0, t1 = 1;
    const dx = x2 - x1, dy = y2 - y1;

const p = [-dx, dx, -dy, dy];
    const q = [x1 - minX, maxX - x1, y1 - minY, maxY - y1];

for (let i = 0; i < 4; i++) {
      if (p[i] === 0) {
        if (q[i] < 0) return { hit: false };
      } else {
        const t = q[i] / p[i];
        if (p[i] < 0) {
          if (t > t1) return { hit: false };
          if (t > t0) t0 = t;
        } else {
          if (t < t0) return { hit: false };
          if (t < t1) t1 = t;
        }
      }
    }
    // Earliest intersection at t0
    const hx = x1 + dx * t0;
    const hy = y1 + dy * t0;
    return { hit: true, t: t0, x: hx, y: hy };
  }

// ===== Input =====
  const keys = new Set();
  let mouse = { x: W / 2, y: H / 2, inside: false };

window.addEventListener("keydown", (e) => {
    const k = e.key.toLowerCase();
    keys.add(k);
    // prevent page scroll on arrows/space
    if (["arrowup","arrowdown","arrowleft","arrowright"," "].includes(e.key)) e.preventDefault();
    if (k === "r") restartMatch();
    if (k === "m") newMapAndRound(true);
  }, { passive: false });

window.addEventListener("keyup", (e) => keys.delete(e.key.toLowerCase()));

canvas.addEventListener("mousemove", (e) => {
    const rect = canvas.getBoundingClientRect();
    const sx = (e.clientX - rect.left) / rect.width;
    const sy = (e.clientY - rect.top) / rect.height;
    mouse.x = clamp(sx * W, 0, W);
    mouse.y = clamp(sy * H, 0, H);
    mouse.inside = true;
  });

canvas.addEventListener("mouseleave", () => mouse.inside = false);

// ===== Game Rules =====
  const MATCH_ROUNDS = 3;
  const WIN_SCORE = 2;

const ROUND_START_COUNTDOWN = 1.0; // seconds lock before shooting
  const RESPAWN_LOCK = 0.6;

// "AK-27" tuning (arcade)
  const AK = {
    fireRate: 11.5,   // bullets per second
    bulletSpeed: 520, // px/s
    damage: 16,       // per bullet
    magSize: 24,
    reloadTime: 1.25, // seconds
    spread: 0.045,    // radians
    recoilKick: 0.0,  // visual only (kept low for school chromebooks)
  };

// Players (pixel dudes)
  const P = {
    w: 12, h: 14,
    speed: 140,     // px/s
    sprintSpeed: 175,
    hp: 100,
  };

// ===== State =====
  let lastT = performance.now();
  let gameOver = false;

let roundNum = 1;
  let blueScore = 0;
  let redScore = 0;

let countdown = ROUND_START_COUNTDOWN;

let redIsBot = false;

// Map
  let walls = []; // rects

// Bullets
  let bullets = []; // {x,y, vx,vy, owner:'blue'|'red', life, px,py}

function makePlayer(colorName) {
    const isBlue = colorName === "blue";
    return {
      id: colorName,
      name: isBlue ? "Blue" : "Red",
      x: isBlue ? 90 : W - 110,
      y: H / 2,
      w: P.w,
      h: P.h,
      vx: 0, vy: 0,
      hp: P.hp,
      alive: true,
      respawnLock: 0,
      // gun state
      mag: AK.magSize,
      reloading: 0,
      cooldown: 0,
      // aim angle
      aim: isBlue ? 0 : Math.PI,
      // slight movement aim fallback
      lastMoveAngle: isBlue ? 0 : Math.PI,
    };
  }

let blue = makePlayer("blue");
  let red = makePlayer("red");

// ===== Map generation (good cover, symmetrical-ish) =====
  function addWall(x, y, w, h) {
    walls.push({ x: Math.round(x), y: Math.round(y), w: Math.round(w), h: Math.round(h) });
  }

function buildMap() {
    walls = [];

// Border (thick)
    addWall(0, 0, W, TILE);
    addWall(0, H - TILE, W, TILE);
    addWall(0, 0, TILE, H);
    addWall(W - TILE, 0, TILE, H);

// Central cover blocks (symmetry)
    const midX = W / 2;
    const midY = H / 2;

addWall(midX - 18, midY - 70, 36, 24);
    addWall(midX - 18, midY + 46, 36, 24);

// Side bunkers
    addWall(160, 90, 26, 90);
    addWall(160, H - 180, 26, 90);
    addWall(W - 186, 90, 26, 90);
    addWall(W - 186, H - 180, 26, 90);

// Mid-side cover slabs
    addWall(260, midY - 14, 70, 28);
    addWall(W - 330, midY - 14, 70, 28);

// Random extra cover (mirrored pairs)
    const pairs = 4;
    for (let i = 0; i < pairs; i++) {
      const w = irand(36, 82);
      const h = irand(18, 46);
      const x = irand(210, (W / 2) - 140);
      const y = irand(60, H - 60 - h);
      addWall(x, y, w, h);
      addWall(W - x - w, y, w, h);
    }

// Ensure spawn zones are clear-ish (remove any that overlap spawn rectangles)
    const blueSpawn = { x: 40, y: midY - 70, w: 160, h: 140 };
    const redSpawn  = { x: W - 200, y: midY - 70, w: 160, h: 140 };
    walls = walls.filter(w => {
      const hitBlue = aabb(w.x,w.y,w.w,w.h, blueSpawn.x,blueSpawn.y,blueSpawn.w,blueSpawn.h);
      const hitRed  = aabb(w.x,w.y,w.w,w.h, redSpawn.x,redSpawn.y,redSpawn.w,redSpawn.h);
      // keep borders always
      const isBorder = (w.x===0 && w.y===0 && w.w===W && w.h===TILE) ||
                       (w.x===0 && w.y===H-TILE && w.w===W && w.h===TILE) ||
                       (w.x===0 && w.y===0 && w.w===TILE && w.h===H) ||
                       (w.x===W-TILE && w.y===0 && w.w===TILE && w.h===H);
      if (isBorder) return true;
      return !(hitBlue || hitRed);
    });
  }

// ===== Collisions for players vs walls (axis-separated) =====
  function collidePlayer(p) {
    // clamp in world
    p.x = clamp(p.x, TILE, W - TILE - p.w);
    p.y = clamp(p.y, TILE, H - TILE - p.h);

// resolve overlaps
    for (const w of walls) {
      if (aabb(p.x, p.y, p.w, p.h, w.x, w.y, w.w, w.h)) {
        const dx1 = (w.x + w.w) - p.x;
        const dx2 = (p.x + p.w) - w.x;
        const dy1 = (w.y + w.h) - p.y;
        const dy2 = (p.y + p.h) - w.y;
        const minX = Math.min(dx1, dx2);
        const minY = Math.min(dy1, dy2);
        if (minX < minY) p.x += (dx1 < dx2) ? dx1 : -dx2;
        else p.y += (dy1 < dy2) ? dy1 : -dy2;
      }
    }
  }

// ===== Shooting =====
  function playerCenter(p) {
    return { x: p.x + p.w / 2, y: p.y + p.h / 2 };
  }

function aimAngleFromTo(x1, y1, x2, y2) {
    return Math.atan2(y2 - y1, x2 - x1);
  }

function canShoot(p) {
    return p.alive && countdown <= 0 && p.reloading <= 0 && p.cooldown <= 0 && p.mag > 0 && !gameOver;
  }

function shoot(p, targetX, targetY) {
    if (!canShoot(p)) return;

const c = playerCenter(p);
    let ang = aimAngleFromTo(c.x, c.y, targetX, targetY);

// add slight spread
    ang += (Math.random() * 2 - 1) * AK.spread;

const vx = Math.cos(ang) * AK.bulletSpeed;
    const vy = Math.sin(ang) * AK.bulletSpeed;

bullets.push({
      x: c.x, y: c.y,
      px: c.x, py: c.y,
      vx, vy,
      owner: p.id,
      life: 1.4
    });

p.mag -= 1;
    p.cooldown = 1 / AK.fireRate;
    p.aim = ang;

// auto reload when empty
    if (p.mag <= 0) startReload(p);
  }

function startReload(p) {
    if (!p.alive || p.reloading > 0 || p.mag === AK.magSize) return;
    p.reloading = AK.reloadTime;
  }

// ===== Round logic =====
  function resetRoundPositions() {
    bullets = [];
    countdown = ROUND_START_COUNTDOWN;

blue = makePlayer("blue");
    red = makePlayer("red");

blue.x = 90; blue.y = H / 2;
    red.x = W - 110; red.y = H / 2;

// final collision pass in case
    collidePlayer(blue);
    collidePlayer(red);

ui.round.textContent = String(roundNum);
    ui.blueScore.textContent = String(blueScore);
    ui.redScore.textContent = String(redScore);
    ui.winner.textContent = gameOver ? ui.winner.textContent : "—";
  }

function newMapAndRound(keepRoundNumber=false) {
    buildMap();
    if (!keepRoundNumber) roundNum = 1;
    blueScore = 0;
    redScore = 0;
    gameOver = false;
    ui.winner.textContent = "—";
    resetRoundPositions();
  }

function restartMatch() {
    roundNum = 1;
    blueScore = 0;
    redScore = 0;
    gameOver = false;
    ui.winner.textContent = "—";
    resetRoundPositions();
  }

function endRound(winnerId) {
    if (gameOver) return;

if (winnerId === "blue") blueScore++;
    else redScore++;

ui.blueScore.textContent = String(blueScore);
    ui.redScore.textContent = String(redScore);

const someoneWonMatch = (blueScore >= WIN_SCORE || redScore >= WIN_SCORE || roundNum >= MATCH_ROUNDS);

if (someoneWonMatch) {
      gameOver = true;
      const winner = blueScore > redScore ? "Blue" : (redScore > blueScore ? "Red" : "Tie");
      ui.winner.textContent = winner;
      // Freeze inputs visually but keep rendering
      return;
    }

// next round
    roundNum++;
    ui.round.textContent = String(roundNum);
    // short pause: respawn lock
    countdown = ROUND_START_COUNTDOWN + RESPAWN_LOCK;
    resetRoundPositions();
  }

// ===== Bot (simple but effective) =====
  function botLogic(dt) {
    if (!redIsBot || gameOver) return;

const bot = red;
    const enemy = blue;

if (!bot.alive) return;

// pick a cover wall near bot, or move to angle where line-of-sight is blocked then peek
    const bc = playerCenter(bot);
    const ec = playerCenter(enemy);

// Determine if line-of-sight is blocked
    const losBlocked = isLineBlocked(bc.x, bc.y, ec.x, ec.y);

// Basic movement: if LOS open and bot is exposed, strafe to nearest wall; else peek & shoot.
    let ax = 0, ay = 0;

if (!losBlocked) {
      // move sideways relative to enemy to make harder target
      const ang = aimAngleFromTo(bc.x, bc.y, ec.x, ec.y);
      ax = Math.cos(ang + Math.PI/2);
      ay = Math.sin(ang + Math.PI/2);
      if (Math.random() < 0.02) { ax *= -1; ay *= -1; } // occasional flip
    } else {
      // try to approach while staying behind cover
      const ang = aimAngleFromTo(bc.x, bc.y, ec.x, ec.y);
      ax = Math.cos(ang);
      ay = Math.sin(ang);
    }

// avoid hugging borders too much
    if (bot.x < 40) ax += 0.8;
    if (bot.x > W - 60) ax -= 0.8;
    if (bot.y < 40) ay += 0.8;
    if (bot.y > H - 60) ay -= 0.8;

// normalize
    const m = hypot(ax, ay) || 1;
    ax /= m; ay /= m;

// move
    const s = P.speed * 0.92;
    bot.x += ax * s * dt;
    bot.y += ay * s * dt;
    collidePlayer(bot);

// shooting decision
    // shoot when countdown finished and enemy is in reasonable range and LOS is open
    const dist = hypot(ec.x - bc.x, ec.y - bc.y);
    const wantsShoot = countdown <= 0 && dist < 520 && !isLineBlocked(bc.x, bc.y, ec.x, ec.y);

if (wantsShoot) {
      // small reaction delay
      if (Math.random() < 0.86) {
        // add bot imperfection
        const jitter = 10;
        shoot(bot, ec.x + rand(-jitter, jitter), ec.y + rand(-jitter, jitter));
      }
    } else {
      // opportunistic reload
      if (bot.mag < 8 && bot.reloading <= 0) startReload(bot);
    }
  }

function isLineBlocked(x1, y1, x2, y2) {
    for (const w of walls) {
      // skip border thick lines? no, keep it
      const hit = segmentIntersectsAABB(x1, y1, x2, y2, w);
      if (hit.hit) return true;
    }
    return false;
  }

// ===== Update loop =====
  function updatePlayer(p, dt, controls) {
    if (!p.alive) return;

// timers
    p.cooldown = Math.max(0, p.cooldown - dt);
    if (p.reloading > 0) {
      p.reloading -= dt;
      if (p.reloading <= 0) {
        p.reloading = 0;
        p.mag = AK.magSize;
      }
    }

// movement
    let ax = 0, ay = 0;

if (controls.up()) ay -= 1;
    if (controls.down()) ay += 1;
    if (controls.left()) ax -= 1;
    if (controls.right()) ax += 1;

let speed = P.speed;

// small sprint for Blue only? keep fair: both can sprint via "c" and "."
    if (controls.sprint()) speed = P.sprintSpeed;

const mag = hypot(ax, ay);
    if (mag > 0) { ax /= mag; ay /= mag; }

p.vx = ax * speed;
    p.vy = ay * speed;

// remember last movement direction for aiming fallback
    if (mag > 0.2) p.lastMoveAngle = Math.atan2(ay, ax);

// axis step collision
    p.x += p.vx * dt;
    collidePlayer(p);
    p.y += p.vy * dt;
    collidePlayer(p);

// aim
    const c = playerCenter(p);
    if (p.id === "blue" && mouse.inside) {
      p.aim = aimAngleFromTo(c.x, c.y, mouse.x, mouse.y);
    } else {
      // aim in last movement direction, or toward enemy if firing
      p.aim = p.lastMoveAngle;
    }

// actions
    if (controls.reload()) startReload(p);

if (controls.fire()) {
      // target: for blue use mouse if inside, else shoot forward; red shoots toward blue center
      if (p.id === "blue") {
        const tx = mouse.inside ? mouse.x : (c.x + Math.cos(p.aim) * 50);
        const ty = mouse.inside ? mouse.y : (c.y + Math.sin(p.aim) * 50);
        shoot(p, tx, ty);
      } else {
        const ec = playerCenter(blue);
        shoot(p, ec.x, ec.y);
      }
    }
  }

function updateBullets(dt) {
    const aliveBullets = [];
    for (const b of bullets) {
      b.life -= dt;
      if (b.life <= 0) continue;

b.px = b.x; b.py = b.y;
      b.x += b.vx * dt;
      b.y += b.vy * dt;

// out of bounds quick cull
      if (b.x < -20 || b.x > W + 20 || b.y < -20 || b.y > H + 20) continue;

// wall collision: stop
      let hitWall = false;
      for (const w of walls) {
        const hit = segmentIntersectsAABB(b.px, b.py, b.x, b.y, w);
        if (hit.hit) { hitWall = true; break; }
      }
      if (hitWall) continue;

// player collision
      const target = (b.owner === "blue") ? red : blue;
      if (target.alive && aabb(b.x - 2, b.y - 2, 4, 4, target.x, target.y, target.w, target.h)) {
        target.hp -= AK.damage;
        if (target.hp <= 0) {
          target.hp = 0;
          target.alive = false;
          // round ends immediately
          endRound(b.owner);
        }
        continue;
      }

aliveBullets.push(b);
    }
    bullets = aliveBullets;
  }

// ===== Render (pixel style) =====
  function drawFloor() {
    for (let y = 0; y < H; y += TILE) {
      for (let x = 0; x < W; x += TILE) {
        const v = ((x / TILE + y / TILE) & 1);
        ctx.fillStyle = v ? "#070d18" : "#060a12";
        ctx.fillRect(x, y, TILE, TILE);
      }
    }
  }

function drawWalls() {
    for (const w of walls) {
      // fill
      ctx.fillStyle = "#13243b";
      ctx.fillRect(w.x, w.y, w.w, w.h);
      // highlight edges (pixel vibe)
      ctx.fillStyle = "rgba(255,255,255,.07)";
      ctx.fillRect(w.x, w.y, w.w, 1);
      ctx.fillRect(w.x, w.y, 1, w.h);
      // shadow edge
      ctx.fillStyle = "rgba(0,0,0,.25)";
      ctx.fillRect(w.x, w.y + w.h - 1, w.w, 1);
      ctx.fillRect(w.x + w.w - 1, w.y, 1, w.h);
    }
  }

function drawBullet(b) {
    ctx.fillStyle = (b.owner === "blue") ? "#a5d8ff" : "#ffb4c3";
    ctx.fillRect(Math.round(b.x) - 1, Math.round(b.y) - 1, 3, 3);
  }

function drawGun(p) {
    // simple AK pixel rifle: barrel points to aim angle
    const c = playerCenter(p);
    const ang = p.aim;
    const len = 14;
    const bx = c.x + Math.cos(ang) * 6;
    const by = c.y + Math.sin(ang) * 6;
    const ex = c.x + Math.cos(ang) * len;
    const ey = c.y + Math.sin(ang) * len;

// pixel line as rectangles
    ctx.fillStyle = "#0a0f18";
    ctx.fillRect(Math.round(bx) - 1, Math.round(by) - 1, 3, 3);
    ctx.fillStyle = "#111a2a";
    ctx.fillRect(Math.round((bx + ex) / 2) - 1, Math.round((by + ey) / 2) - 1, 3, 3);
    ctx.fillStyle = "#1c2a40";
    ctx.fillRect(Math.round(ex) - 1, Math.round(ey) - 1, 3, 3);
  }

function drawPixelDude(p) {
    const x = Math.round(p.x), y = Math.round(p.y);

const body = (p.id === "blue") ? "#3aa0ff" : "#ff4d6d";
    const outline = "#0b1220";
    const face = "rgba(255,255,255,.35)";
    const dead = !p.alive;

// outline
    ctx.fillStyle = outline;
    ctx.fillRect(x - 1, y - 1, p.w + 2, p.h + 2);

// body
    ctx.fillStyle = dead ? "rgba(255,255,255,.08)" : body;
    ctx.fillRect(x, y, p.w, p.h);

// head highlight
    ctx.fillStyle = dead ? "rgba(255,255,255,.10)" : face;
    ctx.fillRect(x + 2, y + 2, 3, 2);

// legs
    ctx.fillStyle = "rgba(0,0,0,.35)";
    ctx.fillRect(x + 2, y + p.h - 3, 2, 3);
    ctx.fillRect(x + p.w - 4, y + p.h - 3, 2, 3);

// HP bar
    const hpw = Math.round((p.hp / P.hp) * (p.w + 2));
    ctx.fillStyle = "rgba(0,0,0,.35)";
    ctx.fillRect(x - 1, y + p.h + 2, p.w + 2, 3);
    ctx.fillStyle = (p.id === "blue") ? "#93c5fd" : "#fda4af";
    ctx.fillRect(x - 1, y + p.h + 2, hpw, 3);

// ammo / reload bar
    if (p.reloading > 0) {
      const rw = Math.round(((AK.reloadTime - p.reloading) / AK.reloadTime) * (p.w + 2));
      ctx.fillStyle = "#fbbf24";
      ctx.fillRect(x - 1, y + p.h + 6, rw, 2);
    } else {
      const aw = Math.round((p.mag / AK.magSize) * (p.w + 2));
      ctx.fillStyle = "#34d399";
      ctx.fillRect(x - 1, y + p.h + 6, aw, 2);
    }

// gun
    if (p.alive) drawGun(p);
  }

function drawTopHUD() {
    // in-canvas pixel HUD
    ctx.fillStyle = "rgba(0,0,0,.45)";
    ctx.fillRect(8, 8, 340, 38);

ctx.fillStyle = "#e8f0ff";
    ctx.font = "12px ui-monospace, monospace";
    ctx.textBaseline = "top";

// countdown center
    if (!gameOver && countdown > 0) {
      ctx.fillStyle = "rgba(0,0,0,.55)";
      ctx.fillRect(W/2 - 70, 10, 140, 30);
      ctx.fillStyle = "#fde68a";
      ctx.textAlign = "center";
      ctx.fillText(`START IN ${countdown.toFixed(1)}s`, W/2, 18);
      ctx.textAlign = "left";
    }

// match winner
    if (gameOver) {
      ctx.fillStyle = "rgba(0,0,0,.65)";
      ctx.fillRect(W/2 - 140, H/2 - 28, 280, 56);
      ctx.fillStyle = "#a7f3d0";
      ctx.textAlign = "center";
      ctx.font = "18px ui-monospace, monospace";
      ctx.fillText(`MATCH WINNER: ${ui.winner.textContent}`, W/2, H/2 - 6);
      ctx.font = "12px ui-monospace, monospace";
      ctx.fillStyle = "#e8f0ff";
      ctx.fillText(`Press R to restart`, W/2, H/2 + 14);
      ctx.textAlign = "left";
      ctx.font = "12px ui-monospace, monospace";
    }
  }

// ===== Controls mapping =====
  const controlsBlue = {
    up: () => keys.has("w"),
    down: () => keys.has("s"),
    left: () => keys.has("a"),
    right: () => keys.has("d"),
    fire: () => keys.has("f"),
    reload: () => keys.has("shift"),
    sprint: () => keys.has("c"),
  };

const controlsRed = {
    up: () => keys.has("arrowup"),
    down: () => keys.has("arrowdown"),
    left: () => keys.has("arrowleft"),
    right: () => keys.has("arrowright"),
    fire: () => keys.has("/"),
    reload: () => keys.has("enter"),
    sprint: () => keys.has("."),
  };

// ===== Buttons =====
  ui.btnRestart.addEventListener("click", restartMatch);
  ui.btnSwapMap.addEventListener("click", () => newMapAndRound(true));
  ui.btnBot.addEventListener("click", () => {
    redIsBot = !redIsBot;
    ui.btnBot.textContent = redIsBot ? "Red: AI" : "Red: Human";
  });

// ===== Initialize =====
  buildMap();
  resetRoundPositions();
  ui.countdown.textContent = countdown.toFixed(1);

// ===== Main Loop =====
  function tick(now) {
    const dt = Math.min(0.033, (now - lastT) / 1000);
    lastT = now;

// countdown
    if (!gameOver) {
      countdown = Math.max(0, countdown - dt);
      ui.countdown.textContent = countdown.toFixed(1);
    }

// update players
    updatePlayer(blue, dt, controlsBlue);
    if (!redIsBot) updatePlayer(red, dt, controlsRed);
    botLogic(dt);

// auto reload if user holds fire with empty mag
    if (blue.alive && countdown <= 0 && blue.mag <= 0 && blue.reloading <= 0) startReload(blue);
    if (red.alive && countdown <= 0 && red.mag <= 0 && red.reloading <= 0) startReload(red);

// update bullets
    updateBullets(dt);

// fallback round end (if both die somehow)
    if (!gameOver && countdown <= 0 && !blue.alive && !red.alive) {
      // rare; call tie round -> count for nobody and move next (keeps match fair)
      if (roundNum < MATCH_ROUNDS) { roundNum++; resetRoundPositions(); }
      else { gameOver = true; ui.winner.textContent = "Tie"; }
    }

// render
    ctx.clearRect(0, 0, W, H);
    drawFloor();
    drawWalls();

for (const b of bullets) drawBullet(b);

drawPixelDude(blue);
    drawPixelDude(red);

drawTopHUD();

requestAnimationFrame(tick);
  }

requestAnimationFrame(tick);
})();
</script>
</body>
</html>

Preview

Open Advanced Editor