App.jsx

// import Board from "./board.jsx"
import { useEffect, useRef, useState } from 'react';
import './App.css';

function App() {

  const [direction, setdirection] = useState({ x: 0, y: 1 })
  const [snakeArr, setSnakeArr] = useState([{ x: 6, y: 7 }]);
  const [food, setfood] = useState({ x: 5, y: 4 })
  const directionRef = useRef(direction)
  const [gameOver, setgameOver] = useState(false)
  function generateFood() {
    let x = Math.floor(Math.random() * 20)
    let y = Math.floor(Math.random() * 20)
    setfood({ x, y })
  }
  useEffect(() => {
    directionRef.current = direction
  }, [direction])
  useEffect(() => {
    function keypress(e) {
      if (e.key === 'ArrowUp') setdirection({ x: -1, y: 0 })
      if (e.key === 'ArrowDown') setdirection({ x: 1, y: 0 })
      if (e.key === 'ArrowRight') setdirection({ x: 0, y: 1 })
      if (e.key === 'ArrowLeft') setdirection({ x: 0, y: -1 })
    }
    window.addEventListener('keydown', keypress);
    return () => window.removeEventListener('keydown', keypress)
  }, [])

  useEffect(() => {
    if (gameOver) return;
    const interval = setInterval(() => {
      setSnakeArr(prev => {
        const head = prev[0];
        const newHead = {
          x: head.x + directionRef.current.x,
          y: head.y + directionRef.current.y,
        };
        checkCollision(newHead, prev
        )
        const iseating = newHead.x === food.x && newHead.y === food.y;
        if (iseating) {
          generateFood()
          return [newHead, ...prev];
        }
        else {

          return [newHead, ...prev.slice(0, -1)];
        }
      });
    }, 170);

    return () => clearInterval(interval);
  }, [direction, food]);
  function checkCollision(head, snake) {
    //wall collision
    if (head.x < 0 || head.x >= 20 || head.y < 0 || head.y >= 20) {
      setgameOver(true)
    }
    //snake collison
    for (let i = 0; i < snake.length; i++) {
      if (head.x == snake[i].x && head.y == snake[i].y) {
        setgameOver(true)
      }
    }
  }
  return (
    <div style={{position:"relative"}}>
      <h1>Snake Game</h1>
     

      <div className="controls">
        <p>Score: {snakeArr.length}</p>
        <button onClick={() => {
          setSnakeArr([{ x: 6, y: 7 }]);
          setfood({ x: 5, y: 4 });
          setdirection({ x: 0, y: 1 });
          setgameOver(false);
        }}>Start New Game</button>
      </div>
      <div className="board">
      {gameOver && (
        <div className="game-over">
          <h2>Game Over!</h2>
        </div>
      )}
        {snakeArr.map((segment, index) => (
          <div
            key={index}
            className="snake"
            style={{
              gridColumn: segment.y + 1, // grid is 1-indexed
              gridRow: segment.x + 1,
            }}
          ></div>
        ))}
        <div
          className="snake-food"
          style={{

            gridColumn: food.y + 1,
            gridRow: food.x + 1,

          }}
        ></div>

      </div>

    </div>
  )
}

export default App;