Pixel Duel: Shooter 2D de 3 rondas en HTML5

17 kavinvirsingh1983mms

Abrir en el editor Video Publica tu código

Pixel Duel: Shooter 2D de 3 rondas en HTML5

Recomendado

16 June 2025

Un código de Mete

11 March 2024

Plantilla HTML CSS para sitio web de portafolio

10 January 2026

Botón CSS Glassmorphism con animación de brillo

HTML

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

Recomendado

Un código de Mete

Plantilla HTML CSS para sitio web de portafolio

Botón CSS Glassmorphism con animación de brillo

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS