import React, { useEffect, useRef, useState } from 'react'; import ReactDOM from 'react-dom/client'; const GAME_WIDTH = 800; const GAME_HEIGHT = 600; const PLAYER_INITIAL_SIZE = 30; const FOOD_SIZE = 8; const FOOD_COUNT = 50; const BOT_COUNT = 10; const MAX_SIZE = 100; const BOT_DECISION_INTERVAL = 1000; // ms class Player { constructor(x, y, size, color) { this.x = x; this.y = y; this.size = size; this.color = color; this.speed = 5; } move(dx, dy) { this.x = Math.max(this.size, Math.min(GAME_WIDTH - this.size, this.x + dx * this.speed)); this.y = Math.max(this.size, Math.min(GAME_HEIGHT - this.size, this.y + dy * this.speed)); } } class Bot extends Player { constructor(x, y, size, color) { super(x, y, size, color); this.targetX = x; this.targetY = y; this.lastDecision = 0; } think(currentTime, food) { if (currentTime - this.lastDecision > BOT_DECISION_INTERVAL) { // Find closest food let closestFood = null; let closestDistance = Infinity; food.forEach(foodItem => { const distance = Math.sqrt( Math.pow(this.x - foodItem.x, 2) + Math.pow(this.y - foodItem.y, 2) ); if (distance < closestDistance) { closestDistance = distance; closestFood = foodItem; } }); if (closestFood) { this.targetX = closestFood.x; this.targetY = closestFood.y; } else { this.targetX = Math.random() * GAME_WIDTH; this.targetY = Math.random() * GAME_HEIGHT; } this.lastDecision = currentTime; } const dx = Math.sign(this.targetX - this.x); const dy = Math.sign(this.targetY - this.y); this.move(dx, dy); } } class Food { constructor() { this.respawn(); } respawn() { this.x = Math.random() * (GAME_WIDTH - FOOD_SIZE * 2) + FOOD_SIZE; this.y = Math.random() * (GAME_HEIGHT - FOOD_SIZE * 2) + FOOD_SIZE; } } const Game = () => { const canvasRef = useRef(null); const [players, setPlayers] = useState([ new Player( GAME_WIDTH / 3, GAME_HEIGHT / 2, PLAYER_INITIAL_SIZE, `hsl(${Math.random() * 360}, 70%, 50%)` ), new Player( (GAME_WIDTH / 3) * 2, GAME_HEIGHT / 2, PLAYER_INITIAL_SIZE, `hsl(${Math.random() * 360}, 70%, 50%)` ) ]); const [food, setFood] = useState(Array(FOOD_COUNT).fill(null).map(() => new Food())); const [score, setScore] = useState(0); const [bots, setBots] = useState( Array(BOT_COUNT).fill(null).map(() => new Bot( Math.random() * GAME_WIDTH, Math.random() * GAME_HEIGHT, PLAYER_INITIAL_SIZE, `hsl(${Math.random() * 360}, 70%, 50%)` )) ); const keysPressed = useRef({}); useEffect(() => { const handleKeyDown = (e) => { keysPressed.current[e.key] = true; }; const handleKeyUp = (e) => { keysPressed.current[e.key] = false; }; window.addEventListener('keydown', handleKeyDown); window.addEventListener('keyup', handleKeyUp); return () => { window.removeEventListener('keydown', handleKeyDown); window.removeEventListener('keyup', handleKeyUp); }; }, []); useEffect(() => { const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); let animationFrameId; const update = () => { // Player 1 Movement (WASD) let dx1 = 0; let dy1 = 0; if (keysPressed.current['a']) dx1 -= 1; if (keysPressed.current['d']) dx1 += 1; if (keysPressed.current['w']) dy1 -= 1; if (keysPressed.current['s']) dy1 += 1; // Player 2 Movement (Arrow Keys) let dx2 = 0; let dy2 = 0; if (keysPressed.current['ArrowLeft']) dx2 -= 1; if (keysPressed.current['ArrowRight']) dx2 += 1; if (keysPressed.current['ArrowUp']) dy2 -= 1; if (keysPressed.current['ArrowDown']) dy2 += 1; players[0].move(dx1, dy1); players[1].move(dx2, dy2); // Collision detection players.forEach((player, playerIndex) => { food.forEach((foodItem) => { const distance = Math.sqrt( Math.pow(player.x - foodItem.x, 2) + Math.pow(player.y - foodItem.y, 2) ); if (distance < player.size + FOOD_SIZE) { foodItem.respawn(); player.size = Math.min(MAX_SIZE, player.size + 1); setScore(prev => prev + 1); } }); }); // Bot updates bots.forEach((bot, index) => { bot.think(Date.now(), food); // Bot-food collision food.forEach((foodItem) => { const distance = Math.sqrt( Math.pow(bot.x - foodItem.x, 2) + Math.pow(bot.y - foodItem.y, 2) ); if (distance < bot.size + FOOD_SIZE) { foodItem.respawn(); bot.size = Math.min(MAX_SIZE, bot.size + 0.5); } }); // Bot-player collision players.forEach((player, playerIndex) => { const playerBotDistance = Math.sqrt( Math.pow(player.x - bot.x, 2) + Math.pow(player.y - bot.y, 2) ); if (playerBotDistance < player.size + bot.size) { if (player.size > bot.size * 1.1) { // Player eats bot bots[index] = new Bot( Math.random() * GAME_WIDTH, Math.random() * GAME_HEIGHT, PLAYER_INITIAL_SIZE, `hsl(${Math.random() * 360}, 70%, 50%)` ); player.size = Math.min(MAX_SIZE, player.size + bot.size * 0.1); setScore(prev => prev + Math.floor(bot.size)); } else if (bot.size > player.size * 1.1) { // Bot eats player const newPlayers = [...players]; newPlayers[playerIndex] = new Player( GAME_WIDTH / 2, GAME_HEIGHT / 2, PLAYER_INITIAL_SIZE, player.color ); setPlayers(newPlayers); setScore(0); } } }); }); // Drawing ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT); // Draw food ctx.fillStyle = '#FF4444'; food.forEach((foodItem) => { ctx.beginPath(); ctx.arc(foodItem.x, foodItem.y, FOOD_SIZE, 0, Math.PI * 2); ctx.fill(); }); // Draw players players.forEach((player, index) => { ctx.save(); ctx.beginPath(); ctx.arc(player.x, player.y, player.size, 0, Math.PI * 2); ctx.fillStyle = player.color; ctx.fill(); ctx.strokeStyle = '#000'; ctx.lineWidth = 2; ctx.stroke(); // Draw player number ctx.fillStyle = '#fff'; ctx.font = '16px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText(`P${index + 1}`, player.x, player.y); ctx.restore(); }); // Draw bots bots.forEach(bot => { ctx.fillStyle = bot.color; ctx.beginPath(); ctx.arc(bot.x, bot.y, bot.size, 0, Math.PI * 2); ctx.fill(); }); animationFrameId = requestAnimationFrame(update); }; update(); return () => cancelAnimationFrame(animationFrameId); }, [players, food, bots]); return (

Simple .io Game

Score: {score}

); }; const container = document.getElementById('renderDiv'); const root = ReactDOM.createRoot(container); root.render();