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:#111;color:#eee;font-family:sans-serif}
  #game{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
  canvas{background:#222;border:2px solid #555;box-sizing:border-box}
  #overlay{
    position:absolute;top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,0.7);color:#fff;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    font-size:1.5rem;cursor:pointer;user-select:none;z-index:10;
  }
  #score{position:absolute;top:10px;left:10px;font-size:1rem;color:#fff;z-index:5}
</style>
</head>
<body>
<div id="game">
  <canvas id="c"></canvas>
  <div id="score">Score: 0</div>
  <div id="overlay">Click or press any key to start</div>
</div>
<script>
(() => {
  const canvas = document.getElementById('c');
  const ctx = canvas.getContext('2d');
  const overlay = document.getElementById('overlay');
  const scoreEl = document.getElementById('score');

  const COLS = 20, ROWS = 20;
  const SPEED = 120; // ms per tick
  const colors = ['#e74c3c','#f1c40f','#1abc9c','#9b59b6','#3498db'];
  let cellSize, width, height;
  let train, direction, nextDir, passengers, score, timer, aiActive;

  // ---- Utility ----
  const randPos = () => ({
    x: Math.floor(Math.random()*COLS),
    y: Math.floor(Math.random()*ROWS)
  });

  const distMan = (a,b)=>Math.abs(a.x-b.x)+Math.abs(a.y-b.y);

  // ---- Init ----
  function resize() {
    const size = Math.min(window.innerWidth, window.innerHeight) * 0.9;
    width = height = Math.floor(size);
    canvas.width = width;
    canvas.height = height;
    cellSize = width / COLS;
  }
  resize();
  window.addEventListener('resize', resize);

  function reset() {
    train = [{x:Math.floor(COLS/2), y:Math.floor(ROWS/2)}]; // locomotive
    direction = {x:0, y:-1};
    nextDir = direction;
    passengers = [randPos()];
    score = 0;
    scoreEl.textContent = 'Score: 0';
    aiActive = true;
  }

  // ---- Drawing ----
  function drawCell(x,y,color){
    ctx.fillStyle = color;
    ctx.fillRect(x*cellSize, y*cellSize, cellSize, cellSize);
    ctx.strokeStyle = '#111';
    ctx.strokeRect(x*cellSize, y*cellSize, cellSize, cellSize);
  }

  function render(){
    ctx.clearRect(0,0,width,height);
    // platform (border)
    ctx.strokeStyle = '#555';
    ctx.lineWidth = 4;
    ctx.strokeRect(0,0,width,height);
    // passengers
    passengers.forEach(p=>{
      drawCell(p.x,p.y,'#fff');
    });
    // train
    train.forEach((seg,i)=>{
      const isLocomotive = i===0;
      const col = isLocomotive? '#ff6600' : colors[(i-1)%colors.length];
      drawCell(seg.x, seg.y, col);
    });
  }

  // ---- Game Logic ----
  function step(){
    // AI decides direction
    if(aiActive){
      const head = train[0];
      const target = passengers[0];
      let cand = {x:0,y:0};
      if(head.x < target.x) cand={x:1,y:0};
      else if(head.x > target.x) cand={x:-1,y:0};
      else if(head.y < target.y) cand={x:0,y:1};
      else if(head.y > target.y) cand={x:0,y:-1};

      // avoid reversing onto own body
      const nxt = {x:head.x+ cand.x, y:head.y+ cand.y};
      if(train.length>1 && nxt.x===train[1].x && nxt.y===train[1].y){
        // try orthogonal move
        const alternatives = [{x:0,y:1},{x:0,y:-1},{x:1,y:0},{x:-1,y:0}];
        for(const alt of alternatives){
          const altPos={x:head.x+alt.x, y:head.y+alt.y};
          if(!(altPos.x===train[1].x && altPos.y===train[1].y)) {cand=alt;break;}
        }
      }
      direction = cand;
    }

    // apply manual override
    direction = nextDir;

    const head = train[0];
    const newHead = {x: head.x + direction.x, y: head.y + direction.y};

    // wall collision
    if(newHead.x<0||newHead.x>=COLS||newHead.y<0||newHead.y>=ROWS){
      gameOver();
      return;
    }
    // self collision
    if(train.some(seg=>seg.x===newHead.x && seg.y===newHead.y)){
      gameOver();
      return;
    }

    train.unshift(newHead);

    // eat passenger?
    if(passengers.some(p=>p.x===newHead.x && p.y===newHead.y)){
      score++;
      scoreEl.textContent='Score: '+score;
      // new passenger
      let np;
      do { np = randPos(); } while(train.some(seg=>seg.x===np.x && seg.y===np.y));
      passengers[0]=np;
    }else{
      train.pop(); // move forward
    }

    render();
  }

  function gameOver(){
    clearInterval(timer);
    overlay.textContent = 'Game Over – Click or press any key to restart';
    overlay.style.display='flex';
    aiActive = false;
  }

  // ---- Controls ----
  document.addEventListener('keydown', e=>{
    if(overlay.style.display!=='none'){
      startGame();
      return;
    }
    const key = e.key;
    const dirMap = {
      ArrowUp:    {x:0,y:-1},
      ArrowDown:  {x:0,y:1},
      ArrowLeft:  {x:-1,y:0},
      ArrowRight: {x:1,y:0},
      w: {x:0,y:-1},
      s: {x:0,y:1},
      a: {x:-1,y:0},
      d: {x:1,y:0}
    };
    if(dirMap[key]){
      const proposed = dirMap[key];
      // prevent reverse
      if(train.length>1 && proposed.x===-direction.x && proposed.y===-direction.y) return;
      nextDir = proposed;
      aiActive = false; // player takes over
    }
  });
  overlay.addEventListener('click', startGame);

  function startGame(){
    overlay.style.display='none';
    reset();
    render();
    timer = setInterval(step, SPEED);
  }

  // initial paint
  render();
})();
</script>
</body>
</html>