SIMON Master Console Rebuild

File viewer

guarded to /htdocs

/downloads/Neon_runner_3d.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>Neon Runner 3D — SIMON Arcade</title>
<meta name="theme-color" content="#070b16"/>
<style>
  :root{
    --bg:#070b16; --ink:#eaf2ff; --glass:rgba(255,255,255,.06); --edge:rgba(255,255,255,.18);
    --acc:#6ae0ff; --vio:#7c4dff; --ok:#48d18a; --warn:#ffcc4d; --danger:#ff6b6b;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{margin:0;background:radial-gradient(100% 60% at 50% 0%, #0a1124 0%, #050814 60%, #030515 100%); color:var(--ink); font-family:ui-sans-serif,system-ui,Inter,Segoe UI,Roboto}
  #wrap{position:fixed; inset:0; display:grid; grid-template-rows:auto 1fr auto}
  header,footer{display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.75rem 1rem; background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); backdrop-filter: blur(10px); border-bottom:1px solid var(--edge)}
  footer{border-top:1px solid var(--edge); border-bottom:0}
  .brand{display:flex; align-items:center; gap:.6rem; letter-spacing:.5px; font-weight:600}
  .brand .dot{width:.6rem; height:.6rem; border-radius:999px; background: radial-gradient(circle at 30% 30%, var(--acc), transparent 70%), radial-gradient(circle at 70% 70%, var(--vio), transparent 70%), #1b2a5f; box-shadow:0 0 12px #6ae0ff}
  .hud{display:flex; align-items:center; gap:1rem; font-variant-numeric: tabular-nums}
  .pill{padding:.35rem .6rem; border:1px solid var(--edge); background:var(--glass); border-radius:999px}
  .btn{cursor:pointer; user-select:none; padding:.55rem .9rem; border:1px solid var(--edge); border-radius:.8rem; background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.03);}
  .btn:hover{box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transform:translateY(-1px)}
  #stage{position:relative; overflow:hidden}
  canvas{display:block; width:100%; height:100%}
  /* Overlay UI */
  #overlay{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
  #panel{pointer-events:auto; width:min(560px, 92vw); background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)); border:1px solid var(--edge); border-radius:1rem; padding:1.2rem; text-align:center; backdrop-filter: blur(10px); box-shadow:0 10px 40px rgba(0,0,0,.35)}
  #panel h1{margin:.2rem 0 .4rem; font-size:1.3rem; letter-spacing:.4px}
  #panel p{margin:.25rem 0 .75rem; color:#b9c5ea; line-height:1.35}
  .row{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap}
  .kbd{border:1px solid var(--edge); background:var(--glass); padding:.25rem .5rem; border-radius:.5rem; font-size:.9rem}
  .cta{margin-top:.75rem}
  .cta .btn{font-weight:700}
  .hidden{display:none !important}
  .note{font-size:.85rem; opacity:.85}
</style>
</head>
<body>
<div id="wrap">
  <header>
    <div class="brand"><span class="dot"></span> SIMON • NEON RUNNER 3D</div>
    <div class="hud">
      <div id="score" class="pill">Score: 0</div>
      <div id="speed" class="pill">Speed: 30</div>
      <div id="status" class="pill">Ready</div>
      <div id="pauseBtn" class="btn" title="Esc">Pause</div>
    </div>
  </header>

<main id="stage">
    <canvas id="gl"></canvas>
    <div id="overlay">
      <div id="panel">
        <h1>Neon Runner 3D</h1>
        <p>Swap lanes, jump obstacles, and ride the mag-street. Survive as speed ramps up.</p>
        <div class="row" aria-label="controls">
          <span class="kbd">A / ←</span><span class="kbd">D / →</span><span class="kbd">Space</span>
          <span class="kbd">Esc</span>
        </div>
        <p class="note">Touch: swipe left/right to switch lanes, swipe up to jump.</p>
        <div class="cta"><button id="playBtn" class="btn">▶ Play</button></div>
      </div>
    </div>
  </main>

<footer>
    <div class="note">© Gaylord Sinclair — SIMON Arcade</div>
    <div class="row">
      <a class="btn" href="#" id="resetBtn">Reset</a>
      <a class="btn" href="#" id="helpBtn" title="Tips">Help</a>
    </div>
  </footer>
</div>

<script src="https://unpkg.com/three@0.160.1/build/three.min.js"></script>

// ---------- Renderer / Scene / Camera ----------
  const renderer = new THREE.WebGLRenderer({ canvas, antialias:true });
  renderer.setPixelRatio(Math.min(devicePixelRatio, 2));
  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0x050814);

const camera = new THREE.PerspectiveCamera(60, 1, 0.1, 2000);
  camera.position.set(0, 3.2, 8);
  camera.lookAt(0, 1.6, 0);

function resize(){
    const w = canvas.clientWidth, h = canvas.clientHeight;
    renderer.setSize(w, h, false);
    camera.aspect = w / h;
    camera.updateProjectionMatrix();
  }
  new ResizeObserver(resize).observe(canvas);

// ---------- Lighting ----------
  const hemi = new THREE.HemisphereLight(0x5ac8ff, 0x0b1230, .8);
  scene.add(hemi);
  const dir = new THREE.DirectionalLight(0xffffff, .6);
  dir.position.set(5, 8, 6);
  scene.add(dir);

// ---------- Starfield ----------
  function makeStars(count=1500){
    const g = new THREE.BufferGeometry();
    const pos = new Float32Array(count*3);
    for(let i=0;i<count;i++){
      pos[i*3+0] = (Math.random()-0.5)*80;
      pos[i*3+1] = Math.random()*30 + 5;
      pos[i*3+2] = -Math.random()*400 - 20;
    }
    g.setAttribute('position', new THREE.BufferAttribute(pos,3));
    const m = new THREE.PointsMaterial({ size: .06, color: 0x6ae0ff, transparent:true, opacity:.9 });
    const p = new THREE.Points(g, m);
    p.userData.scroll = true;
    scene.add(p);
    return p;
  }
  const stars = makeStars();

// ---------- Ground / Mag-street ----------
  const streetW = 9, laneW = 3; // 3 lanes
  const groundGeo = new THREE.PlaneGeometry(streetW, 100, 1, 100);
  const groundMat = new THREE.MeshStandardMaterial({
    color: 0x0b1230, metalness: .6, roughness: .2, emissive: 0x09142e, emissiveIntensity: .8,
    side: THREE.DoubleSide, wireframe:false
  });
  const ground = new THREE.Mesh(groundGeo, groundMat);
  ground.rotation.x = -Math.PI/2;
  ground.position.z = -40;
  scene.add(ground);

// lane glow lines
  const laneMat = new THREE.MeshBasicMaterial({ color:0x7c4dff, transparent:true, opacity:.9 });
  const laneGeo = new THREE.PlaneGeometry(.06, 100);
  const laneL = new THREE.Mesh(laneGeo, laneMat);
  laneL.rotation.x = -Math.PI/2; laneL.position.set(-laneW, .01, -40); scene.add(laneL);
  const laneC = laneL.clone(); laneC.position.x = 0; laneC.material = new THREE.MeshBasicMaterial({color:0x6ae0ff,transparent:true,opacity:.9}); scene.add(laneC);
  const laneR = laneL.clone(); laneR.position.x = laneW; scene.add(laneR);

// ---------- Player ----------
  const playerGeo = new THREE.BoxGeometry(0.9, 1.1, 1.2);
  const playerMat = new THREE.MeshStandardMaterial({ color:0x6ae0ff, metalness:.2, roughness:.25, emissive:0x204b7a, emissiveIntensity:1.1 });
  const player = new THREE.Mesh(playerGeo, playerMat);
  player.position.set(0, .55, 1.5);
  scene.add(player);

// subtle player glow ring
  const ringGeo = new THREE.TorusGeometry(0.8, 0.03, 12, 48);
  const ringMat = new THREE.MeshBasicMaterial({ color:0x6ae0ff, transparent:true, opacity:.5 });
  const ring = new THREE.Mesh(ringGeo, ringMat);
  ring.rotation.x = Math.PI/2; ring.position.set(0, .03, 1.5);
  scene.add(ring);

// ---------- Obstacles ----------
  const obstacles = [];
  const obsGeo = new THREE.BoxGeometry(1.1, 1.1, 1.1);
  const obsMats = [
    new THREE.MeshStandardMaterial({ color:0xff6b6b, emissive:0x4c1010, metalness:.2, roughness:.4 }),
    new THREE.MeshStandardMaterial({ color:0xffcc4d, emissive:0x4c3608, metalness:.2, roughness:.4 }),
    new THREE.MeshStandardMaterial({ color:0x7c4dff, emissive:0x25104c, metalness:.2, roughness:.4 })
  ];

function spawnObstacle(){
    const lane = [-laneW, 0, laneW][(Math.random()*3)|0];
    const mesh = new THREE.Mesh(obsGeo, obsMats[(Math.random()*obsMats.length)|0]);
    mesh.position.set(lane, .55, -80);
    mesh.userData.speed = state.speed;
    scene.add(mesh);
    obstacles.push(mesh);
  }

// ---------- State ----------
  const state = {
    playing: false,
    paused: false,
    targetLaneX: 0,
    laneX: 0,
    score: 0,
    speed: 30,      // base forward speed
    maxSpeed: 85,
    jumpT: 0,       // 0..1 jump timeline
    gravity: 34,
    laneLerp: 12,
    lastSpawnZ: 0,
    spawnGap: 10,   // meters between spawns initial
    t: 0
  };

function setStatus(s){ hudStatus.textContent = s; }

// ---------- Controls ----------
  function moveLane(dir){
    if(!state.playing || state.paused) return;
    const lanes = [-laneW, 0, laneW];
    const idx = lanes.indexOf(state.targetLaneX);
    state.targetLaneX = lanes[Math.max(0, Math.min(2, idx + dir))];
  }
  function jump(){
    if(!state.playing || state.paused) return;
    if(state.jumpT === 0) state.jumpT = 0.001; // start jump
  }

// Touch swipe
  let touchStart = null;
  function onTouchStart(e){
    touchStart = { x: e.changedTouches[0].clientX, y: e.changedTouches[0].clientY, t: performance.now() };
  }
  function onTouchEnd(e){
    if(!touchStart) return;
    const dx = e.changedTouches[0].clientX - touchStart.x;
    const dy = e.changedTouches[0].clientY - touchStart.y;
    const adx = Math.abs(dx), ady = Math.abs(dy);
    if(Math.max(adx, ady) < 20) return; // ignore tiny
    if(adx > ady){ // horizontal
      moveLane(dx>0 ? 1 : -1);
    } else {
      if(dy < 0) jump(); // swipe up
    }
    touchStart = null;
  }
  canvas.addEventListener('touchstart', onTouchStart, {passive:true});
  canvas.addEventListener('touchend', onTouchEnd, {passive:true});

// Buttons
  playBtn.addEventListener('click', start);
  pauseBtn.addEventListener('click', togglePause);
  resetBtn.addEventListener('click', (e)=>{ e.preventDefault(); hardReset(); });
  helpBtn.addEventListener('click', (e)=>{ e.preventDefault(); alert('Swap lanes (A/D or swipe). Space/Swipe Up to jump. Avoid blocks. Esc to pause. Speed ramps over time.'); });

// ---------- Game Loop ----------
  let last = performance.now();
  function animate(now){
    requestAnimationFrame(animate);
    const dt = Math.min(0.033, (now - last) / 1000);
    last = now;

if(state.playing && !state.paused){
      update(dt);
    }
    render();
  }
  requestAnimationFrame(animate);

function update(dt){
    state.t += dt;
    // ramp difficulty
    state.speed = Math.min(state.maxSpeed, state.speed + dt * 1.2);
    state.spawnGap = Math.max(5, 10 - (state.speed-30)/15);

// move ground/stars illusion
    ground.position.z += state.speed * dt;
    if(ground.position.z > 0){ ground.position.z = -40; }
    laneL.position.z = ground.position.z;
    laneC.position.z = ground.position.z;
    laneR.position.z = ground.position.z;

if(stars.userData.scroll){
      stars.position.z += state.speed * dt * .6;
      if(stars.position.z > 0) stars.position.z = -200;
    }

// player lane interpolate
    state.laneX += (state.targetLaneX - state.laneX) * Math.min(1, state.laneLerp * dt);
    player.position.x = state.laneX; ring.position.x = state.laneX;

// jump arc (parabola)
    if(state.jumpT > 0){
      state.jumpT += dt * 1.8; // jump duration
      const t = Math.min(1, state.jumpT);
      const h = Math.sin(Math.PI * t) * 1.8; // arc
      player.position.y = .55 + h;
      ring.position.y = .03 + Math.max(0, h - .3) * .15;
      if(state.jumpT >= 1){ state.jumpT = 0; player.position.y = .55; ring.position.y = .03; }
    }

// spawn obstacles
    const furthestZ = Math.min(...obstacles.map(o=>o.position.z), 0);
    if(furthestZ > -20 || obstacles.length === 0){
      if(state.t - state.lastSpawnZ > state.spawnGap/ state.speed * 30){
        spawnObstacle();
        state.lastSpawnZ = state.t;
      }
    }

// move obstacles + collisions
    for(let i=obstacles.length-1; i>=0; i--){
      const o = obstacles[i];
      o.position.z += state.speed * dt;
      // collision (AABB)
      const dz = Math.abs(o.position.z - player.position.z);
      const dx = Math.abs(o.position.x - player.position.x);
      const dy = Math.abs(o.position.y - player.position.y);
      if(dz < 0.9 && dx < 0.9 && dy < 1.0){
        gameOver();
        return;
      }
      if(o.position.z > 10){
        // passed safely -> score
        obstacles.splice(i,1);
        scene.remove(o);
        state.score += 10;
      }
    }

// HUD
    hudScore.textContent = 'Score: ' + state.score;
    hudSpeed.textContent = 'Speed: ' + Math.round(state.speed);
  }

function render(){
    ring.rotation.z += 0.03;
    renderer.render(scene, camera);
  }

// ---------- Lifecycle ----------
  function start(){
    overlay.classList.add('hidden');
    state.playing = true;
    state.paused = false;
    setStatus('Running');
  }
  function togglePause(){
    if(!state.playing) return;
    state.paused = !state.paused;
    setStatus(state.paused ? 'Paused' : 'Running');
    overlay.classList.toggle('hidden', !state.paused);
    panel.querySelector('h1').textContent = state.paused ? 'Paused' : 'Neon Runner 3D';
    playBtn.textContent = state.paused ? '▶ Resume' : '▶ Play';
  }
  function gameOver(){
    state.playing = false;
    state.paused = true;
    overlay.classList.remove('hidden');
    panel.querySelector('h1').textContent = 'Game Over';
    panel.querySelector('p').textContent = `Score: ${state.score} • Speed: ${Math.round(state.speed)}`;
    playBtn.textContent = '↻ Play Again';
    setStatus('Game Over');
  }
  function hardReset(){
    // remove obstacles
    for(const o of obstacles){ scene.remove(o); }
    obstacles.length = 0;
    // reset state
    Object.assign(state, {
      playing:false, paused:false, targetLaneX:0, laneX:0, score:0,
      speed:30, maxSpeed:85, jumpT:0, gravity:34, laneLerp:12, lastSpawnZ:0, spawnGap:10, t:0
    });
    // reset positions
    player.position.set(0, .55, 1.5);
    ring.position.set(0, .03, 1.5);
    ground.position.z = -40; laneL.position.z = -40; laneC.position.z = -40; laneR.position.z = -40;
    stars.position.z = -200;
    hudScore.textContent = 'Score: 0';
    hudSpeed.textContent = 'Speed: 30';
    setStatus('Ready');
    overlay.classList.remove('hidden');
    panel.querySelector('h1').textContent = 'Neon Runner 3D';
    panel.querySelector('p').textContent = 'Swap lanes, jump obstacles, and ride the mag-street. Survive as speed ramps up.';
    playBtn.textContent = '▶ Play';
  }

// Pause when tab hidden / window blur
  document.addEventListener('visibilitychange', () => {
    if(document.hidden && state.playing && !state.paused) togglePause();
  });
  window.addEventListener('blur', () => {
    if(state.playing && !state.paused) togglePause();
  });

// Initial layout + reset once
  resize();
  hardReset();
})();
</script>
</body>
</html>

Quick jump

open a path

True command center for SIMON + WEB360

File viewer

Quick jump