rewrite the game for me to make it more responsible and smooth:

import React, { useState, useEffect, useRef } from "react";

// Constants
const GRAVITY = 980;  // Pixels per second squared
const JUMP_STRENGTH = -600; // Pixels per second
const MOVE_SPEED = 500; // Pixels per second
const PLAYER_WIDTH = 50;
const PLAYER_HEIGHT = 50;
const PLATFORM_WIDTH = 300; // Reduced width to make the game more challenging
const PLATFORM_HEIGHT = 120;
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 600; // Increased height for more vertical space

// Platform component
const Platform = ({ width, height, top, left }) => (
  <div
    style={{
      position: "absolute",
      width: `${width}px`,
      height: `${height}px`,
      backgroundColor: "brown",
      left: `${left}px`,
      top: `${top}px`,
    }}
  />
);

// Player component
const Player = ({position}) => (
  <div
    style={{
      position: "absolute",
      width: `${PLAYER_WIDTH}px`,
      height: `${PLAYER_HEIGHT}px`,
      backgroundColor: "blue",
      left: `${VIEW_WIDTH / 2 - PLAYER_WIDTH / 2}px`,
      top: `${position.y}px`,
      zIndex: 2,
    }}
  />
);
function GameMain() {
    const [playerPosition, setPlayerPosition] = useState({
      x: VIEW_WIDTH / 2, // Start player in the center of the view
      y: VIEW_HEIGHT - PLATFORM_HEIGHT - PLAYER_HEIGHT, // Start player on top of initial platform
    });
    const [playerVelocity, setPlayerVelocity] = useState({ x: 0, y: 0 });
    const [isGrounded, setIsGrounded] = useState(true); // Start player as grounded
    const [platforms, setPlatforms] = useState([
      // Initial platform to cover the bottom of the screen
      { width: VIEW_WIDTH, height: PLATFORM_HEIGHT, top: VIEW_HEIGHT - PLATFORM_HEIGHT, left: 0 },
    ]);
  
    const lastTimeRef = useRef(performance.now());
    const keysPressed = useRef({ left: false, right: false, jump: false });
  
    // Create new platform to the right of the last platform
    const createNewPlatform = () => ({
      width: PLATFORM_WIDTH,
      height: PLATFORM_HEIGHT,
      top: Math.max(PLATFORM_HEIGHT, Math.random() * (VIEW_HEIGHT - PLATFORM_HEIGHT - 10)),
      left: platforms[platforms.length - 1].left + PLATFORM_WIDTH + Math.random() * 400 + 200,
    });
  
    // Check collision between player and platforms
// Check collision between player and platforms
const checkCollisionWithPlatforms = () => {
  const playerRect = {
    left: playerPosition.x - PLAYER_WIDTH / 2,
    top: playerPosition.y,
    right: playerPosition.x + PLAYER_WIDTH / 2,
    bottom: playerPosition.y + PLAYER_HEIGHT,
  };

  for (let i = 0; i < platforms.length; i++) {
    const platform = platforms[i];
    const platformRect = {
      left: platform.left,
      top: platform.top,
      right: platform.left + platform.width,
      bottom: platform.top + platform.height,
    };
    if (
      playerRect.right > platformRect.left &&
      playerRect.left < platformRect.right &&
      playerRect.top > platformRect.top &&
      playerRect.top < platformRect.bottom
     ) {
      // Colliding with platform, return the platform
      return platform;
     }
  }
  // No collision with any platforms
  return null;
};
    // Game loop
    const gameLoop = () => {
      const now = performance.now();
      const deltaTime = (now - lastTimeRef.current) / 1000.0;
      lastTimeRef.current = now;
     
      // Check for collisions
      const collided = checkCollisionWithPlatforms();
  
      // Update player velocity and position
      const newVelocity = { ...playerVelocity };
      let newPositionX = playerPosition.x;
      if (keysPressed.current.left) {
        newPositionX -= MOVE_SPEED * deltaTime;
      }
      if (keysPressed.current.right) {
        newPositionX += MOVE_SPEED * deltaTime;
      }
      let newPositionY = playerPosition.y;
      if (!isGrounded) {
        newVelocity.y += GRAVITY * deltaTime; // Gravity
       } else {
        newVelocity.y = 0;
       }
       if (keysPressed.current.jump && isGrounded) {
        newVelocity.y = JUMP_STRENGTH; // Jump
        setIsGrounded(false);
        keysPressed.current.jump = false; // Prevent multi-jumping
       }
       newPositionY = Math.max(0, newPositionY + newVelocity.y * deltaTime);
       
// Collision response
if (collided) {
  setIsGrounded(true);
  newPositionY = collided.top - PLAYER_HEIGHT; // Now, the newPositionY is set to the top of the collided platform
} else {
  setIsGrounded(false);
}
       


      // Create new platform if the last platform is at a certain distance to the left
      if (platforms[platforms.length - 1].left < playerPosition.x + VIEW_WIDTH) {
        setPlatforms([...platforms, createNewPlatform()]);
      }
  
      // Remove platforms that have gone offscreen to the left
      const visiblePlatforms = platforms.filter((platform) => platform.left > playerPosition.x - VIEW_WIDTH);
  
       // Set the new position state
       setPlayerPosition({ x: newPositionX, y: newPositionY });
       setPlayerVelocity(newVelocity);

      setPlatforms(visiblePlatforms);
     
      requestAnimationFrame(gameLoop);
    };
  
    useEffect(() => {
      function handleKeyDown({ key }) {
        if (key === "ArrowLeft") keysPressed.current.left = true;
        if (key === "ArrowRight") keysPressed.current.right = true;
        if (key === "ArrowUp") keysPressed.current.jump = true;
      }
  
      function handleKeyUp({ key }) {
        if (key === "ArrowLeft") keysPressed.current.left = false;
        if (key === "ArrowRight") keysPressed.current.right = false;
        if (key === "ArrowUp") keysPressed.current.jump = false; // Handle Space key for jumping on key up
      }
  
      window.addEventListener("keydown", handleKeyDown);
      window.addEventListener("keyup", handleKeyUp);
  
      requestAnimationFrame(gameLoop);
  
      return () => {
        window.removeEventListener("keydown", handleKeyDown);
        window.removeEventListener("keyup", handleKeyUp);
      };
    }, []);
  
    return (
      <div
        style={{
          position: "relative",
          width: `${VIEW_WIDTH}px`,
          height: `${VIEW_HEIGHT}px`,
          overflow: "hidden",
          backgroundColor: "lightblue",
        }}
      >
        {/* Update Player component prop */}
        <Player position={playerPosition} />
        {platforms.map((platform, index) => (
          <Platform
            key={index}
            {...platform}
            left={platform.left - playerPosition.x + VIEW_WIDTH / 2}
            top={platform.top}
          />
        ))}
      </div>
    );
  }
  
  export default GameMain;