import React, { useState, useEffect } from 'react'; import Arena from 'Arena'; import Player from 'Player'; import { useGameLoop } from 'hooks'; import { checkCollision, applyGravity, applyKnockback } from 'physics'; export default function Game() { const [gameState, setGameState] = useState({ players: [ { id: 1, x: 150, y: 100, width: 50, height: 80, vx: 0, vy: 0, direction: 1, isGrounded: false, damage: 0, lives: 3, isAttacking: false, attackCooldown: 0, color: "#e74c3c" }, { id: 2, x: 450, y: 100, width: 50, height: 80, vx: 0, vy: 0, direction: -1, isGrounded: false, damage: 0, lives: 3, isAttacking: false, attackCooldown: 0, color: "#3498db" } ], platforms: [ { x: 100, y: 400, width: 400, height: 30 } ], keys: { ArrowLeft: false, ArrowRight: false, ArrowUp: false, ArrowDown: false, KeyA: false, KeyD: false, KeyW: false, KeyS: false }, gameOver: false, winner: null }); useEffect(() => { const handleKeyDown = (e) => { setGameState(prev => ({ ...prev, keys: { ...prev.keys, [e.code]: true } })); }; const handleKeyUp = (e) => { setGameState(prev => ({ ...prev, keys: { ...prev.keys, [e.code]: false } })); }; window.addEventListener('keydown', handleKeyDown); window.addEventListener('keyup', handleKeyUp); return () => { window.removeEventListener('keydown', handleKeyDown); window.removeEventListener('keyup', handleKeyUp); }; }, []); const updateGame = (deltaTime) => { if (gameState.gameOver) return; const updatedPlayers = gameState.players.map(player => { // Handle player controls let newPlayer = { ...player }; // Player 1 controls if (player.id === 1) { if (gameState.keys.KeyA) newPlayer.vx = -5; else if (gameState.keys.KeyD) newPlayer.vx = 5; else newPlayer.vx *= 0.8; if (gameState.keys.KeyW && player.isGrounded) { newPlayer.vy = -15; newPlayer.isGrounded = false; } if (gameState.keys.KeyS && !player.isAttacking && player.attackCooldown <= 0) { newPlayer.isAttacking = true; newPlayer.attackCooldown = 20; } } // Player 2 controls if (player.id === 2) { if (gameState.keys.ArrowLeft) newPlayer.vx = -5; else if (gameState.keys.ArrowRight) newPlayer.vx = 5; else newPlayer.vx *= 0.8; if (gameState.keys.ArrowUp && player.isGrounded) { newPlayer.vy = -15; newPlayer.isGrounded = false; } if (gameState.keys.ArrowDown && !player.isAttacking && player.attackCooldown <= 0) { newPlayer.isAttacking = true; newPlayer.attackCooldown = 20; } } // Apply physics newPlayer = applyGravity(newPlayer); // Update position newPlayer.x += newPlayer.vx; newPlayer.y += newPlayer.vy; // Attack cooldown if (newPlayer.attackCooldown > 0) newPlayer.attackCooldown--; if (newPlayer.attackCooldown === 0) newPlayer.isAttacking = false; // Set direction based on movement if (newPlayer.vx > 0) newPlayer.direction = 1; else if (newPlayer.vx < 0) newPlayer.direction = -1; // Screen boundaries if (newPlayer.x < 0) newPlayer.x = 0; if (newPlayer.x + newPlayer.width > 600) newPlayer.x = 600 - newPlayer.width; return newPlayer; }); // Check platform collisions gameState.platforms.forEach(platform => { updatedPlayers.forEach((player, index) => { const collision = checkCollision(player, platform); if (collision === 'top' && player.vy >= 0) { updatedPlayers[index].isGrounded = true; updatedPlayers[index].y = platform.y - player.height; updatedPlayers[index].vy = 0; } }); }); // Check attack collisions updatedPlayers.forEach((attacker, i) => { if (attacker.isAttacking) { updatedPlayers.forEach((target, j) => { if (i !== j) { const attackBox = { x: attacker.direction > 0 ? attacker.x + attacker.width : attacker.x - 40, y: attacker.y + 20, width: 40, height: 40 }; if (checkCollision(attackBox, target)) { const knockbackStrength = 5 + (target.damage / 20); updatedPlayers[j] = applyKnockback(target, attacker.direction, knockbackStrength); updatedPlayers[j].damage += 10; } } }); } }); // Check for falls updatedPlayers.forEach((player, index) => { if (player.y > 600) { updatedPlayers[index].lives--; updatedPlayers[index].x = 300; updatedPlayers[index].y = 100; updatedPlayers[index].vx = 0; updatedPlayers[index].vy = 0; updatedPlayers[index].damage = 0; } }); // Check win condition let gameOver = false; let winner = null; updatedPlayers.forEach(player => { if (player.lives <= 0) { gameOver = true; winner = player.id === 1 ? 2 : 1; } }); setGameState(prev => ({ ...prev, players: updatedPlayers, gameOver, winner })); }; useGameLoop(updateGame); return (

{gameState.players.map(player => ( ))}

P1: {gameState.players[0].damage}%

❤️ × {gameState.players[0].lives}

P2: {gameState.players[1].damage}%

❤️ × {gameState.players[1].lives}

{gameState.gameOver && (

GAME OVER

Player {gameState.winner} wins!

)}

Controls: P1(WASD), P2(Arrows) | S/↓ to attack

); }