SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/arcade/games/car.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
<title>Grand Theft Auto • BUS RUN</title>
<meta name="theme-color" content="#070b16" />
<style>
  :root{
    --bg:#070b16;
    --panel:rgba(255,255,255,.06);
    --edge:rgba(255,255,255,.14);
    --txt:rgba(234,242,255,.92);
    --mut:rgba(169,182,217,.78);
    --ok:#44d18a;
    --warn:#ffcc4d;
    --bad:#ff4f6d;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; overflow:hidden;
    font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
    color:var(--txt);
    background: radial-gradient(1000px 700px at 50% 10%, #0b1230, #070b16 58%, #04060d 100%);
  }
  canvas{position:fixed; inset:0; width:100%; height:100%; display:block}
  .hud{
    position:fixed; left:12px; top:12px;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
    border:1px solid var(--edge);
    border-radius:16px;
    padding:10px 12px;
    box-shadow:0 22px 70px rgba(0,0,0,.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    user-select:none;
    max-width:min(860px, calc(100vw - 24px));
    font-size:13px;
    line-height:1.35;
  }
  .row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
  .pill{
    display:inline-flex; align-items:center; gap:8px;
    border:1px solid var(--edge);
    background: rgba(0,0,0,.18);
    padding:6px 10px;
    border-radius:999px;
    white-space:nowrap;
  }
  .kbd{
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    font-size:12px;
    padding:2px 6px;
    border-radius:8px;
    border:1px solid var(--edge);
    background: rgba(255,255,255,.06);
  }
  .btn{
    cursor:pointer;
    border:1px solid var(--edge);
    background: rgba(255,255,255,.06);
    color:var(--txt);
    padding:6px 10px;
    border-radius:12px;
    font-weight:800;
  }
  .btn:active{transform:translateY(1px)}
  .bar{
    width:160px; height:8px;
    border-radius:999px;
    border:1px solid var(--edge);
    background: rgba(255,255,255,.06);
    overflow:hidden;
  }
  .bar > i{display:block; height:100%; width:0%}
  .mut{color:var(--mut)}
  .right{margin-left:auto}
  .touch{
    position:fixed; right:12px; bottom:12px;
    display:flex; gap:10px; align-items:flex-end;
    pointer-events:none;
  }
  .pad{
    width:138px; height:138px;
    border-radius:22px;
    border:1px solid var(--edge);
    background: rgba(255,255,255,.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:0 22px 70px rgba(0,0,0,.55);
    pointer-events:auto;
    touch-action:none;
    position:relative;
  }
  .stick{
    position:absolute; left:50%; top:50%;
    width:64px; height:64px;
    transform:translate(-50%,-50%);
    border-radius:18px;
    border:1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
  }
  .btn2{
    width:110px; height:64px;
    border-radius:18px;
    border:1px solid var(--edge);
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:0 22px 70px rgba(0,0,0,.55);
    pointer-events:auto;
    touch-action:none;
    display:grid; place-items:center;
    font-weight:900;
  }
  .btn2:active{transform:translateY(1px)}
</style>
</head>
<body>
<canvas id="c"></canvas>

<div class="hud">
  <div class="row">
    <div class="pill"><strong>BUS RUN</strong> <span class="mut">• city chaos • avoid cops • pick up fares</span></div>
    <div class="pill">
      <span class="mut">Drive</span> <span class="kbd">WASD</span>/<span class="kbd">Arrows</span>
      <span class="mut">• Handbrake</span> <span class="kbd">Space</span>
      <span class="mut">• Honk</span> <span class="kbd">H</span>
    </div>
    <button class="btn right" id="reset">Reset</button>
  </div>
  <div class="row" style="margin-top:10px">
    <div class="pill">Speed <b id="spd">0</b></div>
    <div class="pill">Heat <span class="bar"><i id="heatBar"></i></span> <span id="heatTxt" class="mut">0%</span></div>
    <div class="pill">Cash $<b id="cash">0</b></ом>
    <div class="pill">Fares <b id="fares">0</b></div>
    <div class="pill mut" id="msg">Pick up glowing passengers. Don’t hit cars. Cops chase you when Heat rises.</div>
  </div>
</div>

<div class="touch" aria-hidden="true">
  <div class="pad" id="pad">
    <div class="stick" id="stick"></div>
  </div>
  <div style="display:flex; flex-direction:column; gap:10px">
    <div class="btn2" id="brake">BRAKE</div>
    <div class="btn2" id="honk">HONK</div>
  </div>
</div>

const uiSpd = document.getElementById('spd');
  const uiHeatBar = document.getElementById('heatBar');
  const uiHeatTxt = document.getElementById('heatTxt');
  const uiCash = document.getElementById('cash');
  const uiFares = document.getElementById('fares');
  const uiMsg = document.getElementById('msg');
  document.getElementById('reset').onclick = () => reset(true);

// Fix stray HTML entity in older copy
  const cashPill = uiCash.parentElement?.parentElement;
  if (cashPill && cashPill.textContent.includes('></ом>')) {
    // no-op; safety
  }

let W=0,H=0,DPR=1;
  function resize(){
    DPR = Math.max(1, Math.min(2, devicePixelRatio || 1));
    W = innerWidth; H = innerHeight;
    canvas.width = Math.floor(W*DPR);
    canvas.height = Math.floor(H*DPR);
    ctx.setTransform(DPR,0,0,DPR,0,0);
  }
  addEventListener('resize', resize, {passive:true});
  resize();

const clamp=(v,a,b)=>v<a?a:v>b?b:v;
  const rand=(a,b)=>a+Math.random()*(b-a);

// World
  const world = {
    laneW: 120,
    roadW: 520,
    blocks: 240,
    camX: 0,
    camY: 0,
  };

// Player bus
  const bus = {
    x: 0, y: 0,
    vx: 0, vy: 0,
    a: 0, // angle
    w: 62, h: 120,
    health: 1,
  };

// Heat / cops
  let heat = 0;        // 0..1
  let cash = 0;
  let fares = 0;
  let gameOver = false;

const cops = [];
  const cars = [];
  const peds = [];

// Input
  const keys = new Set();
  addEventListener('keydown', (e)=>{
    const k = (e.key||'').toLowerCase();
    keys.add(k);
    if (e.code === 'Space') e.preventDefault();
  }, {passive:false});
  addEventListener('keyup', (e)=> keys.delete((e.key||'').toLowerCase()), {passive:true});

// Touch joystick
  const pad = document.getElementById('pad');
  const stick = document.getElementById('stick');
  const brakeBtn = document.getElementById('brake');
  const honkBtn = document.getElementById('honk');

pad.addEventListener('pointerdown', (e)=>{
    joy.active = true;
    pad.setPointerCapture(e.pointerId);
  }, {passive:true});
  pad.addEventListener('pointermove', (e)=>{
    if(!joy.active) return;
    const r = pad.getBoundingClientRect();
    const cx = r.left + r.width/2;
    const cy = r.top + r.height/2;
    const dx = (e.clientX - cx) / (r.width/2);
    const dy = (e.clientY - cy) / (r.height/2);
    setStick(dx,dy);
  }, {passive:true});
  pad.addEventListener('pointerup', ()=>{
    joy.active = false;
    setStick(0,0);
  }, {passive:true});
  pad.addEventListener('pointercancel', ()=>{
    joy.active = false;
    setStick(0,0);
  }, {passive:true});

function rectHit(a,b){
    // simple circle approximation
    const ar = Math.max(a.w,a.h)*0.5;
    const br = Math.max(b.w,b.h)*0.5;
    const d = Math.hypot(a.x-b.x, a.y-b.y);
    return d < (ar+br)*0.72;
  }

function spawnCar(){
    const side = Math.random()<0.5 ? -1 : 1;
    const x = bus.x + side*rand(220, 420);
    const y = bus.y + rand(-520, 520);
    cars.push({x,y,vx: rand(-30,30), vy: rand(-60,60), w:46, h:86, t:0});
    if(cars.length>24) cars.shift();
  }

function spawnPed(){
    const x = bus.x + rand(-460, 460);
    const y = bus.y + rand(-460, 460);
    peds.push({x,y,r:10, picked:false, glow:1});
    if(peds.length>10) peds.shift();
  }

function reset(showMsg){
    bus.x=0; bus.y=0; bus.vx=0; bus.vy=0; bus.a=0; bus.health=1;
    world.camX=0; world.camY=0;
    heat=0; cash=0; fares=0; gameOver=false;
    cops.length=0; cars.length=0; peds.length=0;
    for(let i=0;i<10;i++) spawnCar();
    for(let i=0;i<4;i++) spawnPed();
    if(showMsg) uiMsg.textContent = 'Pick up glowing passengers. Avoid crashes. Heat rises with chaos; cops chase you.';
  }
  reset(false);

// ---------- Update ----------
  function update(dt){
    // input blending (keyboard + joystick)
    const up = keys.has('w')||keys.has('arrowup');
    const dn = keys.has('s')||keys.has('arrowdown');
    const lf = keys.has('a')||keys.has('arrowleft');
    const rt = keys.has('d')||keys.has('arrowright');
    const kbX = (rt?1:0) - (lf?1:0);
    const kbY = (dn?1:0) - (up?1:0);
    const steerX = clamp(kbX + joy.dx, -1, 1);
    const throttle = clamp((-kbY) + (-joy.dy), -1, 1); // up is forward
    const brake = handbrake || keys.has(' ');

if(keys.has('h')) honk();

// bus physics
    const maxSpeed = 420;
    const accel = 520;
    const turnRate = 2.6;

const speed = Math.hypot(bus.vx,bus.vy);
    const fwdX = Math.cos(bus.a);
    const fwdY = Math.sin(bus.a);

// steering stronger at speed
    bus.a += steerX * turnRate * dt * clamp(speed/160, 0.25, 1);

// acceleration along facing
    bus.vx += fwdX * accel * throttle * dt;
    bus.vy += fwdY * accel * throttle * dt;

// drag
    const drag = brake ? 0.76 : 0.90;
    bus.vx *= Math.pow(drag, dt*10);
    bus.vy *= Math.pow(drag, dt*10);

// clamp speed
    const ns = Math.hypot(bus.vx,bus.vy);
    if(ns > maxSpeed){
      const k = maxSpeed/ns;
      bus.vx*=k; bus.vy*=k;
    }

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

// camera follow
    world.camX += (bus.x - world.camX) * Math.min(1, dt*3.5);
    world.camY += (bus.y - world.camY) * Math.min(1, dt*3.5);

// spawn rhythm
    update._t = (update._t||0) + dt;
    if(update._t>0.55){ update._t=0; if(Math.random()<0.7) spawnCar(); if(Math.random()<0.35) spawnPed(); }

// traffic update + collisions
    let crash = false;
    for(const c of cars){
      c.t += dt;
      c.x += c.vx*dt;
      c.y += c.vy*dt;

// wander
      c.vx += Math.sin(c.t*1.7)*8*dt;
      c.vy += Math.cos(c.t*1.3)*8*dt;

// keep near bus (recycle far cars)
      const d = Math.hypot(c.x-bus.x, c.y-bus.y);
      if(d > 1400){
        const ang = rand(0,Math.PI*2);
        c.x = bus.x + Math.cos(ang)*rand(600,900);
        c.y = bus.y + Math.sin(ang)*rand(600,900);
        c.vx = rand(-60,60); c.vy = rand(-60,60);
      }

if(rectHit(bus,c)){
        crash = true;
        // bounce
        const dx = bus.x-c.x, dy = bus.y-c.y;
        const dd = Math.hypot(dx,dy)+1e-6;
        bus.vx += (dx/dd)*220;
        bus.vy += (dy/dd)*220;
        c.vx -= (dx/dd)*160;
        c.vy -= (dy/dd)*160;
      }
    }

if(crash){
      heat = clamp(heat + 0.08, 0, 1);
      bus.health = clamp(bus.health - 0.06, 0, 1);
    }

// passengers
    for(const p of peds){
      p.glow = 0.6 + 0.4*Math.sin(performance.now()*0.004 + p.x*0.01);
      if(!p.picked){
        const d = Math.hypot(p.x-bus.x, p.y-bus.y);
        if(d < 70){
          p.picked = true;
          fares++;
          const pay = 25 + Math.floor((Math.hypot(bus.vx,bus.vy)/12));
          cash += pay;
          heat = clamp(heat + 0.02, 0, 1); // attention from chaos
        }
      } else {
        // respawn elsewhere
        const d = Math.hypot(p.x-bus.x, p.y-bus.y);
        if(d > 900){
          p.picked = false;
        }
        if(p.picked){
          p.x = bus.x + rand(-520,520);
          p.y = bus.y + rand(-520,520);
          p.picked = false;
        }
      }
    }

// heat decays when slow and not crashing
    const calm = clamp(1 - (Math.hypot(bus.vx,bus.vy)/360), 0, 1);
    heat = clamp(heat - (0.012*calm + 0.004)*dt, 0, 1);

// cops
    ensureCops();
    for(const cop of cops){
      const dx = bus.x - cop.x, dy = bus.y - cop.y;
      const d = Math.hypot(dx,dy)+1e-6;

// pursuit strength based on heat
      const seek = 240 + heat*380;
      cop.vx += (dx/d)*seek*dt;
      cop.vy += (dy/d)*seek*dt;

// drag
      cop.vx *= Math.pow(0.88, dt*10);
      cop.vy *= Math.pow(0.88, dt*10);

// move
      cop.x += cop.vx*dt;
      cop.y += cop.vy*dt;

// bump player increases heat
      if(rectHit(bus,cop)){
        heat = clamp(heat + 0.12, 0, 1);
        bus.health = clamp(bus.health - 0.10, 0, 1);
        // kick
        bus.vx += rand(-160,160);
        bus.vy += rand(-160,160);
      }
    }

// honk pulse
    honkPulse = Math.max(0, honkPulse - dt);

if(bus.health <= 0){
      gameOver = true;
      uiMsg.textContent = 'BUS WRECKED. Reset.';
    }

// HUD
    const sp = Math.round(Math.hypot(bus.vx,bus.vy));
    uiSpd.textContent = String(sp);

const hp = Math.round(heat*100);
    uiHeatTxt.textContent = hp + '%';
    uiHeatBar.style.width = hp + '%';
    uiHeatBar.style.background =
      hp < 50 ? 'rgba(68,209,138,.85)' :
      hp < 80 ? 'rgba(255,204,77,.88)' :
                'rgba(255,79,109,.92)';

uiCash.textContent = String(cash);
    uiFares.textContent = String(fares);
  }

// ---------- Render ----------
  function draw(){
    ctx.fillStyle = '#050615';
    ctx.fillRect(0,0,W,H);

const cx = W/2, cy = H/2;

// City grid roads
    const scale = 1;
    const step = 220;
    const ox = -((world.camX/step)|0)*step + (cx - (world.camX%step));
    const oy = -((world.camY/step)|0)*step + (cy - (world.camY%step));

// asphalt
    ctx.fillStyle = 'rgba(255,255,255,.03)';
    for(let y=oy-2*step; y<H+2*step; y+=step){
      ctx.fillRect(0, y-20, W, 40);
    }
    for(let x=ox-2*step; x<W+2*step; x+=step){
      ctx.fillRect(x-20, 0, 40, H);
    }

// lane dashes
    ctx.strokeStyle = 'rgba(255,255,255,.08)';
    ctx.lineWidth = 2;
    ctx.setLineDash([16,14]);
    for(let y=oy-2*step; y<H+2*step; y+=step){
      ctx.beginPath();
      ctx.moveTo(0, y);
      ctx.lineTo(W, y);
      ctx.stroke();
    }
    for(let x=ox-2*step; x<W+2*step; x+=step){
      ctx.beginPath();
      ctx.moveTo(x, 0);
      ctx.lineTo(x, H);
      ctx.stroke();
    }
    ctx.setLineDash([]);

// Entities draw helper
    function toScreen(x,y){
      return { x: cx + (x - world.camX), y: cy + (y - world.camY) };
    }

// Passengers
    for(const p of peds){
      const s = toScreen(p.x,p.y);
      ctx.fillStyle = `rgba(106,224,255,${0.10 + p.glow*0.20})`;
      ctx.beginPath();
      ctx.arc(s.x, s.y, 20, 0, Math.PI*2);
      ctx.fill();
      ctx.fillStyle = 'rgba(234,242,255,.85)';
      ctx.beginPath();
      ctx.arc(s.x, s.y, 8, 0, Math.PI*2);
      ctx.fill();
    }

// Cars
    for(const c of cars){
      const s = toScreen(c.x,c.y);
      ctx.save();
      ctx.translate(s.x, s.y);
      ctx.rotate(Math.atan2(c.vy,c.vx));
      ctx.fillStyle = 'rgba(255,255,255,.14)';
      ctx.fillRect(-c.w/2-3, -c.h/2-3, c.w+6, c.h+6);
      ctx.fillStyle = 'rgba(255,79,109,.55)';
      ctx.fillRect(-c.w/2, -c.h/2, c.w, c.h);
      ctx.fillStyle = 'rgba(0,0,0,.25)';
      ctx.fillRect(-c.w/2+6, -c.h/2+10, c.w-12, c.h-20);
      ctx.restore();
    }

// Cops
    for(const cop of cops){
      const s = toScreen(cop.x,cop.y);
      ctx.save();
      ctx.translate(s.x, s.y);
      ctx.rotate(Math.atan2(cop.vy,cop.vx));
      ctx.fillStyle = 'rgba(255,255,255,.18)';
      ctx.fillRect(-cop.w/2-3, -cop.h/2-3, cop.w+6, cop.h+6);
      ctx.fillStyle = 'rgba(255,204,77,.75)';
      ctx.fillRect(-cop.w/2, -cop.h/2, cop.w, cop.h);
      // lights
      ctx.fillStyle = 'rgba(106,224,255,.75)';
      ctx.fillRect(-cop.w/2+6, -cop.h/2+8, 10, 10);
      ctx.fillStyle = 'rgba(255,79,109,.75)';
      ctx.fillRect(cop.w/2-16, -cop.h/2+8, 10, 10);
      ctx.restore();
    }

// Bus
    {
      const s = toScreen(bus.x,bus.y);
      ctx.save();
      ctx.translate(s.x, s.y);
      ctx.rotate(bus.a);

// honk shockwave
      if(honkPulse>0){
        ctx.strokeStyle = `rgba(234,242,255,${0.25*honkPulse})`;
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.arc(0,0, 140*(1-honkPulse)+30, 0, Math.PI*2);
        ctx.stroke();
      }

// body
      ctx.fillStyle = 'rgba(255,255,255,.18)';
      ctx.fillRect(-bus.w/2-4, -bus.h/2-4, bus.w+8, bus.h+8);
      ctx.fillStyle = 'rgba(68,209,138,.75)';
      ctx.fillRect(-bus.w/2, -bus.h/2, bus.w, bus.h);

// windows
      ctx.fillStyle = 'rgba(0,0,0,.28)';
      ctx.fillRect(-bus.w/2+8, -bus.h/2+14, bus.w-16, bus.h*0.55);

// stripe
      ctx.fillStyle = `rgba(106,224,255,${0.25+heat*0.25})`;
      ctx.fillRect(-bus.w/2, -10, bus.w, 20);

// health indicator
      ctx.fillStyle = `rgba(255,79,109,${0.18 + (1-bus.health)*0.35})`;
      ctx.fillRect(-bus.w/2, bus.h/2-12, bus.w, 10);

ctx.restore();
    }

// vignette
    const vg = ctx.createRadialGradient(W*0.5,H*0.2,10,W*0.5,H*0.5,Math.max(W,H));
    vg.addColorStop(0,'rgba(0,0,0,0)');
    vg.addColorStop(1,'rgba(0,0,0,.55)');
    ctx.fillStyle = vg;
    ctx.fillRect(0,0,W,H);

if(gameOver){
      ctx.fillStyle = 'rgba(0,0,0,.55)';
      ctx.fillRect(0,0,W,H);
      ctx.textAlign = 'center';
      ctx.fillStyle = 'rgba(234,242,255,.95)';
      ctx.font = '800 28px system-ui,-apple-system,Segoe UI,Roboto,Arial';
      ctx.fillText('BUS WRECKED', W/2, H/2 - 8);
      ctx.font = '14px system-ui,-apple-system,Segoe UI,Roboto,Arial';
      ctx.fillStyle = 'rgba(169,182,217,.9)';
      ctx.fillText('Reset to run it again.', W/2, H/2 + 18);
    }
  }

// ---------- Loop ----------
  let last = performance.now();
  function loop(now){
    const dt = Math.min(0.033, (now-last)/1000);
    last = now;
    if(!gameOver) update(dt);
    draw();
    requestAnimationFrame(loop);
  }
  requestAnimationFrame(loop);
})();
</script>
</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump