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>Pixel Tag (TAG2-style)</title>
<style>
  :root { color-scheme: dark; }
  html, body { height:100%; margin:0; background:#070a0f; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
  .wrap { height:100%; display:flex; align-items:center; justify-content:center; padding:14px; box-sizing:border-box; }
  .card { width:min(980px,100%); background:#0b1220; border:1px solid #1c2a40; border-radius:14px; overflow:hidden; }
  header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:10px 12px; border-bottom:1px solid #1c2a40; background:rgba(255,255,255,.03); }
  .title { font-weight:800; letter-spacing:.5px; }
  .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 #223556; background:rgba(255,255,255,.03); }
  main { display:grid; grid-template-columns: 1fr 270px; }
  @media (max-width: 860px){ main { grid-template-columns:1fr; } }
  #gameWrap { padding:12px; }
  canvas {
    width:100%;
    aspect-ratio: 16/9;
    display:block;
    border:1px solid #223556;
    border-radius:12px;
    background:#05080f;
    /* CRITICAL: pixel look */
    image-rendering: pixelated;
    image-rendering: crisp-edges;
  }
  aside { padding:12px; border-left:1px solid #1c2a40; background:rgba(255,255,255,.02); }
  @media (max-width: 860px){ aside { border-left:none; border-top:1px solid #1c2a40; } }
  button {
    cursor:pointer; border:1px solid #2a3f66; background:rgba(255,255,255,.04);
    color:#e8f0ff; padding:9px 10px; border-radius:10px; font-weight:800;
  }
  button:hover { background:rgba(255,255,255,.06); }
  .row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
  .hint { font-size:12px; line-height:1.4; opacity:.9; }
  .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; }
</style>
</head>
<body>
<div class="wrap">
  <div class="card">
    <header>
      <div class="title">PIXEL TAG (TAG2-style)</div>
      <div class="hud">
        <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: <b id="blueWins">0</b></div>
        <div class="pill">Red: <b id="redWins">0</b></div>
      </div>
    </header>

<main>
      <div id="gameWrap"><canvas id="c" width="640" height="360"></canvas></div>
      <aside>
        <div class="row">
          <button id="btnRestart">Restart (R)</button>
          <button id="btnBot">Player 2: Human</button>
        </div>

<div class="hint">
          <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/><br/>
          <b>Goal:</b> IT tags the other before time runs out.<br/>
          ⚡ boost = faster • ❄ trap = slow/freeze
        </div>
        <div class="small">Single-file HTML. Chromebook friendly. Pixel-art characters drawn in code.</div>
      </aside>
    </main>
  </div>
</div>

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

// Pixel scale: we render in canvas native 640x360 (nice for Chromebook),
  // and CSS scales it up with image-rendering: pixelated
  const W = canvas.width, H = canvas.height;

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"),
    btnBot: document.getElementById("btnBot"),
  };

// ===== Game tuning (TAG2-ish feel) =====
  const ROUND_TIME = 45.0;
  const TILE = 8;                     // pixel tile size
  const PLAYER_W = 10, PLAYER_H = 12; // pixel "sprite" size
  const SPEED = 90;                   // px/s (low-res coords)
  const IT_BONUS = 16;
  const BOOST_BONUS = 28;
  const BOOST_TIME = 2.0;
  const FREEZE_TIME = 1.2;

const TAG_DIST = 10; // pixels
  const NUM_WALLS = 11;

const keys = new Set();
  let last = performance.now();
  let timeLeft = ROUND_TIME;
  let round = 1;
  let blueWins = 0;
  let redWins = 0;
  let paused = false;
  let redIsBot = false;

const blue = { name:"Blue", x: 90, y: 180, w:PLAYER_W, h:PLAYER_H, vx:0, vy:0, isIt:false, boostT:0, freezeT:0 };
  const red  = { name:"Red",  x: 540, y: 180, w:PLAYER_W, h:PLAYER_H, vx:0, vy:0, isIt:true,  boostT:0, freezeT:0 };

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

function clamp(v,a,b){ return Math.max(a, Math.min(b,v)); }
  function rand(min,max){ return Math.random()*(max-min)+min; }

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

function collideWalls(p){
    // classic axis separation
    for(const w of walls){
      if(aabb(p.x,p.y,p.w,p.h, w.x,w.y,w.w,w.h)){
        // push out minimal
        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;
        }
      }
    }
  }

function speedOf(p){
    let s = SPEED + (p.isIt ? IT_BONUS : 0);
    if(p.boostT > 0) s += BOOST_BONUS;
    if(p.freezeT > 0) s *= 0.2;
    return s;
  }

function control(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;

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

const s = speedOf(p);
    const nx = p.x + ax*s*dt;
    const ny = p.y + ay*s*dt;

// move X then collide, then Y then collide (pixel movement feel)
    p.x = nx;
    p.x = clamp(p.x, 0, W - p.w);
    collideWalls(p);

p.y = ny;
    p.y = clamp(p.y, 0, H - p.h);
    collideWalls(p);
  }

function bot(pBot, pOther, dt){
    // simple chase/evade
    const it = blue.isIt ? blue : red;
    let tx, ty;

if(pBot.isIt){
      tx = pOther.x; ty = pOther.y;
    } else {
      // run away from IT
      tx = pBot.x + (pBot.x - it.x);
      ty = pBot.y + (pBot.y - it.y);

// sometimes grab 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 < 160) { tx = best.pu.x; ty = best.pu.y; }
    }

let ax = tx - pBot.x;
    let ay = ty - pBot.y;
    const m = Math.hypot(ax, ay) || 1;
    ax/=m; ay/=m;

const s = speedOf(pBot);
    pBot.x += ax*s*dt;
    pBot.x = clamp(pBot.x, 0, W - pBot.w);
    collideWalls(pBot);

pBot.y += ay*s*dt;
    pBot.y = clamp(pBot.y, 0, H - pBot.h);
    collideWalls(pBot);
  }

function spawnWalls(){
    walls = [];
    for(let i=0;i<NUM_WALLS;i++){
      const horizontal = Math.random()<0.5;
      const len = Math.floor(rand(10, 26)) * TILE;
      const thick = 3 * TILE;
      const w = horizontal ? len : thick;
      const h = horizontal ? thick : len;

// keep away from spawns
      for(let t=0;t<60;t++){
        const x = Math.floor(rand(4, (W - w - 4))) ;
        const y = Math.floor(rand(4, (H - h - 4))) ;
        const bSpawn = { x: 40, y: 130, w: 120, h: 100 };
        const rSpawn = { x: W-160, y: 130, w: 120, h: 100 };
        const rect = {x,y,w,h};

const overlap = (A,B)=>aabb(A.x,A.y,A.w,A.h, B.x,B.y,B.w,B.h);
        if(!overlap(rect,bSpawn) && !overlap(rect,rSpawn)){
          walls.push(rect);
          break;
        }
      }
    }

// border walls (optional vibe)
    walls.push({x:0,y:0,w:W,h:TILE});
    walls.push({x:0,y:H-TILE,w:W,h:TILE});
    walls.push({x:0,y:0,w:TILE,h:H});
    walls.push({x:W-TILE,y:0,w:TILE,h:H});
  }

function resetPlayers(){
    blue.x = 90; blue.y = 180; blue.boostT=0; blue.freezeT=0;
    red.x  = 540; red.y  = 180; red.boostT=0;  red.freezeT=0;
  }

function newRound(swap=false){
    timeLeft = ROUND_TIME;
    paused = false;
    spawnWalls();
    pickups = [
      spawnPickup("boost"),
      spawnPickup("boost"),
      spawnPickup("trap"),
      spawnPickup("trap"),
    ];
    resetPlayers();
    if(swap){
      blue.isIt = !blue.isIt;
      red.isIt = !red.isIt;
    }
    ui.roundNum.textContent = String(round);
    ui.itName.textContent = blue.isIt ? "Blue" : "Red";
  }

function endRound(winner){
    paused = true;
    if(winner==="Blue") blueWins++;
    if(winner==="Red") redWins++;
    ui.blueWins.textContent = String(blueWins);
    ui.redWins.textContent = String(redWins);
    round++;
    setTimeout(()=>newRound(true), 800);
  }

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

// ===== Pixel-art drawing (built-in sprites) =====
  // We draw a tiny "pixel character" using rectangles: head, body, legs, outline.
  function drawPixelDude(p, colorBody, colorOutline){
    const x = Math.round(p.x), y = Math.round(p.y);

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

// body fill
    ctx.fillStyle = colorBody;
    ctx.fillRect(x, y, p.w, p.h);

// face/head highlight
    ctx.fillStyle = "rgba(255,255,255,.35)";
    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);

// "IT" crown pixel
    if(p.isIt){
      ctx.fillStyle = "#fbbf24";
      ctx.fillRect(x+3, y-4, 4, 2);
      ctx.fillRect(x+4, y-6, 2, 2);
    }

// status bar (boost/freeze)
    if(p.boostT>0){
      ctx.fillStyle = "#34d399";
      const w = Math.ceil((p.boostT/BOOST_TIME) * (p.w+2));
      ctx.fillRect(x-1, y+p.h+2, w, 2);
    } else if(p.freezeT>0){
      ctx.fillStyle = "#93c5fd";
      const w = Math.ceil((p.freezeT/FREEZE_TIME) * (p.w+2));
      ctx.fillRect(x-1, y+p.h+2, w, 2);
    }
  }

function drawWalls(){
    for(const w of walls){
      ctx.fillStyle = "#13233a";
      ctx.fillRect(w.x, w.y, w.w, w.h);
      // pixel edge
      ctx.fillStyle = "rgba(255,255,255,.08)";
      ctx.fillRect(w.x, w.y, w.w, 1);
      ctx.fillRect(w.x, w.y, 1, w.h);
    }
  }

function drawTopText(){
    // tiny in-canvas pixel HUD, TAG2 vibe
    ctx.fillStyle = "rgba(0,0,0,.35)";
    ctx.fillRect(8, 8, 170, 26);

ctx.fillStyle = "#e8f0ff";
    ctx.font = "12px ui-monospace, monospace";
    ctx.textBaseline = "top";
    const it = blue.isIt ? "BLUE" : "RED";
    ctx.fillText(`IT:${it}  T:${timeLeft.toFixed(1)}`, 14, 14);
  }

function drawPause(){
    if(!paused) return;
    ctx.fillStyle = "rgba(0,0,0,.45)";
    ctx.fillRect(0,0,W,H);
    ctx.fillStyle = "#e8f0ff";
    ctx.font = "20px ui-monospace, monospace";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText("ROUND OVER", W/2, H/2 - 6);
    ctx.font = "12px ui-monospace, monospace";
    ctx.fillText("NEXT ROUND…", W/2, H/2 + 16);
    ctx.textAlign = "left";
  }

// ===== Input =====
  window.addEventListener("keydown", (e)=>{
    const k = e.key.toLowerCase();
    keys.add(k);
    if(["arrowup","arrowdown","arrowleft","arrowright"," "].includes(e.key)) e.preventDefault();
    if(k==="r") newRound(false);
  }, {passive:false});
  window.addEventListener("keyup", (e)=> keys.delete(e.key.toLowerCase()));

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

// ===== Start =====
  newRound(false);

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

if(!paused){
      timeLeft -= dt;
      if(timeLeft <= 0){
        // time out -> NOT IT wins
        endRound(blue.isIt ? "Red" : "Blue");
      }

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);

control(blue, "w","a","s","d", dt);
      if(redIsBot) bot(red, blue, dt);
      else control(red, "arrowup","arrowleft","arrowdown","arrowright", dt);

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

// tag check
      const it = blue.isIt ? blue : red;
      const notIt = blue.isIt ? red : blue;
      const ci = center(it), cn = center(notIt);
      if(Math.hypot(ci.x - cn.x, ci.y - cn.y) <= TAG_DIST){
        endRound(it.name);
      }

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

// render
    ctx.clearRect(0,0,W,H);
    drawTiles();
    drawWalls();
    for(const pu of pickups) drawPickup(pu);

drawPixelDude(blue, "#3aa0ff", "#0b1220");
    drawPixelDude(red,  "#ff4d6d", "#0b1220");

drawTopText();
    drawPause();

requestAnimationFrame(tick);
  }
  requestAnimationFrame(tick);

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

Preview

Open Advanced Editor