SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/downloads/ORB_RUNNER.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>SIMON Arcade • Gaylord Orb Runner</title>
<meta name="theme-color" content="#070b16" />
<style>
  :root{
    --bg:#070b16; --bg2:#050812;
    --glass:rgba(255,255,255,.06);
    --glass2:rgba(255,255,255,.035);
    --edge:rgba(255,255,255,.16);
    --txt:#eaf2ff; --mut:#a9b6d9;
    --cyan:#6ae0ff; --ind:#7b62ff; --pink:#ff4fd6;
    --green:#44d18a; --warn:#ffcc4d; --bad:#ff4f6d;
    --r:18px; --shadow:0 18px 60px rgba(0,0,0,.55);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0; overflow:hidden; color:var(--txt);
    font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
    background:
      radial-gradient(1200px 700px at 50% -10%, #142457, var(--bg) 62%),
      radial-gradient(900px 520px at 20% 110%, #2a0f4a, transparent 55%),
      radial-gradient(900px 520px at 110% 80%, #063d4d, transparent 55%),
      linear-gradient(180deg, var(--bg2), var(--bg));
  }
  canvas{position:fixed; inset:0; width:100vw; height:100vh; display:block}
  .topbar{
    position:fixed; left:14px; right:14px; top:14px;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    z-index:20; pointer-events:none;
  }
  .brand,.hud{
    pointer-events:auto;
    display:flex; align-items:center; gap:12px;
    padding:10px 12px;
    border-radius:999px;
    background:linear-gradient(180deg,var(--glass),var(--glass2));
    border:1px solid var(--edge);
    box-shadow:var(--shadow);
    backdrop-filter: blur(10px);
  }
  .logo{width:34px; height:34px; filter: drop-shadow(0 0 12px rgba(106,224,255,.22))}
  .brandTxt{display:flex; flex-direction:column; line-height:1.05}
  .brandTxt b{font-size:12.5px; letter-spacing:.18em}
  .brandTxt span{font-size:11px; color:var(--mut); letter-spacing:.08em}

.pill{
    display:flex; align-items:baseline; gap:8px;
    padding:6px 10px; border-radius:999px;
    background:rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.10);
  }
  .pill label{font-size:10px; color:var(--mut); letter-spacing:.12em}
  .pill strong{font-size:13px}
  .pill small{font-size:11px; color:var(--mut)}
  .btn{
    cursor:pointer; user-select:none;
    padding:8px 12px; border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
    color:var(--txt); font-weight:900; letter-spacing:.06em; font-size:11px;
  }
  .btn:hover{filter:brightness(1.12)}
  .btn:active{transform:translateY(1px)}
  .btn.good{border-color:rgba(68,209,138,.45)}
  .btn.bad{border-color:rgba(255,79,109,.45)}
  .btn.cyan{border-color:rgba(106,224,255,.45)}
  .btn.pink{border-color:rgba(255,79,214,.45)}

.overlay{
    position:fixed; inset:0; z-index:30;
    display:flex; align-items:center; justify-content:center;
    padding:22px;
    background: radial-gradient(900px 520px at 50% 0%, rgba(20,36,87,.35), rgba(7,11,22,.88));
    backdrop-filter: blur(6px);
  }
  .panel{
    width:min(980px, 100%);
    border-radius: calc(var(--r) + 10px);
    border:1px solid var(--edge);
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
    box-shadow: var(--shadow);
    padding:18px;
  }
  .grid{display:grid; grid-template-columns: 1.05fr .95fr; gap:14px}
  @media (max-width: 900px){ .grid{grid-template-columns:1fr} }
  h1{margin:0 0 10px; font-size:20px; letter-spacing:.14em}
  .sub{color:var(--mut); font-size:12.5px; line-height:1.5}
  .rules{margin-top:12px; display:grid; grid-template-columns:1fr 1fr; gap:10px}
  .card{border-radius:14px; border:1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.16); padding:10px}
  .card b{display:block; font-size:12px; letter-spacing:.08em}
  .card span{display:block; font-size:12px; color:var(--mut); margin-top:4px; line-height:1.35}
  .row{display:flex; justify-content:space-between; gap:12px; padding:10px 0; border-bottom:1px solid rgba(255,255,255,.08)}
  .row:last-child{border-bottom:none}
  select{
    background: rgba(0,0,0,.22);
    color: var(--txt);
    border:1px solid rgba(255,255,255,.15);
    border-radius: 12px;
    padding:8px 10px;
    outline:none;
  }
  .toast{
    position:fixed; left:50%; bottom:18px;
    transform: translateX(-50%);
    z-index:40;
    padding:10px 12px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.16);
    background: rgba(0,0,0,.35);
    backdrop-filter: blur(8px);
    color:var(--txt);
    font-size:12px;
    letter-spacing:.06em;
    opacity:0; pointer-events:none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .toast.on{ opacity:1; transform: translateX(-50%) translateY(-4px); }
</style>
</head>
<body>

<div class="topbar">
  <div class="brand">
    <svg class="logo" viewBox="0 0 64 64" aria-hidden="true">
      <defs>
        <radialGradient id="g1" cx="35%" cy="25%" r="75%">
          <stop offset="0%" stop-color="#6ae0ff"/>
          <stop offset="45%" stop-color="#7b62ff"/>
          <stop offset="100%" stop-color="#ff4fd6"/>
        </radialGradient>
      </defs>
      <circle cx="32" cy="32" r="28" fill="url(#g1)" opacity=".95"/>
      <circle cx="32" cy="32" r="18" fill="rgba(0,0,0,.18)" />
      <path d="M18 34c5-10 23-20 28-10 5 10-8 20-18 20-6 0-12-4-10-10z" fill="rgba(255,255,255,.28)"/>
      <path d="M20 30c8-10 28-12 28 2" stroke="rgba(255,255,255,.45)" stroke-width="2" fill="none" stroke-linecap="round"/>
    </svg>
    <div class="brandTxt">
      <b>GAYLORD&nbsp;SINCLAIR</b>
      <span>SIMON Arcade • Orb Runner</span>
    </div>
  </div>

<div class="hud">
    <div class="pill"><label>SCORE</label><strong id="score">0</strong></div>
    <div class="pill"><label>BEST</label><strong id="best">0</strong></div>
    <div class="pill"><label>SHARDS</label><strong id="shards">0</strong></div>
    <div class="pill"><label>OVERDRIVE</label><strong id="od">0</strong><small>%</small></div>
    <button class="btn cyan" id="pause">PAUSE</button>
    <button class="btn pink" id="menuBtn">MENU</button>
  </div>
</div>

<div class="overlay" id="menu" style="display:flex">
  <div class="panel">
    <div class="grid">
      <div>
        <h1>GAYLORD ORB RUNNER</h1>
        <div class="sub">
          Dodge neon hazards, collect <b>Logo Shards</b>, and trigger <b>SIMON OVERDRIVE</b>.
          Overdrive slows time and multiplies score. 🌀✨
        </div>
        <div class="rules">
          <div class="card"><b style="color:var(--cyan)">MOVE</b><span>Mouse / Touch / Arrow keys.</span></div>
          <div class="card"><b style="color:var(--pink)">HAZARDS</b><span>Don’t touch spikes or beams.</span></div>
          <div class="card"><b style="color:var(--warn)">SHARDS</b><span>Pickups increase Overdrive meter.</span></div>
          <div class="card"><b style="color:var(--green)">OVERDRIVE</b><span>Press <b>Space</b> when meter ≥ 60%.</span></div>
        </div>
      </div>

<div>
        <div class="row">
          <div class="sub"><b>Difficulty</b><br><span style="color:var(--mut)">Speed + hazard density</span></div>
          <select id="diff">
            <option value="chill">Chill</option>
            <option value="arcade" selected>Arcade</option>
            <option value="hard">Hard</option>
          </select>
        </div>
        <div class="row">
          <div class="sub"><b>Control</b><br><span style="color:var(--mut)">Mouse is default</span></div>
          <select id="control">
            <option value="mouse" selected>Mouse/Touch</option>
            <option value="keys">Arrow Keys</option>
          </select>
        </div>
        <div class="row">
          <button class="btn good" id="play">PLAY</button>
          <button class="btn bad" id="reset">RESET BEST</button>
        </div>
        <div class="sub" style="margin-top:10px">Tip: farm shards early, then pop Overdrive during dense waves.</div>
      </div>
    </div>
  </div>
</div>

<div class="toast" id="toast">Ready</div>

const clamp=(v,a,b)=>Math.max(a,Math.min(b,v));
  const rand=(a,b)=>a+Math.random()*(b-a);

// Canvas
  const cv = document.getElementById("cv");
  const ctx = cv.getContext("2d",{alpha:true});
  let W=0,H=0,DPR=1;
  function resize(){
    DPR=Math.min(2, devicePixelRatio||1);
    W=Math.floor(innerWidth); H=Math.floor(innerHeight);
    cv.width=Math.floor(W*DPR); cv.height=Math.floor(H*DPR);
    cv.style.width=W+"px"; cv.style.height=H+"px";
    ctx.setTransform(DPR,0,0,DPR,0,0);
  }
  addEventListener("resize", resize, {passive:true});
  resize();

// HUD
  const $=id=>document.getElementById(id);
  const elScore=$("score"), elBest=$("best"), elShards=$("shards"), elOD=$("od");
  const menu=$("menu"), playBtn=$("play"), pauseBtn=$("pause"), menuBtn=$("menuBtn");
  const diffSel=$("diff"), controlSel=$("control"), resetBtn=$("reset"), toast=$("toast");

const BEST_KEY="gs_orb_runner_best";
  let best=Number(localStorage.getItem(BEST_KEY)||"0");
  elBest.textContent=String(best);

function showToast(msg){
    toast.textContent=msg;
    toast.classList.add("on");
    clearTimeout(showToast._t);
    showToast._t=setTimeout(()=>toast.classList.remove("on"), 900);
  }

// Background stars
  const stars=[];
  function initStars(){
    stars.length=0;
    const n=170;
    for(let i=0;i<n;i++){
      stars.push({x:Math.random()*W,y:Math.random()*H,r:rand(0.8,2.4),vx:rand(-0.15,0.15),vy:rand(0.02,0.25),a:rand(0.10,0.45),h:rand(180,320)});
    }
  }
  initStars(); addEventListener("resize", initStars, {passive:true});

// Difficulty
  const DIFF={
    chill:{spd:260, hz:0.75, shard:0.95},
    arcade:{spd:320, hz:1.00, shard:1.00},
    hard:{spd:390, hz:1.18, shard:1.05},
  };

// Game state
  let running=false, paused=false;
  let t=0, score=0, shards=0, od=0; // od = 0..1
  let overdrive=false, odT=0;
  const hazards=[], pickups=[], particles=[];

// Player
  const p={ x:W*0.5, y:H*0.72, r:16, vx:0, vy:0, tx:W*0.5, ty:H*0.72 };

// Input
  let useMouse=true;
  let keys={l:0,r:0,u:0,d:0};

function resetRun(){
    const cfg=DIFF[diffSel.value]||DIFF.arcade;
    running=true; paused=false;
    t=0; score=0; shards=0; od=0; overdrive=false; odT=0;
    hazards.length=0; pickups.length=0; particles.length=0;
    p.x=W*0.5; p.y=H*0.72; p.tx=p.x; p.ty=p.y; p.vx=p.vy=0;
    showToast("RUN!");
    updateHUD();
    // seed some pickups
    for(let i=0;i<2;i++) spawnShard(cfg);
  }

function updateHUD(){
    elScore.textContent=String(Math.round(score));
    elBest.textContent=String(best);
    elShards.textContent=String(shards);
    elOD.textContent=String(Math.round(od*100));
  }

// Spawners
  function spawnHazard(cfg){
    const type = Math.random()<0.55 ? "spike" : "beam";
    if(type==="spike"){
      hazards.push({
        type,
        x: rand(80, W-80),
        y: -30,
        r: rand(16,26),
        spd: cfg.spd * rand(0.85,1.15),
        rot: rand(0,Math.PI*2),
      });
    } else {
      const w = rand(120, 220);
      hazards.push({
        type,
        x: rand(80, W-80),
        y: -40,
        w,
        h: 10,
        spd: cfg.spd * rand(0.85,1.15),
        phase: rand(0,Math.PI*2),
      });
    }
  }

function spawnShard(cfg){
    pickups.push({
      x: rand(70, W-70),
      y: -30,
      r: 10,
      spd: (cfg.spd*0.88) * rand(0.85,1.1),
      spin: rand(-6,6),
      a: 1
    });
  }

// Controls
  cv.addEventListener("pointermove",(e)=>{
    if(!useMouse) return;
    const r=cv.getBoundingClientRect();
    p.tx = e.clientX - r.left;
    p.ty = e.clientY - r.top;
  },{passive:true});
  cv.addEventListener("pointerdown",()=>{ if(!running){ /* ignore */ } },{passive:true});

addEventListener("keydown",(e)=>{
    const k=e.key.toLowerCase();
    if(k==="arrowleft") keys.l=1;
    if(k==="arrowright") keys.r=1;
    if(k==="arrowup") keys.u=1;
    if(k==="arrowdown") keys.d=1;
    if(k===" "){
      if(running && !paused && !overdrive && od>=0.60){
        overdrive=true; odT=2.7;
        od=Math.max(0, od-0.60);
        showToast("SIMON OVERDRIVE!");
        burst(p.x,p.y,26);
      }
    }
    if(k==="p"){ if(running){ paused=!paused; showToast(paused?"Paused":"Go!"); } }
    if(e.key==="Escape"){ menu.style.display = (menu.style.display==="none")?"flex":"none"; if(menu.style.display!=="none") paused=true; }
  });
  addEventListener("keyup",(e)=>{
    const k=e.key.toLowerCase();
    if(k==="arrowleft") keys.l=0;
    if(k==="arrowright") keys.r=0;
    if(k==="arrowup") keys.u=0;
    if(k==="arrowdown") keys.d=0;
  });

// Buttons
  playBtn.addEventListener("click",()=>{
    menu.style.display="none";
    useMouse = (controlSel.value==="mouse");
    resetRun();
  });
  pauseBtn.addEventListener("click",()=>{ if(running){ paused=!paused; showToast(paused?"Paused":"Go!"); } });
  menuBtn.addEventListener("click",()=>{ menu.style.display="flex"; paused=true; });
  resetBtn.addEventListener("click",()=>{
    best=0; localStorage.setItem(BEST_KEY,"0"); elBest.textContent="0"; showToast("Best cleared");
  });

// Loop
  let last=performance.now();
  let hzTimer=0, shardTimer=0;
  function step(now){
    const dt = clamp((now-last)/1000, 0, 0.033);
    last=now;
    t += dt;

// subtle trails
    ctx.fillStyle="rgba(7,11,22,0.18)";
    ctx.fillRect(0,0,W,H);

// stars
    for(const s of stars){
      s.x += s.vx;
      s.y += s.vy;
      if(s.y>H+20){ s.y=-20; s.x=Math.random()*W; }
      if(s.x<-20) s.x=W+20;
      if(s.x>W+20) s.x=-20;
      ctx.beginPath();
      ctx.fillStyle=`hsla(${s.h},100%,70%,${s.a})`;
      ctx.arc(s.x,s.y,s.r,0,Math.PI*2);
      ctx.fill();
    }

if(!running || paused){
      requestAnimationFrame(step);
      return;
    }

const cfg=DIFF[diffSel.value]||DIFF.arcade;

// overdrive (slow time)
    let timeMul = 1;
    if(overdrive){
      odT -= dt;
      timeMul = 0.55;
      if(odT<=0) overdrive=false;
    }

// player movement
    if(useMouse){
      p.x += (p.tx - p.x) * (1 - Math.pow(0.00008, dt));
      p.y += (p.ty - p.y) * (1 - Math.pow(0.00008, dt));
    } else {
      const sp=420;
      const ax = (keys.r-keys.l) * sp;
      const ay = (keys.d-keys.u) * sp;
      p.x += ax*dt;
      p.y += ay*dt;
    }
    p.x = clamp(p.x, 30, W-30);
    p.y = clamp(p.y, 90, H-30);

// spawn hazards/pickups
    hzTimer += dt * cfg.hz;
    shardTimer += dt * cfg.shard;

const hzEvery = clamp(0.55 - score/2400, 0.18, 0.55);
    if(hzTimer >= hzEvery){
      hzTimer=0;
      spawnHazard(cfg);
      if(Math.random()<0.18) spawnHazard(cfg);
    }
    if(shardTimer >= 1.05){
      shardTimer=0;
      if(pickups.length<4) spawnShard(cfg);
    }

// update hazards
    for(let i=hazards.length-1;i>=0;i--){
      const h=hazards[i];
      h.y += h.spd * dt * timeMul;
      if(h.type==="spike"){
        h.rot += 2.4*dt;
        // collision
        if(Math.hypot(h.x-p.x, h.y-p.y) < (h.r + p.r)*0.78){
          burst(p.x,p.y,34);
          endRun();
        }
      } else {
        h.phase += 3.2*dt;
        const sway = Math.sin(h.phase)*26;
        const cx = h.x + sway;
        // collision beam rect
        const rx = cx - h.w/2, ry = h.y - h.h/2;
        const inside = (p.x > rx-p.r && p.x < rx+h.w+p.r && p.y > ry-p.r && p.y < ry+h.h+p.r);
        if(inside){
          burst(p.x,p.y,34);
          endRun();
        }
      }
      if(h.y > H+80) hazards.splice(i,1);
    }

// pickups
    for(let i=pickups.length-1;i>=0;i--){
      const s=pickups[i];
      s.y += s.spd * dt * timeMul;
      s.a = clamp(s.a - 0.0004*score*dt, 0.35, 1);
      if(Math.hypot(s.x-p.x, s.y-p.y) < (s.r + p.r)*0.92){
        pickups.splice(i,1);
        shards++;
        od = clamp(od + 0.14, 0, 1);
        burst(s.x,s.y,18);
      } else if(s.y > H+60) pickups.splice(i,1);
    }

// particles
    for(let i=particles.length-1;i>=0;i--){
      const q=particles[i];
      q.vx*=q.drag; q.vy*=q.drag;
      q.x += q.vx*2.2; q.y += q.vy*2.2;
      q.a -= 0.022;
      if(q.a<=0){ particles.splice(i,1); continue; }
      ctx.beginPath();
      ctx.fillStyle=`rgba(255,255,255,${q.a*0.55})`;
      ctx.arc(q.x,q.y,q.r,0,Math.PI*2);
      ctx.fill();
    }

// score
    const mult = overdrive ? 2.25 : 1.0;
    score += dt * (70 + score*0.012) * mult;

// draw hazards
    for(const h of hazards){
      if(h.type==="spike"){
        ctx.save();
        ctx.translate(h.x,h.y);
        ctx.rotate(h.rot);
        ctx.globalCompositeOperation="lighter";
        ctx.fillStyle="rgba(255,79,214,.14)";
        ctx.beginPath(); ctx.arc(0,0,h.r*3,0,Math.PI*2); ctx.fill();
        ctx.globalCompositeOperation="source-over";
        ctx.fillStyle="rgba(255,79,109,.82)";
        ctx.beginPath();
        for(let k=0;k<6;k++){
          const a = (k/6)*Math.PI*2;
          const rr = (k%2===0) ? h.r : h.r*0.48;
          ctx.lineTo(Math.cos(a)*rr, Math.sin(a)*rr);
        }
        ctx.closePath(); ctx.fill();
        ctx.restore();
      } else {
        ctx.save();
        const sway = Math.sin(h.phase)*26;
        const cx = h.x + sway;
        ctx.globalCompositeOperation="lighter";
        ctx.fillStyle="rgba(106,224,255,.12)";
        ctx.fillRect(cx-h.w/2, h.y-40, h.w, 80);
        ctx.globalCompositeOperation="source-over";
        ctx.fillStyle="rgba(106,224,255,.72)";
        ctx.fillRect(cx-h.w/2, h.y-h.h/2, h.w, h.h);
        ctx.restore();
      }
    }

// draw shards
    for(const s of pickups){
      ctx.save();
      ctx.globalCompositeOperation="lighter";
      ctx.fillStyle=`rgba(255,204,77,${0.20*s.a})`;
      ctx.beginPath(); ctx.arc(s.x,s.y,s.r*3,0,Math.PI*2); ctx.fill();
      ctx.globalCompositeOperation="source-over";
      ctx.fillStyle=`rgba(255,204,77,${0.90*s.a})`;
      ctx.beginPath();
      ctx.moveTo(s.x, s.y-s.r);
      ctx.lineTo(s.x+s.r, s.y);
      ctx.lineTo(s.x, s.y+s.r);
      ctx.lineTo(s.x-s.r, s.y);
      ctx.closePath();
      ctx.fill();
      ctx.restore();
    }

// draw player orb (Gaylord core)
    ctx.save();
    const glow = overdrive ? 0.22 : 0.14;
    ctx.globalCompositeOperation="lighter";
    const g = ctx.createRadialGradient(p.x,p.y,p.r*0.2,p.x,p.y,p.r*4.0);
    g.addColorStop(0, `rgba(255,255,255,${0.12 + glow})`);
    g.addColorStop(0.35, `rgba(106,224,255,${0.18 + glow})`);
    g.addColorStop(0.70, `rgba(123,98,255,${0.10 + glow})`);
    g.addColorStop(1.0, `rgba(255,79,214,${0.06 + glow})`);
    ctx.fillStyle=g;
    ctx.beginPath(); ctx.arc(p.x,p.y,p.r*4.2,0,Math.PI*2); ctx.fill();

ctx.globalCompositeOperation="source-over";
    ctx.fillStyle="rgba(0,0,0,.40)";
    ctx.beginPath(); ctx.arc(p.x,p.y,p.r*1.25,0,Math.PI*2); ctx.fill();

ctx.globalCompositeOperation="lighter";
    ctx.strokeStyle="rgba(106,224,255,.45)";
    ctx.lineWidth=2;
    ctx.beginPath(); ctx.arc(p.x,p.y,p.r*1.55 + Math.sin(t*7)*0.8,0,Math.PI*2); ctx.stroke();

ctx.globalCompositeOperation="source-over";
    ctx.fillStyle="rgba(255,255,255,.22)";
    ctx.font="900 12px ui-sans-serif,system-ui";
    ctx.textAlign="center";
    ctx.textBaseline="middle";
    ctx.fillText("GS", p.x, p.y);
    ctx.restore();

updateHUD();
    requestAnimationFrame(step);
  }

// Start in menu
  menu.style.display="flex";
  paused=true;
  showToast("Ready");
  requestAnimationFrame(step);
})();
</script>
</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump