the platforms are all over the place and the camera doesn't follow the player:

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

// Constants for gravity, jumping, and movement
const GRAVITY = 150;
const JUMP_STRENGTH = -25;
const MOVE_SPEED = 700;
const PLAYER_WIDTH = 50;
const PLAYER_HEIGHT = 50;
const PLATFORM_WIDTH = 400;
const PLATFORM_HEIGHT = 20;
const VIEW_WIDTH = 800;
const VIEW_HEIGHT = 500;

// 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: `${position.x}px`,
      top: `${position.y}px`,
    }}
  />
);

function GameMain() {
  const [playerPosition, setPlayerPosition] = useState({ x: 100, y: 300 });
  const [isGrounded, setIsGrounded] = useState(false);
  const [doubleJumped, setDoubleJumped] = useState(false);
  const [platforms, setPlatforms] = useState([
    { width: PLATFORM_WIDTH, height: PLATFORM_HEIGHT, top: 450, left: VIEW_WIDTH / 2 - PLATFORM_WIDTH / 2 },
  ]);
  const backgroundXRef = useRef(0); // Horizontal offset for parallax background
  const playerVelocityRef = useRef({ x: 0, y: 0 });
  const requestIdRef = useRef(null);
  const lastTimeRef = useRef(null);

  const keysPressed = useRef({ left: false, right: false, up: false, jump: false });

  const platform = { width: 400, height: 20, top: 450, left: 100 };

  const checkCollisionWithPlatform = (position, width, height) => {
    const playerRect = {
      left: position.x,
      top: position.y,
      right: position.x + width,
      bottom: position.y + height,
    };

    const platformRect = {
      left: platform.left,
      top: platform.top,
      right: platform.left + platform.width,
      bottom: platform.top + platform.height,
    };

    return (
      playerRect.right > platformRect.left &&
      playerRect.left < platformRect.right &&
      playerRect.bottom > platformRect.top &&
      playerRect.top < platformRect.bottom
    );
  };

   
   const updateGame = (time) => {
    const deltaTime = (time - (lastTimeRef.current || time)) / 1000;
    lastTimeRef.current = time;
    
    // Calculate new velocity
    let velocity = {
        x: keysPressed.current.left ? -MOVE_SPEED * deltaTime : 
           keysPressed.current.right ? MOVE_SPEED * deltaTime : 0,
        y: playerVelocityRef.current.y + GRAVITY * deltaTime,
      };
   
    // Store the x velocity
    playerVelocityRef.current.x = velocity.x;

    if (keysPressed.current.jump && isGrounded || keysPressed.current.jump && !doubleJumped) {
        if(!isGrounded){
        setDoubleJumped(true)
        }
        velocity.y = JUMP_STRENGTH;
        keysPressed.current.jump = false;

      }

    // Calculate new position
    let newPosition = {
        x: playerPosition.x + velocity.x,
        y: playerPosition.y + velocity.y,
      };

          // Platform creation and removal
    const firstPlatform = platforms[0];
    const lastPlatform = platforms[platforms.length - 1];

    // Remove off-screen platforms
    const visiblePlatforms = platforms.filter(platform => {
      const platformRightEdge = platform.left + platform.width - backgroundXRef.current;
      return platformRightEdge >= 0 && platform.left - backgroundXRef.current <= VIEW_WIDTH;
    });

    // Add a new platform if needed
    if (newPosition.x > lastPlatform.left - 200) { // Generate new platform on the right
      visiblePlatforms.push(createNewPlatform(newPosition, "right"));
    } else if (newPosition.x < firstPlatform.left + 200) { // Generate new platform on the left
      visiblePlatforms.unshift(createNewPlatform(newPosition, "left"));
    }

    setPlatforms(visiblePlatforms);

    // Update background position for parallax effect
    if (keysPressed.current.left && backgroundXRef.current < 0) {
      backgroundXRef.current += MOVE_SPEED * deltaTime;
    } else if (keysPressed.current.right) {
      backgroundXRef.current -= MOVE_SPEED * deltaTime;
    }

   
      if (checkCollisionWithPlatform(newPosition, PLAYER_WIDTH, PLAYER_HEIGHT)) {
        newPosition.y = platform.top - PLAYER_HEIGHT;
        velocity.y = 0;
        setIsGrounded(true);
        setDoubleJumped(false);
       } else {
        setIsGrounded(false);
       }
   
      setPlayerPosition(prevPosition => ({
        x: prevPosition.x + velocity.x,
        y: prevPosition.y + velocity.y,
       }));
       playerVelocityRef.current = velocity;
   
    // Request the next animation frame
    requestIdRef.current = requestAnimationFrame(updateGame);
   };
  
   const createNewPlatform = (playerPosition, direction) => {
    const newTop = Math.random() * (VIEW_HEIGHT - PLATFORM_HEIGHT);
    return direction === "right"
      ? { width: PLATFORM_WIDTH, height: PLATFORM_HEIGHT, top: newTop, left: playerPosition.x + 300 }
      : { width: PLATFORM_WIDTH, height: PLATFORM_HEIGHT, top: newTop, left: playerPosition.x - 300 - PLATFORM_WIDTH };
  };

  useEffect(() => {
    const handleKeyDown = (event) => {
      if (event.key === "ArrowLeft") keysPressed.current.left = true;
      if (event.key === "ArrowRight") keysPressed.current.right = true;
      if (event.key === "ArrowUp" && isGrounded || event.key === "ArrowUp" && !doubleJumped) keysPressed.current.jump = true;
    };
    
    const handleKeyUp = (event) => {
      if (event.key === "ArrowLeft") keysPressed.current.left = false;
      if (event.key === "ArrowRight") keysPressed.current.right = false;
    };
  
    window.addEventListener("keydown", handleKeyDown);
    window.addEventListener("keyup", handleKeyUp);
  
    requestIdRef.current = requestAnimationFrame(updateGame);
  
    return () => {
      window.removeEventListener("keydown", handleKeyDown);
      window.removeEventListener("keyup", handleKeyUp);
      cancelAnimationFrame(requestIdRef.current);
    };
  }, [playerPosition,isGrounded, doubleJumped]); // add isGrounded to the dependency array

  
  return (
    <div style={{ position: "relative", width: "100%", height: `${VIEW_HEIGHT}px`, overflow: "hidden" }}>
      <Player position={{ ...playerPosition, x: playerPosition.x - backgroundXRef.current }} />
      {platforms.map((platform, index) => (
        <Platform key={index} {...platform} left={platform.left - backgroundXRef.current} />
      ))}
    </div>
  );
}

export default GameMain;