برمجة لعبة سناك باستخدام رياكت snake game by react

				
					// components/GameBoard.js
import React, { useState, useEffect, useCallback } from 'react';
import Snake from './Snake';
import Food from './Food';

const getRandomPosition = () => [Math.floor(Math.random() * 20) * 5, Math.floor(Math.random() * 20) * 5];
const boardSize = 500; // حجم اللوحة

const GameBoard = () => {
  const [snake, setSnake] = useState([[0, 0], [5, 0]]);
  const [food, setFood] = useState(getRandomPosition());
  const [direction, setDirection] = useState('');
  const [isGameOver, setIsGameOver] = useState(false);
  const [gameStarted, setGameStarted] = useState(false); // حالة تتبع بداية اللعبة

  // التحقق من التصادم
  const checkCollision = useCallback((head) => {
    // التصادم مع الجدران
    if (head[0] >= boardSize || head[0] < 0 || head[1] >= boardSize || head[1] < 0) {
      return true;
    }
    // التصادم مع الجسم
    for (let segment of snake) {
      if (segment[0] === head[0] && segment[1] === head[1]) {
        return true;
      }
    }
    return false;
  }, [snake]);

  const moveSnake = useCallback(() => {
    if (!gameStarted || isGameOver) return; // ابدأ التحريك فقط إذا كانت اللعبة قد بدأت ولم تنتهي

    const newSnake = [...snake];
    const head = newSnake[newSnake.length - 1];

    let newHead;
    switch (direction) {
      case 'UP':
        newHead = [head[0], head[1] - 5];
        break;
      case 'DOWN':
        newHead = [head[0], head[1] + 5];
        break;
      case 'LEFT':
        newHead = [head[0] - 5, head[1]];
        break;
      case 'RIGHT':
        newHead = [head[0] + 5, head[1]];
        break;
      default:
        return;
    }

    newSnake.push(newHead);
    newSnake.shift();

    if (checkCollision(newHead)) {
      setIsGameOver(true);
      return;
    }

    setSnake(newSnake);

    if (newHead[0] === food[0] && newHead[1] === food[1]) {
      setFood(getRandomPosition());
      newSnake.unshift([]); // Add new segment to snake
    }
  }, [snake, direction, food, checkCollision, gameStarted, isGameOver]);

  useEffect(() => {
    if (!gameStarted || isGameOver) return; // ابدأ التحريك فقط إذا كانت اللعبة قد بدأت ولم تنتهي
    const interval = setInterval(moveSnake, 200);
    return () => clearInterval(interval);
  }, [moveSnake, gameStarted, isGameOver]);

  // استخدام لوحة المفاتيح للحركة
  useEffect(() => {
    const handleKeyDown = (event) => {
      if (isGameOver) return;

      if (!gameStarted) setGameStarted(true); // ابدأ اللعبة عند الضغط على مفتاح سهم

      switch (event.key) {
        case 'ArrowUp':
          setDirection('UP');
          break;
        case 'ArrowDown':
          setDirection('DOWN');
          break;
        case 'ArrowLeft':
          setDirection('LEFT');
          break;
        case 'ArrowRight':
          setDirection('RIGHT');
          break;
        default:
          break;
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isGameOver, gameStarted]);

  // إعادة تشغيل اللعبة
  const resetGame = () => {
    setSnake([[0, 0], [5, 0]]);
    setFood(getRandomPosition());
    setDirection('');
    setIsGameOver(false);
    setGameStarted(false); // إعادة الحالة لبداية جديدة
  };

  return (
    <div className="game-board">
      {isGameOver ? (
        <div className="game-over">
          <h2>Game Over!</h2>
          <button onClick={resetGame}>Restart</button>
        </div>
      ) : (
        <>
          <Snake segments={snake} />
          <Food position={food} />
        </>
      )}
    </div>
  );
};

export default GameBoard;