Crie Jogo Mario Bros

import React, { useState, useEffect } from 'react';
import './App.css';

const App = () => {
  const [position, setPosition] = useState(0);
  const [jump, setJump] = useState(false);

  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === 'ArrowRight') {
        setPosition((prev) => prev + 10);
      } else if (event.key === 'ArrowLeft') {
        setPosition((prev) => prev - 10);
      } else if (event.key === ' ') {
        setJump(true);
        setTimeout(() => setJump(false), 500);
      }
    };

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

  return (
    <div className="App bg-blue-200 min-h-screen flex flex-col justify-center items-center">
      <div className="game-container bg-green-500 w-4/5 h-96 relative overflow-hidden">
        <div
          className={`mario bg-red-500 w-12 h-12 absolute bottom-0 ${jump ? 'animate-jump' : ''}`}
          style={{ left: `${position}px` }}
        ></div>
        <div className="ground bg-brown-500 w-full h-12 absolute bottom-0"></div>
      </div>
      <div className="controls mt-4">
        <p className="text-gray-700">Use Arrow Keys to Move and Space to Jump</p>
      </div>
    </div>
  );
};

export default App;