Webleb - UI Elements

HTML CSS JS

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Tag2-Style Tag Game (Chromebook)</title>
  <style>
    :root { color-scheme: dark; }
    html, body { height: 100%; margin: 0; background:#0b0f14; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
    .wrap { height: 100%; display:flex; align-items:center; justify-content:center; padding: 14px; box-sizing: border-box; }
    .card {
      width: min(980px, 100%);
      background: #0f1621;
      border: 1px solid #1e2a3a;
      border-radius: 14px;
      box-shadow: 0 12px 40px rgba(0,0,0,.35);
      overflow:hidden;
    }
    header {
      display:flex; gap:12px; align-items:center; justify-content:space-between;
      padding: 12px 14px;
      border-bottom: 1px solid #1e2a3a;
      background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0));
    }
    .title { font-weight: 700; letter-spacing: .2px; }
    .meta { display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end; }
    .pill {
      font-size: 13px;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid #27364b;
      background: rgba(255,255,255,.03);
      white-space: nowrap;
    }
    .pill b { font-weight: 800; }
    main { display:grid; grid-template-columns: 1fr 280px; gap: 0; }
    @media (max-width: 860px) { main { grid-template-columns: 1fr; } }
    #gameWrap { padding: 12px; }
    canvas {
      width: 100%;
      aspect-ratio: 16/9;
      background: radial-gradient(1200px 600px at 50% 50%, #0f1a2a 0%, #0a0f16 55%, #070a0f 100%);
      border: 1px solid #223248;
      border-radius: 12px;
      display:block;
      image-rendering: crisp-edges;
    }
    aside {
      padding: 12px 14px;
      border-left: 1px solid #1e2a3a;
      background: rgba(255,255,255,.02);
    }
    @media (max-width: 860px) { aside { border-left: none; border-top: 1px solid #1e2a3a; } }
    .row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom: 10px; }
    button {
      cursor:pointer;
      border: 1px solid #2c3f58;
      background: rgba(255,255,255,.04);
      color: #e8f0ff;
      padding: 9px 12px;
      border-radius: 10px;
      font-weight: 650;
    }
    button:hover { background: rgba(255,255,255,.06); }
    .hint { opacity:.85; font-size: 13px; line-height: 1.35; }
    .kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; padding: 2px 6px; border:1px solid #2a3b52; border-radius: 6px; background: rgba(255,255,255,.03); }
    .legend { margin-top: 10px; }
    .legItem { display:flex; gap:10px; align-items:center; margin: 8px 0; }
    .dot { width: 12px; height:12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); }
    .dot.blue { background:#3aa0ff; }
    .dot.red { background:#ff4d6d; }
    .dot.green { background:#34d399; }
    .dot.yellow { background:#fbbf24; }
    .small { font-size: 12px; opacity:.8; }
  </style>
</head>
<body>
<div class="wrap">
  <div class="card">
    <header>
      <div class="title">TAG2-Style: Local 2-Player Tag</div>
      <div class="meta">
        <div class="pill">Round: <b id="roundNum">1</b></div>
        <div class="pill">Time: <b id="timeLeft">45.0</b>s</div>
        <div class="pill">It: <b id="itName">Red</b></div>
        <div class="pill">Blue Wins: <b id="blueWins">0</b></div>
        <div class="pill">Red Wins: <b id="redWins">0</b></div>
      </div>
    </header>

<aside>
        <div class="row">
          <button id="btnRestart">Restart Round (R)</button>
          <button id="btnToggleBots" title="Optional: let Player 2 be AI">Player 2: Human</button>
        </div>

<div class="hint">
          <div><b>Goal:</b> The player who is <b>“It”</b> must tag the other before time runs out.</div>
          <div style="margin-top:8px;">
            <b>Controls</b><br/>
            Blue: <span class="kbd">W</span><span class="kbd">A</span><span class="kbd">S</span><span class="kbd">D</span><br/>
            Red: <span class="kbd">↑</span><span class="kbd">←</span><span class="kbd">↓</span><span class="kbd">→</span><br/>
            Restart: <span class="kbd">R</span>
          </div>
        </div>

<div class="legend">
          <div class="legItem"><span class="dot blue"></span> Blue player</div>
          <div class="legItem"><span class="dot red"></span> Red player</div>
          <div class="legItem"><span class="dot green"></span> Speed boost</div>
          <div class="legItem"><span class="dot yellow"></span> Freeze trap</div>
          <div class="small">Tip: Boosts/traps respawn. Walls are random each round.</div>
        </div>
      </aside>
    </main>
  </div>
</div>

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

// UI
  const ui = {
    roundNum: document.getElementById("roundNum"),
    timeLeft: document.getElementById("timeLeft"),
    itName: document.getElementById("itName"),
    blueWins: document.getElementById("blueWins"),
    redWins: document.getElementById("redWins"),
    btnRestart: document.getElementById("btnRestart"),
    btnToggleBots: document.getElementById("btnToggleBots"),
  };

// ===== Game constants =====
  const WORLD = { w: 1280, h: 720 };
  const ROUND_TIME = 45.0;
  const PLAYER_R = 18;
  const TAG_DISTANCE = PLAYER_R * 1.6;

const BASE_SPEED = 250;      // px/s
  const IT_SPEED_BONUS = 45;   // px/s
  const BOOST_SPEED = 120;     // px/s extra
  const BOOST_TIME = 2.0;      // seconds
  const FREEZE_TIME = 1.4;     // seconds

const NUM_WALLS = 10;
  const WALL_MIN = 90;
  const WALL_MAX = 260;
  const WALL_THICK = 22;

const PICKUP_R = 14;
  const NUM_BOOSTS = 2;
  const NUM_TRAPS = 2;

// ===== State =====
  let keys = new Set();
  let lastT = performance.now();
  let round = 1;
  let blueWins = 0;
  let redWins = 0;
  let timeLeft = ROUND_TIME;
  let paused = false;

let redIsBot = false;

// Simple AABB collision with circle
  function circleRectCollide(cx, cy, r, rect) {
    const closestX = clamp(cx, rect.x, rect.x + rect.w);
    const closestY = clamp(cy, rect.y, rect.y + rect.h);
    const dx = cx - closestX, dy = cy - closestY;
    return (dx*dx + dy*dy) <= r*r;
  }

function resolveCircleRect(player, rect) {
    // Push the circle out of the rect along the smallest penetration axis
    const px = player.x, py = player.y, r = player.r;
    const rx = rect.x, ry = rect.y, rw = rect.w, rh = rect.h;

const closestX = clamp(px, rx, rx + rw);
    const closestY = clamp(py, ry, ry + rh);
    const dx = px - closestX;
    const dy = py - closestY;

const d2 = dx*dx + dy*dy;
    if (d2 > r*r || d2 === 0) return;

const d = Math.sqrt(d2);
    const overlap = r - d;

const nx = dx / d, ny = dy / d;
    player.x += nx * overlap;
    player.y += ny * overlap;
  }

// ===== Entities =====
  const blue = {
    name: "Blue",
    x: 220, y: 360, r: PLAYER_R,
    color: "#3aa0ff",
    vx: 0, vy: 0,
    isIt: false,
    boostT: 0,
    freezeT: 0,
  };

const red = {
    name: "Red",
    x: 1060, y: 360, r: PLAYER_R,
    color: "#ff4d6d",
    vx: 0, vy: 0,
    isIt: true,
    boostT: 0,
    freezeT: 0,
  };

let walls = [];
  let pickups = []; // {type:'boost'|'trap', x,y, alive, respawnT}

// ===== Round generation =====
  function makeWall() {
    const horizontal = Math.random() < 0.5;
    const len = rand(WALL_MIN, WALL_MAX);
    const w = horizontal ? len : WALL_THICK;
    const h = horizontal ? WALL_THICK : len;

// keep out of spawn zones
    for (let tries = 0; tries < 50; tries++) {
      const x = rand(80, WORLD.w - 80 - w);
      const y = rand(80, WORLD.h - 80 - h);
      const rect = { x, y, w, h };

// avoid spawn areas
      const bSpawn = { x: 120, y: 260, w: 260, h: 200 };
      const rSpawn = { x: WORLD.w - 380, y: 260, w: 260, h: 200 };

const overlap = (A, B) =>
        A.x < B.x + B.w && A.x + A.w > B.x && A.y < B.y + B.h && A.y + A.h > B.y;

if (!overlap(rect, bSpawn) && !overlap(rect, rSpawn)) return rect;
    }
    return { x: 540, y: 120, w: WALL_THICK, h: 220 }; // fallback
  }

function resetPlayers() {
    blue.x = 220; blue.y = 360; blue.vx = 0; blue.vy = 0; blue.boostT = 0; blue.freezeT = 0;
    red.x = 1060; red.y = 360; red.vx = 0; red.vy = 0; red.boostT = 0; red.freezeT = 0;
  }

function newRound(swapIt = false) {
    timeLeft = ROUND_TIME;
    paused = false;

walls = [];
    for (let i = 0; i < NUM_WALLS; i++) walls.push(makeWall());

pickups = [];
    for (let i = 0; i < NUM_BOOSTS; i++) pickups.push(spawnPickup("boost"));
    for (let i = 0; i < NUM_TRAPS; i++) pickups.push(spawnPickup("trap"));

resetPlayers();

if (swapIt) {
      blue.isIt = !blue.isIt;
      red.isIt = !red.isIt;
    }

ui.roundNum.textContent = String(round);
    ui.itName.textContent = blue.isIt ? "Blue" : "Red";
  }

// start: red is it
  blue.isIt = false;
  red.isIt = true;
  newRound(false);

// ===== Input =====
  window.addEventListener("keydown", (e) => {
    const k = e.key;
    if (["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"," "].includes(k)) e.preventDefault();
    keys.add(k.toLowerCase());
    if (k.toLowerCase() === "r") newRound(false);
  }, { passive: false });

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

// Buttons
  ui.btnRestart.addEventListener("click", () => newRound(false));
  ui.btnToggleBots.addEventListener("click", () => {
    redIsBot = !redIsBot;
    ui.btnToggleBots.textContent = redIsBot ? "Player 2: AI" : "Player 2: Human";
  });

// ===== Movement helpers =====
  function getSpeed(p) {
    let s = BASE_SPEED + (p.isIt ? IT_SPEED_BONUS : 0);
    if (p.boostT > 0) s += BOOST_SPEED;
    if (p.freezeT > 0) s *= 0.15;
    return s;
  }

function applyControls(p, up, left, down, right, dt) {
    let ax = 0, ay = 0;
    if (keys.has(up)) ay -= 1;
    if (keys.has(down)) ay += 1;
    if (keys.has(left)) ax -= 1;
    if (keys.has(right)) ax += 1;

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

const s = getSpeed(p);
    p.vx = ax * s;
    p.vy = ay * s;

p.x += p.vx * dt;
    p.y += p.vy * dt;

// bounds
    p.x = clamp(p.x, p.r, WORLD.w - p.r);
    p.y = clamp(p.y, p.r, WORLD.h - p.r);

// walls
    for (const w of walls) resolveCircleRect(p, w);
  }

function botControl(pBot, pOther, dt) {
    // Simple chase/evade:
    // If bot is IT -> chase
    // Else -> evade and seek boosts
    let target = { x: pOther.x, y: pOther.y };

if (!pBot.isIt) {
      // evade: move away from "it"
      const it = pOther.isIt ? pOther : (blue.isIt ? blue : red);
      const awayX = pBot.x + (pBot.x - it.x);
      const awayY = pBot.y + (pBot.y - it.y);
      target = { x: awayX, y: awayY };

// small chance to go for boost
      let best = null;
      for (const pu of pickups) {
        if (pu.alive && pu.type === "boost") {
          const d = Math.hypot(pu.x - pBot.x, pu.y - pBot.y);
          if (!best || d < best.d) best = { d, pu };
        }
      }
      if (best && best.d < 520) target = { x: best.pu.x, y: best.pu.y };
    }

// steer toward target
    let ax = target.x - pBot.x;
    let ay = target.y - pBot.y;
    const mag = Math.hypot(ax, ay) || 1;
    ax /= mag; ay /= mag;

const s = getSpeed(pBot);
    pBot.vx = ax * s;
    pBot.vy = ay * s;

// tentative move
    const ox = pBot.x, oy = pBot.y;
    pBot.x += pBot.vx * dt;
    pBot.y += pBot.vy * dt;

// bounds
    pBot.x = clamp(pBot.x, pBot.r, WORLD.w - pBot.r);
    pBot.y = clamp(pBot.y, pBot.r, WORLD.h - pBot.r);

// wall resolve
    for (const w of walls) resolveCircleRect(pBot, w);

// if stuck, random jiggle
    if (Math.hypot(pBot.x - ox, pBot.y - oy) < 0.5) {
      pBot.x += rand(-20, 20);
      pBot.y += rand(-20, 20);
    }
  }

// ===== Game logic =====
  function handlePickups(p, dt) {
    for (const pu of pickups) {
      if (pu.alive) {
        if (Math.hypot(pu.x - p.x, pu.y - p.y) <= p.r + PICKUP_R) {
          pu.alive = false;
          pu.respawnT = 3.0 + Math.random() * 3.0;

if (pu.type === "boost") {
            p.boostT = BOOST_TIME;
          } else if (pu.type === "trap") {
            // trap freezes whoever touches it
            p.freezeT = FREEZE_TIME;
          }
        }
      } else {
        pu.respawnT -= dt;
        if (pu.respawnT <= 0) {
          // respawn somewhere new
          const fresh = spawnPickup(pu.type);
          pu.x = fresh.x; pu.y = fresh.y; pu.alive = true; pu.respawnT = 0;
        }
      }
    }
  }

function swapIt() {
    blue.isIt = !blue.isIt;
    red.isIt = !red.isIt;
    ui.itName.textContent = blue.isIt ? "Blue" : "Red";
  }

function endRound(winnerName) {
    paused = true;

if (winnerName === "Blue") blueWins++;
    if (winnerName === "Red") redWins++;

ui.blueWins.textContent = String(blueWins);
    ui.redWins.textContent = String(redWins);

// next round: swap who is it
    round++;
    setTimeout(() => {
      newRound(true);
    }, 900);
  }

// ===== Rendering =====
  function drawGrid() {
    ctx.save();
    ctx.globalAlpha = 0.18;
    ctx.strokeStyle = "#1b2a3a";
    ctx.lineWidth = 1;
    const step = 48;
    for (let x = 0; x <= WORLD.w; x += step) {
      ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, WORLD.h); ctx.stroke();
    }
    for (let y = 0; y <= WORLD.h; y += step) {
      ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(WORLD.w, y); ctx.stroke();
    }
    ctx.restore();
  }

function drawWalls() {
    ctx.save();
    ctx.fillStyle = "#162233";
    ctx.strokeStyle = "#2b3f58";
    ctx.lineWidth = 2;
    for (const w of walls) {
      ctx.fillRect(w.x, w.y, w.w, w.h);
      ctx.strokeRect(w.x, w.y, w.w, w.h);
    }
    ctx.restore();
  }

function drawPickup(pu) {
    if (!pu.alive) return;
    ctx.save();
    if (pu.type === "boost") {
      ctx.fillStyle = "#34d399";
      ctx.strokeStyle = "rgba(255,255,255,.35)";
    } else {
      ctx.fillStyle = "#fbbf24";
      ctx.strokeStyle = "rgba(255,255,255,.35)";
    }
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.arc(pu.x, pu.y, PICKUP_R, 0, Math.PI * 2);
    ctx.fill();
    ctx.stroke();

// icon
    ctx.globalAlpha = 0.9;
    ctx.fillStyle = "#0b0f14";
    ctx.font = "bold 16px system-ui";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText(pu.type === "boost" ? "⚡" : "❄", pu.x, pu.y + 1);
    ctx.restore();
  }

function drawPlayer(p) {
    ctx.save();
    // glow if IT
    if (p.isIt) {
      ctx.globalAlpha = 0.25;
      ctx.fillStyle = p.color;
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.r + 18, 0, Math.PI * 2);
      ctx.fill();
    }

// body
    ctx.globalAlpha = 1;
    ctx.fillStyle = p.color;
    ctx.strokeStyle = "rgba(255,255,255,.35)";
    ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2);
    ctx.fill();
    ctx.stroke();

// status ring
    if (p.boostT > 0) {
      ctx.strokeStyle = "#34d399";
      ctx.lineWidth = 4;
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.r + 6, -Math.PI/2, -Math.PI/2 + (Math.PI*2) * (p.boostT/BOOST_TIME));
      ctx.stroke();
    } else if (p.freezeT > 0) {
      ctx.strokeStyle = "#fbbf24";
      ctx.lineWidth = 4;
      ctx.beginPath();
      ctx.arc(p.x, p.y, p.r + 6, -Math.PI/2, -Math.PI/2 + (Math.PI*2) * (p.freezeT/FREEZE_TIME));
      ctx.stroke();
    }

// label
    ctx.fillStyle = "rgba(255,255,255,.9)";
    ctx.font = "700 14px system-ui";
    ctx.textAlign = "center";
    ctx.textBaseline = "bottom";
    ctx.fillText(p.name + (p.isIt ? " (IT)" : ""), p.x, p.y - p.r - 6);

ctx.restore();
  }

function drawHUD() {
    // center text on pause/end
    if (!paused) return;
    ctx.save();
    ctx.fillStyle = "rgba(0,0,0,.35)";
    ctx.fillRect(0, 0, WORLD.w, WORLD.h);

ctx.fillStyle = "#e8f0ff";
    ctx.font = "800 44px system-ui";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText("Round Over!", WORLD.w/2, WORLD.h/2 - 20);

ctx.font = "650 16px system-ui";
    ctx.globalAlpha = 0.9;
    ctx.fillText("Next round starting…", WORLD.w/2, WORLD.h/2 + 26);
    ctx.restore();
  }

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

if (!paused) {
      timeLeft -= dt;
      if (timeLeft <= 0) {
        // If time ends, the NOT-IT player wins
        const winner = blue.isIt ? "Red" : "Blue";
        endRound(winner);
      }

// decrement timers
      blue.boostT = Math.max(0, blue.boostT - dt);
      red.boostT = Math.max(0, red.boostT - dt);
      blue.freezeT = Math.max(0, blue.freezeT - dt);
      red.freezeT = Math.max(0, red.freezeT - dt);

// movement
      applyControls(blue, "w", "a", "s", "d", dt);
      if (redIsBot) botControl(red, blue, dt);
      else applyControls(red, "arrowup", "arrowleft", "arrowdown", "arrowright", dt);

// pickups
      handlePickups(blue, dt);
      handlePickups(red, dt);

// tag check
      const it = blue.isIt ? blue : red;
      const notIt = blue.isIt ? red : blue;

if (dist(it, notIt) <= TAG_DISTANCE) {
        // IT tagged the other -> IT wins
        endRound(it.name);
      }

ui.timeLeft.textContent = timeLeft.toFixed(1);
      ui.itName.textContent = blue.isIt ? "Blue" : "Red";
    }

// render
    ctx.clearRect(0, 0, WORLD.w, WORLD.h);
    drawGrid();
    drawWalls();

for (const pu of pickups) drawPickup(pu);

drawPlayer(blue);
    drawPlayer(red);
    drawHUD();

requestAnimationFrame(tick);
  }

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

Preview

Open Advanced Editor