let snake = [{x: 10, y: 10}];
  let food = {x: 15, y: 15};
  let dx = 0;
  let dy = 0;
  let score = 0;
  
  function drawGame() {
    clearCanvas();
    moveSnake();
    drawSnake();
    drawFood();
    checkGameEnd();
  }
  
  function clearCanvas() {
    ctx.fillStyle = '#1a1b27';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  }
  
  function drawSnake() {
    ctx.fillStyle = '#61dafb';
    snake.forEach(segment => {
      ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 2, gridSize - 2);
    });
  }
  
  function moveSnake() {
    const head = {x: snake[0].x + dx, y: snake[0].y + dy};
    snake.unshift(head);
    
    if (head.x === food.x && head.y === food.y) {
      score += 10;
      document.getElementById('score').textContent = score;
      generateFood();
    } else {
      snake.pop();
    }
  }
  
  function drawFood() {
    ctx.fillStyle = '#ff6b6b';
    ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 2, gridSize - 2);
  }
  
  function generateFood() {
    food = {
      x: Math.floor(Math.random() * tileCount),
      y: Math.floor(Math.random() * tileCount)
    };
  }
  
  function checkGameEnd() {
    const head = snake[0];
    if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
      resetGame();
    }
    
    for (let i = 1; i < snake.length; i++) {
      if (head.x === snake[i].x && head.y === snake[i].y) {
        resetGame();
      }
    }
  }
  
  function resetGame() {
    snake = [{x: 10, y: 10}];
    dx = 0;
    dy = 0;
    score = 0;
    document.getElementById('score').textContent = score;
    generateFood();
  }
  
  document.addEventListener('keydown', (e) => {
    if (e.key === 'ArrowUp' || e.key === 'w' || e.key === 'W') {
      if (dy !== 1) { dx = 0; dy = -1; }
    } else if (e.key === 'ArrowDown' || e.key === 's' || e.key === 'S') {
      if (dy !== -1) { dx = 0; dy = 1; }
    } else if (e.key === 'ArrowLeft' || e.key === 'a' || e.key === 'A') {
      if (dx !== 1) { dx = -1; dy = 0; }
    } else if (e.key === 'ArrowRight' || e.key === 'd' || e.key === 'D') {
      if (dx !== -1) { dx = 1; dy = 0; }
    }
  });
  
  setInterval(drawGame, 100);
</script>