Muse Ember

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Passenger Express — Train Snake</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  body{background:#0f2040;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#fff;overflow-x:hidden}
  .wrap{max-width:1020px;margin:0 auto;padding:12px}
  header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between}
  h1{font-size:28px;letter-spacing:.3px}
  h1 span{color:#ffcf4d}
  .badge{background:#ffcf4d;color:#222;font-weight:800;border-radius:999px;padding:5px 10px;font-size:12px}
  .hud{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
  .card{background:#1b3563;border:2px solid #2a4b85;border-radius:14px;padding:8px 12px;min-width:105px;flex:1}
  .card b{font-size:22px;display:block}
  .card small{color:#a8c0e8;text-transform:uppercase;letter-spacing:.08em;font-size:11px;font-weight:700}
  .bar{height:10px;background:#0a1a36;border-radius:99px;overflow:hidden;margin-top:6px}
  .bar i{display:block;height:100%;background:linear-gradient(90deg,#ff5a5a,#ffcf4d,#4ade80);width:0%}
  .stage{position:relative;border-radius:18px;overflow:hidden;border:4px solid #ffd25a;box-shadow:0 18px 40px rgba(0,0,0,.45);background:#79b66a}
  canvas{display:block;width:100%;height:auto;touch-action:none}
  .overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(8,18,40,.55);padding:16px;z-index:5}
  .overlay.hide{display:none}
  .overlay h2{font-size:32px;text-shadow:0 3px 0 rgba(0,0,0,.3)}
  .overlay p{margin:8px 0 14px;color:#e6f0ff;max-width:520px}
  button{border:0;background:#ffcf4d;color:#201600;font-weight:900;font-size:16px;padding:12px 22px;border-radius:999px;cursor:pointer;box-shadow:0 5px 0 #c49a1f}
  button:active{transform:translateY(3px);box-shadow:0 2px 0 #c49a1f}
  .controls{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
  .controls button{background:#fff;box-shadow:0 4px 0 #b9c7dd;color:#16335f;font-size:14px;padding:9px 14px}
  .legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:13px;color:#cfe0ff}
  .dot{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:5px;vertical-align:-1px}
  .arrows{display:grid;grid-template-columns:52px 52px 52px;grid-template-rows:52px 52px;gap:6px;justify-content:center;margin-top:12px}
  .arrows button{padding:0;font-size:22px;border-radius:14px}
  .arrows .up{grid-column:2}.arrows .left{grid-column:1;grid-row:2}.arrows .down{grid-column:2;grid-row:2}.arrows .right{grid-column:3;grid-row:2}
  @media(max-width:600px){h1{font-size:22px}.card{min-width:78px;padding:7px 9px}.card b{font-size:18px}}
</style>
</head>
<body>
<div class="wrap">
  <header>
    <h1>🚂 Passenger <span>Express</span></h1>
    <div class="badge">TRAIN SNAKE • PICK UP PASSENGERS!</div>
  </header>

  <div class="hud">
    <div class="card"><small>Passengers</small><b id="score">0</b></div>
    <div class="card"><small>Train Length</small><b id="length">4</b></div>
    <div class="card"><small>Best</small><b id="best">0</b></div>
    <div class="card"><small>Speed</small><b id="speed">1×</b><div class="bar"><i id="speedBar"></i></div></div>
    <div class="card"><small>Status</small><b id="status" style="font-size:16px">Auto demo ▶</b></div>
  </div>

  <div class="stage" id="stage">
    <canvas id="game" width="960" height="600"></canvas>
    <div class="overlay" id="overlay">
      <div style="font-size:52px">🚂🧑‍🤝‍🧑</div>
      <h2>Passenger Express</h2>
      <p>The snake is a little train! Follow the tracks, collect waiting passengers on the platforms, and grow longer — but don't crash into yourself or the buffers!</p>
      <button id="startBtn">▶ Click or press a key to start</button>
      <p style="font-size:12px;opacity:.85;margin-top:10px">Demo is playing itself behind this message • Arrow keys / WASD / swipe to drive</p>
    </div>
  </div>

  <div class="controls">
    <button id="pauseBtn">⏸ Pause</button>
    <button id="resetBtn">↺ New train</button>
    <button id="autoBtn">🤖 Auto: ON</button>
    <button id="parkBtn">🅿 Park (speed +)</button>
  </div>

  <div class="legend">
    <span><i class="dot" style="background:#e63946"></i>Locomotive</span>
    <span><i class="dot" style="background:#06d6a0"></i>Wagon</span>
    <span><i class="dot" style="background:#ffd166"></i>Passenger</span>
    <span><i class="dot" style="background:#9b5de5"></i>VIP passenger (bonus!)</span>
    <span>🏫 Platforms &amp; station are scenery — passengers wait there!</span>
  </div>

  <div class="arrows">
    <button class="up" data-dir="up">↑</button>
    <button class="left" data-dir="left">←</button>
    <button class="down" data-dir="down">↓</button>
    <button class="right" data-dir="right">→</button>
  </div>
</div>

<script>
const canvas=document.getElementById('game'),ctx=canvas.getContext('2d');
const COLS=24,ROWS=15,CW=canvas.width/COLS,CH=canvas.height/ROWS;
let snake,dir,nextDir,food,vip,score,alive,auto=true,paused=false,started=false,speedMs=150,tick=0,boost=1,particles=[];
const WAGON_COLORS=['#06d6a0','#118ab2','#ef476f','#f78c6b','#9b5de5','#ffd166','#ff8fa3','#4cc9f0'];
const NAMES=['Mia','Leo','Ava','Noah','Ivy','Finn','Zoe','Max','Luna','Eli','Nora','Sam'];

function reset(){
  snake=[{x:11,y:7},{x:10,y:7},{x:9,y:7},{x:8,y:7}];
  dir={x:1,y:0}; nextDir={x:1,y:0}; score=0; alive=true; tick=0; particles=[]; speedMs=150; boost=1;
  spawnFood(); spawnVIP();
  updateHUD();
}
function randEmpty(){
  while(true){const p={x:(Math.random()*COLS)|0,y:(Math.random()*ROWS)|0};
    if(!snake.some(s=>s.x===p.x&&s.y===p.y)&&(!food||p.x!==food.x||p.y!==food.y)&&(!vip||p.x!==vip.x||p.y!==vip.y)) return p;}
}
function spawnFood(){ food=randEmpty(); food.name=NAMES[(Math.random()*NAMES.length)|0]; }
function spawnVIP(){ vip = Math.random()<0.45 ? randEmpty() : null; }
function updateHUD(){
  document.getElementById('score').textContent=score;
  document.getElementById('length').textContent=snake.length;
  const best=Math.max(score, +(localStorage.getItem('pe_best')||0));
  document.getElementById('best').textContent=best;
  document.getElementById('speed').textContent=(boost).toFixed(1)+'×';
  document.getElementById('speedBar').style.width=Math.min(100,(boost-1)/2*100)+'%';
  document.getElementById('status').textContent = !alive?'💥 Crashed!': paused?'⏸ Paused': auto?'Auto demo ▶':'Driving 🚂';
}
function setDir(x,y){ if(dir.x!==-x||dir.y!==-y) nextDir={x,y}; }
function autoPilot(){
  if(!auto||!alive) return;
  const target=vip||food; if(!target) return;
  const head=snake[0];
  const dx=target.x-head.x, dy=target.y-head.y;
  // prefer larger axis, avoid walls / self if possible
  const opts=[];
  if(Math.abs(dx)>Math.abs(dy)) { if(dx!==0)opts.push({x:Math.sign(dx),y:0}); if(dy!==0)opts.push({x:0,y:Math.sign(dy)}); }
  else { if(dy!==0)opts.push({x:0,y:Math.sign(dy)}); if(dx!==0)opts.push({x:Math.sign(dx),y:0}); }
  // add fallbacks
  opts.push({x:1,y:0},{x:-1,y:0},{x:0,y:1},{x:0,y:-1});
  for(const o of opts){
    if(dir.x===-o.x&&dir.y===-o.y) continue;
    const nx=head.x+o.x, ny=head.y+o.y;
    if(nx<0||ny<0||nx>=COLS||ny>=ROWS) continue;
    // don't run into body (except tail)
    if(snake.slice(0,-1).some(s=>s.x===nx&&s.y===ny)) continue;
    // prefer move that reduces distance, but allow any safe
    setDir(o.x,o.y); return;
  }
}
function burst(p,color){ for(let i=0;i<10;i++) particles.push({x:p.x*CW+CW/2,y:p.y*CH+CH/2,vx:(Math.random()-.5)*5,vy:(Math.random()-.5)*5,life:20,color}); }

function step(){
  if(!alive||paused) return;
  autoPilot();
  dir=nextDir;
  const head={x:snake[0].x+dir.x,y:snake[0].y+dir.y};
  if(head.x<0||head.y<0||head.x>=COLS||head.y>=ROWS||snake.some(s=>s.x===head.x&&s.y===head.y)){ alive=false; burst(snake[0],'#fff'); updateHUD(); return; }
  snake.unshift(head);
  if(food&&head.x===food.x&&head.y===food.y){ score+=10; burst(food,'#ffd166'); spawnFood(); speedMs=Math.max(70,speedMs-4); }
  else if(vip&&head.x===vip.x&&head.y===vip.y){ score+=30; burst(vip,'#c77dff'); vip=null; setTimeout(spawnVIP,2500); speedMs=Math.max(70,speedMs-3); }
  else snake.pop();
  tick++; updateHUD();
}
function drawPerson(x,y,color,name,vipP){
  const cx=x*CW+CW/2, cy=y*CH+CH/2;
  ctx.save();
  ctx.shadowColor='rgba(0,0,0,.35)';ctx.shadowBlur=6;ctx.shadowOffsetY=3;
  ctx.fillStyle=color; ctx.beginPath(); ctx.arc(cx,cy+7,13,0,7); ctx.fill();
  ctx.fillStyle='#ffe0bd'; ctx.beginPath(); ctx.arc(cx,cy-4,9,0,7); ctx.fill();
  ctx.fillStyle = vipP?'#7b2cbf':'#40331f'; ctx.beginPath(); ctx.arc(cx,cy-8,7,Math.PI,0); ctx.fill();
  ctx.fillStyle='#222'; ctx.fillRect(cx-4,cy-4,2.5,2.5); ctx.fillRect(cx+2,cy-4,2.5,2.5);
  ctx.strokeStyle='#222';ctx.lineWidth=1.6;ctx.beginPath();ctx.arc(cx,cy+1,3,0,Math.PI);ctx.stroke();
  ctx.restore();
  if(name){ ctx.fillStyle='rgba(0,0,0,.65)'; ctx.fillRect(cx-20,cy-30,40,13); ctx.fillStyle='#fff';ctx.font='bold 9px system-ui';ctx.textAlign='center';ctx.fillText(name,cx,cy-20); }
  if(vipP){ ctx.fillStyle='#ffd166'; ctx.font='13px serif'; ctx.textAlign='center'; ctx.fillText('👑',cx,cy-26); }
}

function draw(){
  // grass
  const g=ctx.createLinearGradient(0,0,0,canvas.height); g.addColorStop(0,'#8ed081'); g.addColorStop(1,'#5da85a'); ctx.fillStyle=g; ctx.fillRect(0,0,canvas.width,canvas.height);
  // checker subtle grass
  ctx.fillStyle='rgba(255,255,255,.06)';
  for(let y=0;y<ROWS;y++)for(let x=0;x<COLS;x++) if((x+y)%2) ctx.fillRect(x*CW,y*CH,CW,CH);
  // tracks (grid lines as rails)
  ctx.strokeStyle='rgba(80,60,30,.35)';ctx.lineWidth=3;
  for(let x=0;x<=COLS;x++){ctx.beginPath();ctx.moveTo(x*CW,0);ctx.lineTo(x*CW,canvas.height);ctx.stroke();}
  for(let y=0;y<=ROWS;y++){ctx.beginPath();ctx.moveTo(0,y*CH);ctx.lineTo(canvas.width,y*CH);ctx.stroke();}
  ctx.strokeStyle='rgba(255,255,255,.5)';ctx.lineWidth=1;
  for(let x=0;x<=COLS;x++){ctx.beginPath();ctx.moveTo(x*CW,0);ctx.lineTo(x*CW,canvas.height);ctx.stroke();}
  // platforms top & bottom
  ctx.fillStyle='#c9a86a'; ctx.fillRect(0,0,canvas.width,CH*1.15); ctx.fillRect(0,canvas.height-CH*1.15,canvas.width,CH*1.15);
  ctx.fillStyle='#8a6d3b'; ctx.fillRect(0,CH*1.15,canvas.width,6); ctx.fillRect(0,canvas.height-CH*1.15-6,canvas.width,6);
  ctx.fillStyle='#5b4636'; ctx.font='bold 13px system-ui'; ctx.textAlign='left';
  ctx.fillText('PLATFORM 1  •  PASSENGERS WAITING →',12,CH*0.75);
  ctx.fillText('← PLATFORM 2  •  MIND THE GAP!',12,canvas.height-CH*0.35);
  // station signs
  ctx.fillStyle='#b91c1c'; ctx.fillRect(canvas.width-175,4,165,28); ctx.fillStyle='#fff';ctx.textAlign='center';ctx.font='bold 13px system-ui';ctx.fillText('★ EXPRESS STATION ★',canvas.width-92,22);
  ctx.fillStyle='#1d4ed8'; ctx.fillRect(8,canvas.height-CH*1.15+8,150,24); ctx.fillStyle='#fff';ctx.fillText('NEXT: FUN CITY',83,canvas.height-CH*0.6);
  // trees / houses deco
  ctx.font='22px serif'; const deco=[[2,3,'🌳'],[21,3,'🌲'],[2,11,'🌲'],[21,11,'🌳'],[11,2,'🏠'],[12,12,'🏠']];
  deco.forEach(d=>{ctx.textAlign='center';ctx.fillText(d[2],d[0]*CW+CW/2,d[1]*CH+CH/2+7);});

  if(food) drawPerson(food.x,food.y,'#ffd166',food.name,false);
  if(vip) drawPerson(vip.x,vip.y,'#c77dff','VIP',true);

  // draw wagons tail to head
  for(let i=snake.length-1;i>=0;i--){
    const s=snake[i], cx=s.x*CW, cy=s.y*CH, isHead=i===0;
    const color=isHead?'#e63946':WAGON_COLORS[i%WAGON_COLORS.length];
    ctx.save();
    ctx.shadowColor='rgba(0,0,0,.4)';ctx.shadowBlur=5;ctx.shadowOffsetY=3;
    // wagon body rounded
    ctx.fillStyle=color; roundRect(cx+3,cy+8,CW-6,CH-14,7); ctx.fill();
    ctx.fillStyle='rgba(255,255,255,.35)'; roundRect(cx+5,cy+10,CW-10,8,4); ctx.fill();
    if(isHead){
      // locomotive front
      ctx.fillStyle='#f1fa8c'; roundRect(cx+26,cy+12,10,12,2); ctx.fill(); // window light
      ctx.fillStyle='#2b2d42'; roundRect(cx+CW-9,cy+14,6,9,2); ctx.fill(); // nose
      ctx.fillStyle='#fff'; ctx.beginPath();ctx.arc(cx+16,cy+13,6,0,7);ctx.fill(); // driver
      ctx.fillStyle='#222'; ctx.fillRect(cx+13,cy+11,2,2); ctx.fillRect(cx+17,cy+11,2,2);
      ctx.fillStyle='#fff'; ctx.font='bold 14px serif'; ctx.textAlign='center'; ctx.fillText('🚂',cx+CW/2,cy+CH/2+5);
    } else {
      // passengers inside wagon
      ctx.fillStyle='#fff'; ctx.font='11px serif'; ctx.textAlign='center';
      ctx.fillText(i%2?'🧑':'👧',cx+CW/2-7,cy+CH/2+4); ctx.fillText(i%2?'👩':'🧑‍🦱',cx+CW/2+7,cy+CH/2+4);
      ctx.fillStyle='#00000055'; ctx.font='bold 8px system-ui'; ctx.fillText('W'+i,cx+CW/2,cy+CH-5);
    }
    // wheels
    ctx.fillStyle='#222'; [[cx+8,cy+CH-7],[cx+CW-14,cy+CH-7]].forEach(w=>{ctx.beginPath();ctx.arc(w[0],w[1],4,0,7);ctx.fill();});
    // coupling
    ctx.restore();
  }
  // smoke from loco
  if(alive && tick%6===0 && snake.length){ const h=snake[0]; particles.push({x:h.x*CW+20,y:h.y*CH+6,vx:-0.6,vy:-1.2,life:18,color:'rgba(255,255,255,.7)',smoke:true}); }
  // particles
  particles=particles.filter(p=>p.life>0);
  particles.forEach(p=>{p.x+=p.vx;p.y+=p.vy;p.life--; ctx.globalAlpha=Math.max(0,p.life/20); ctx.fillStyle=p.color; ctx.beginPath(); ctx.arc(p.x,p.y,p.smoke?6:3,0,7); ctx.fill(); ctx.globalAlpha=1;});

  if(!alive){ ctx.fillStyle='rgba(0,0,0,.55)';ctx.fillRect(0,0,canvas.width,canvas.height); ctx.fillStyle='#fff';ctx.textAlign='center';ctx.font='900 42px system-ui';ctx.fillText('💥 Derailment!',canvas.width/2,canvas.height/2-10); ctx.font='18px system-ui';ctx.fillText('You collected '+score+' pts • Press R or New Train to try again',canvas.width/2,canvas.height/2+25); }
}
function roundRect(x,y,w,h,r){ctx.beginPath();ctx.moveTo(x+r,y);ctx.arcTo(x+w,y,x+w,y+h,r);ctx.arcTo(x+w,y+h,x,y+h,r);ctx.arcTo(x,y+h,x,y,r);ctx.arcTo(x,y,x+w,y,r);ctx.closePath();}

let timer=0,last=0;
function loop(ts){ requestAnimationFrame(loop); if(ts-last>speedMs/boost){ step(); last=ts; } draw(); }
reset(); requestAnimationFrame(loop);

// controls
const overlay=document.getElementById('overlay'), startBtn=document.getElementById('startBtn');
function startGame(){ started=true; overlay.classList.add('hide'); auto=false; document.getElementById('autoBtn').textContent='🤖 Auto: OFF'; updateHUD(); }
startBtn.onclick=startGame;
document.getElementById('stage').addEventListener('pointerdown',()=>{ if(overlay.style.display!=='none'&&started===false) startGame(); });
window.addEventListener('keydown',e=>{
  if(!started) startGame();
  const k=e.key.toLowerCase();
  if(k==='arrowup'||k==='w') setDir(0,-1);
  else if(k==='arrowdown'||k==='s') setDir(0,1);
  else if(k==='arrowleft'||k==='a') setDir(-1,0);
  else if(k==='arrowright'||k==='d') setDir(1,0);
  else if(k===' '){paused=!paused;updateHUD();}
  else if(k==='r'){reset();}
  else return;
  e.preventDefault();
});
document.querySelectorAll('.arrows button').forEach(b=>b.onclick=()=>{ if(!started)startGame(); const d=b.dataset.dir; if(d==='up')setDir(0,-1); if(d==='down')setDir(0,1); if(d==='left')setDir(-1,0); if(d==='right')setDir(1,0); });
document.getElementById('pauseBtn').onclick=()=>{paused=!paused;updateHUD();};
document.getElementById('resetBtn').onclick=()=>{ if(!started)startGame(); reset(); };
document.getElementById('autoBtn').onclick=(e)=>{auto=!auto;e.target.textContent='🤖 Auto: '+(auto?'ON':'OFF');updateHUD();};
document.getElementById('parkBtn').onclick=()=>{boost=boost>=2.5?1:boost+0.5;updateHUD();};
// swipe
let tx=0,ty=0;
canvas.addEventListener('touchstart',e=>{tx=e.touches[0].clientX;ty=e.touches[0].clientY;},{passive:true});
canvas.addEventListener('touchmove',e=>{const dx=e.touches[0].clientX-tx,dy=e.touches[0].clientY-ty; if(Math.abs(dx)>24||Math.abs(dy)>24){ if(Math.abs(dx)>Math.abs(dy))setDir(Math.sign(dx),0);else setDir(0,Math.sign(dy)); tx=e.touches[0].clientX;ty=e.touches[0].clientY; }},{passive:true});
</script>
</body>
</html>