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

export default function PlatformerGame() {

const canvasRef = useRef(null);

const [player, setPlayer] = useState({ x: 50, y: 200, width: 30, height: 30, dy: 0, onGround: false });

const [keys, setKeys] = useState({});

const gravity = 0.5;

const jumpForce = -10;

const groundY = 300;

const platforms = [

{ x: 0, y: groundY, width: 500, height: 20 },

{ x: 150, y: 250, width: 100, height: 10 },

{ x: 300, y: 200, width: 100, height: 10 }

];

useEffect(() => {

const handleKeyDown = (e) => setKeys((prev) => ({ ...prev, [e.code]: true }));

const handleKeyUp = (e) => setKeys((prev) => ({ ...prev, [e.code]: false }));

window.addEventListener('keydown', handleKeyDown);

window.addEventListener('keyup', handleKeyUp);

return () => {

window.removeEventListener('keydown', handleKeyDown);

window.removeEventListener('keyup', handleKeyUp);

};

}, []);

useEffect(() => {

const ctx = canvasRef.current.getContext('2d');

const gameLoop = () => {

let newPlayer = { ...player };

// Apply horizontal movement

if (keys['ArrowRight']) newPlayer.x += 3;

if (keys['ArrowLeft']) newPlayer.x -= 3;

// Apply gravity

newPlayer.dy += gravity;

newPlayer.y += newPlayer.dy;

newPlayer.onGround = false;

// Platform collision

for (let p of platforms) {

if (

newPlayer.x < p.x + p.width &&

newPlayer.x + newPlayer.width > p.x &&

newPlayer.y + newPlayer.height < p.y + 20 &&

newPlayer.y + newPlayer.height > p.y

) {

newPlayer.y = p.y - newPlayer.height;

newPlayer.dy = 0;

newPlayer.onGround = true;

}

}

// Jump

if (keys['Space'] && newPlayer.onGround) {

newPlayer.dy = jumpForce;

}