gpt-oss-120b

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Train Snake Demo</title>
<style>
  html,body{margin:0;height:100%;overflow:hidden;background:#222;color:#fff;font-family:sans-serif;}
  #game{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}
  canvas{background:#111;border:2px solid #555;}
  #overlay{
    position:absolute;top:0;left:0;width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    background:rgba(0,0,0,0.7);color:#0f0;font-size:1.5rem;cursor:pointer;
  }
</style>
</head>
<body>
<div id="game">
  <canvas id="c" width="600" height="600"></canvas>
  <div id="overlay">Click or press a key to start</div>
</div>
<script>
(() => {
  const canvas = document.getElementById('c');
  const ctx = canvas.getContext('2d');
  const overlay = document.getElementById('overlay');
  const cols = 30, rows = 30, cell = 20;
  const colors = ['#e74c3c','#f1c40f','#2ecc71','#3498db','#9b59b6'];
  let train, passengers, running, intervalId;

  // Train segment class
  class Segment{
    constructor(x,y,color){
      this.x=x;this.y=y;this.color=color;
    }
    draw(){ 
      ctx.fillStyle=this.color;
      ctx.fillRect(this.x*cell,this.y*cell,cell,cell);
    }
  }

  function init(){
    train = [
      new Segment(5,15,'#ff6f00'), // locomotive
      new Segment(4,15,colors[0]),
      new Segment(3,15,colors[1])
    ];
    passengers = generatePassengers(5);
    running = false;
    draw();
  }

  function generatePassengers(n){
    const pts=[];
    while(pts.length<n){
      const x=Math.floor(Math.random()*cols);
      const y=Math.floor(Math.random()*rows);
      if(!train.some(s=>s.x===x&&s.y===y) && !pts.some(p=>p.x===x&&p.y===y)){
        pts.push({x,y});
      }
    }
    return pts;
  }

  function draw(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    // platform (grid)
    ctx.strokeStyle='#333';
    for(let i=0;i<=cols;i++){
      ctx.beginPath();
      ctx.moveTo(i*cell,0);
      ctx.lineTo(i*cell,canvas.height);
      ctx.stroke();
    }
    for(let i=0;i<=rows;i++){
      ctx.beginPath();
      ctx.moveTo(0,i*cell);
      ctx.lineTo(canvas.width,i*cell);
      ctx.stroke();
    }
    // passengers
    passengers.forEach(p=>{
      ctx.fillStyle='#fff';
      ctx.beginPath();
      ctx.arc((p.x+0.5)*cell,(p.y+0.5)*cell,cell/3,0,2*Math.PI);
      ctx.fill();
    });
    // train
    train.forEach(s=>s.draw());
  }

  function step(){
    // simple AI: move towards nearest passenger
    if(passengers.length===0){ passengers=generatePassengers(5); }
    const head=train[0];
    const target=nearestPassenger(head);
    const dir = decideDirection(head,target);
    const nx=head.x+dir.x, ny=head.y+dir.y;
    // wrap
    const nxw=(nx+cols)%cols, nyw=(ny+rows)%rows;
    // check self-collision (ignore tail because it moves)
    if(train.slice(1).some(s=>s.x===nxw && s.y===nyw)){
      stop();
      overlay.textContent='Game Over – Click to restart';
      overlay.style.display='flex';
      return;
    }
    // move segments
    const newHead=new Segment(nxw,nyw,'#ff6f00');
    train.unshift(newHead);
    // check passenger pickup
    const idx=passengers.findIndex(p=>p.x===nxw && p.y===nyw);
    if(idx!==-1){
      passengers.splice(idx,1);
      // add a new colored wagon
      const last=train[train.length-1];
      const wagonColor=colors[(train.length-2)%colors.length];
      train.push(new Segment(last.x,last.y,wagonColor));
    }else{
      train.pop();
    }
    draw();
  }

  function nearestPassenger(head){
    let best=passengers[0];
    let bestDist=dist(head,best);
    for(const p of passengers){
      const d=dist(head,p);
      if(d<bestDist){best=p;bestDist=d;}
    }
    return best;
  }
  function dist(a,b){return Math.abs(a.x-b.x)+Math.abs(a.y-b.y);}
  function decideDirection(head,target){
    const dx=target.x-head.x;
    const dy=target.y-head.y;
    // prioritize larger distance
    if(Math.abs(dx)>Math.abs(dy)){
      return {x:dx>0?1:-1, y:0};
    }else{
      return {x:0, y:dy>0?1:-1};
    }
  }

  function start(){
    if(running) return;
    overlay.style.display='none';
    running=true;
    intervalId=setInterval(step,120);
  }
  function stop(){
    running=false;
    clearInterval(intervalId);
  }

  overlay.addEventListener('click',start);
  document.addEventListener('keydown',e=>{
    if(!running) start();
  });

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