Untitled

import React, { useState, useEffect } from 'react';

interface Bird {
  x: number;
  y: number;
  velocity: number;
}

interface Pipe {
  x: number;
  y: number;
  gap: number;
}

const App = () => {
  const [bird, setBird] = useState<Bird>({ x: 100, y: 200, velocity: 0 });
  const [pipes, setPipes] = useState<Pipe[]>([]);
  const [score, setScore] = useState(0);
  const [gameOver, setGameOver] = useState(false);
useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === ' ') {
        setBird((prevBird) => ({ ...prevBird, velocity: -10 }));
      }
    };

    document.addEventListener('keydown', handleKeyDown);

    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  useEffect(() => {
    const intervalId = setInterval(() => {
      if (gameOver) returnsetBird((prevBird) => ({
        ...prevBird,
        y: prevBird.y + prevBird.velocity,
        velocity: prevBird.velocity + 0.5,
      }));

      setPipes((prevPipes) => {
        const newPipes = prevPipes.map((pipe) => ({ ...pipe, x: pipe.x - 2 }));

        if (newPipes.length === 0 || newPipes[newPipes.length - 1].x < 200) {
          newPipes.push({ x: 400, y: Math.random() * 200, gap: 150 });
        }

        return newPipes.filter((pipe) => pipe.x > -50);
      });

      setScore((prevScore) => prevScore + 1);
    }, 16);

    return () => {
      clearInterval(intervalIdimport React, { useState, useEffect } from 'react';

interface Bird {
  x: number;
  y: number;
  velocity: number;
}

interface Pipe {
  x: number;
  y: number;
  gap: number;
}
const App = () => {
  const [bird, setBird] = useState<Bird>({ x: 100, y: 200, velocity: 0 });
  const [pipes, setPipes] = useState<Pipe[]>([]);
  const [score, setScore] = useState(0);
  const [gameOver, setGameOver] = useState(false);
useEffect(() => {
    const handleKeyDown = (e: KeyboardEvent) => {
      if (e.key === ' ') {
        setBird((prevBird) => ({ ...prevBird, velocity: -10 }));
      }
    };

    document.addEventListener('keydown', handleKeyDown);

    return () => {
      document.removeEventListener('keydown', handleKeyDown);
    };
  }, []);

  useEffect(() => {
    const intervalId = setInterval(() => {
      if (gameOver) return;

      setBird((prevBird) => ({
        ...prevBird,
        y: prevBird.y + prevBird.velocity,
        velocity: prevBird.velocity + 0.5,
      }));

      setPipes((prevPipes) => {
        const newPipes = prevPipes.map((pipe) => ({ ...pipe, x: pipe.x - 2 }));

        if (newPipes.length === 0 || newPipes[newPipes.length - 1].x < 200) {
          newPipes.push({ x: 400, y: Math.random() * 200, gap: 150 });
        }return newPipes.filter((pipe) => pipe.x > -50);
      });

      setScore((prevScore) => prevScore + 1);
    }, 16);

    return () => {
      clearInterval(intervalId);
    };
  }, [gameOver]);

  useEffect(() => {
    if (bird.y > 400 || bird.y < 0) {
      setGameOver(true);
    }

    pipes.forEach((pipe) => {
      if (
        bird.x + 20 > pipe.x &&
        bird.x - 20 < pipe.x + 50 &&
        (bird.y - 20 < pipe.y || bird.y + 20 > pipe.y + pipe.gap)
      ) {
        setGameOver(true);
      }
    });
  }, [bird, pipes]);

  return (
    <div className="h-screen w-screen bg-gray-900 flex justify-center items-center">
      <div className="relative w-400 h-600">
        {gameOver && (
          <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-3xl font-bold">
            Game Over!
          </div>
        )}
        <div
          className="absolute top-0 left-0 w-full h-full bg-gray-900"
          style={{ overflow: 'hidden' }}
        >
          {pipes.map((pipe, index) => (
            <div
              key={index}
              className="absolute"
              style={{
                left: pipe.x,
                top: 0,
                width: 50,
                height: pipe.y,
                backgroundColor: 'green',
              }}
            />
          ))}
          {pipes.map((pipe, index) => (
            <div
              key={index}
              className="absolute"
style={{
                left: pipe.x,
                top: pipe.y + pipe.gap,
                width: 50,
                height: 400 - pipe.y - pipe.gap,
                backgroundColor: 'green',
              }}
            />
          ))}
          <div
            className="absolute"
            style={{
              left: bird.x,
              top: bird.y,
              width: 40,
              height: 40,
              backgroundColor: 'yellow',
              borderRadius: '50%',
            }}
          />
        </div>
        <div className="absolute top-0 left-0 w-full text-white text-xl font-bold">
          Score: {score}
        </div>
      </div>
    </div>
  );
};

export default App;