gpt-oss-120b

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Snake Demo</title>
<style>
  html,body{margin:0;height:100%;background:#111;color:#eee;font-family:sans-serif;display:flex;align-items:center;justify-content:center;}
  #game{position:relative;display:flex;flex-direction:column;align-items:center;}
  canvas{background:#222;image-rendering:pixelated;}
  #overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,0.7);color:#fff;font-size:1.2rem;pointer-events:none;opacity:0;transition:opacity .3s;}
  #overlay.show{opacity:1;}
  #msg{margin-top:0.5rem;font-size:.9rem;color:#aaa;}
  #scoreboard{margin-top:0.5rem;font-size:.9rem;}
</style>
</head>
<body>
<div id="game">
  <canvas id="c"></canvas>
  <div id="overlay"><div id="status"></div><div id="msg">Click or press a key to start</div></div>
  <div id="scoreboard">Score: <span id="score">0</span> | Best: <span id="best">0</span></div>
</div>
<script>
(() => {
  const canvas = document.getElementById('c');
  const ctx = canvas.getContext('2d');
  const overlay = document.getElementById('overlay');
  const status = document.getElementById('status');
  const scoreEl = document.getElementById('score');
  const bestEl = document.getElementById('best');

  const GRID = 20;
  const CELL = 20; // pixel size
  const WIDTH = GRID * CELL;
  const HEIGHT = GRID * CELL;
  canvas.width = WIDTH;
  canvas.height = HEIGHT;

  const dirs = {
    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}
  };
  let snake, dir, nextDir, food, particles, score, best, paused, running, aiMode;
  function init() {
    snake = [{x:10,y:10}];
    dir = {x:0,y:-1};
    nextDir = dir;
    placeFood();
    particles=[];
    score=0;
    paused=false;
    running=false;
    aiMode=false;
    updateScore();
    overlay.classList.add('show');
    status.textContent='Press any key to start';
  }
  function placeFood(){
    let pos;
    do{
      pos={x:Math.floor(Math.random()*GRID),y:Math.floor(Math.random()*GRID)};
    }while(snake.some(s=>s.x===pos.x&&s.y===pos.y));
    food=pos;
  }
  function updateScore(){
    scoreEl.textContent=score;
    best=Math.max(best||0,score);
    bestEl.textContent=best;
  }
  function drawCell(x,y,color){
    ctx.fillStyle=color;
    ctx.fillRect(x*CELL,y*CELL,CELL,CELL);
  }
  function draw(){
    ctx.clearRect(0,0,WIDTH,HEIGHT);
    // food
    drawCell(food.x,food.y,'red');
    // snake
    snake.forEach((seg,i)=>{
      const isHead=i===0;
      const col=isHead?'lime':'green';
      drawCell(seg.x,seg.y,col);
      if(isHead){
        // eyes
        ctx.fillStyle='black';
        const eyeOffset = 2;
        const ex = seg.x*CELL + CELL/2 + dir.x*eyeOffset;
        const ey = seg.y*CELL + CELL/2 + dir.y*eyeOffset;
        ctx.beginPath();
        ctx.arc(ex-4,ey-4,2,0,2*Math.PI);
        ctx.arc(ex+4,ey-4,2,0,2*Math.PI);
        ctx.fill();
      }
    });
    // particles
    particles.forEach(p=>{
      ctx.fillStyle=`rgba(255,215,0,${p.life})`;
      ctx.fillRect(p.x*CELL,p.y*CELL,CELL,CELL);
    });
  }
  function step(){
    if(paused||!running)return;
    // direction handling
    if(Math.abs(nextDir.x)!==Math.abs(dir.x) || Math.abs(nextDir.y)!==Math.abs(dir.y)){
      dir = nextDir;
    }
    const head = {x:snake[0].x+dir.x, y:snake[0].y+dir.y};
    // wall collide
    if(head.x<0||head.x>=GRID||head.y<0||head.y>=GRID||snake.some(s=>s.x===head.x&&s.y===head.y)){
      gameOver();
      return;
    }
    snake.unshift(head);
    // food
    if(head.x===food.x && head.y===food.y){
      score+=10;
      updateScore();
      spawnParticles(head);
      placeFood();
    }else{
      snake.pop();
    }
    // update particles
    particles.forEach(p=>p.life-=0.05);
    particles = particles.filter(p=>p.life>0);
    draw();
  }
  function spawnParticles(pos){
    for(let i=0;i<8;i++){
      particles.push({x:pos.x,y:pos.y,life:1});
    }
  }
  function gameOver(){
    running=false;
    overlay.classList.add('show');
    status.textContent=`Game Over – Score ${score} (Press Space/Enter)`;
  }
  function start(){
    running=true;
    overlay.classList.remove('show');
    aiMode=true;
  }
  function pauseToggle(){
    paused=!paused;
    overlay.classList.toggle('show',paused);
    status.textContent=paused?'Paused – Press P to resume':'';
  }
  // AI: simple greedy towards food
  function aiStep(){
    if(!aiMode) return;
    const head=snake[0];
    const dx=food.x-head.x;
    const dy=food.y-head.y;
    const prefers = [];
    if(Math.abs(dx)>Math.abs(dy)){
      prefers.push(dx>0?dirs.d:dirs.a);
      prefers.push(dy>0?dirs.s:dirs.w);
    }else{
      prefers.push(dy>0?dirs.s:dirs.w);
      prefers.push(dx>0?dirs.d:dirs.a);
    }
    for(const d of prefers){
      const nx=head.x+d.x, ny=head.y+d.y;
      if(nx<0||nx>=GRID||ny<0||ny>=GRID) continue;
      if(snake.some(s=>s.x===nx&&s.y===ny)) continue;
      nextDir=d;
      break;
    }
  }

  document.addEventListener('keydown',e=>{
    if(!running){
      start();
    }
    if(e.key==='p' || e.key==='P'){
      pauseToggle();
      return;
    }
    if(!running) return;
    if(e.key===' '|| e.key==='Enter'){
      init();
      start();
      return;
    }
    const d = dirs[e.key];
    if(d){
      // prevent reverse
      if(d.x===-dir.x && d.y===-dir.y) return;
      nextDir=d;
    }
  });
  document.addEventListener('click',()=>{if(!running) start();});

  init();
  setInterval(()=>{
    aiStep();
    step();
  },100);
})();
</script>
</body>
</html>