function MainComponent() { const canvasRef = React.useRef(null); const [playerPosition, setPlayerPosition] = React.useState({ x: 0, y: 0 }); const [maze, setMaze] = React.useState([]); const [goalPosition, setGoalPosition] = React.useState({ x: 0, y: 0 }); const [enemies, setEnemies] = React.useState([]); const [isGameOver, setIsGameOver] = React.useState(false); const [isPlayerFacingLeft, setIsPlayerFacingLeft] = React.useState(false); const [animationFrame, setAnimationFrame] = React.useState(0); const spriteImage = React.useRef(null); const [visibleMaze, setVisibleMaze] = React.useState([]); const MAZE_SIZE = 100; const BLOCK_SIZE = 80; const VISIBLE_RANGE = 7; const SCROLL_SPEED = 5; React.useEffect(() => { spriteImage.current = new Image(); spriteImage.current.src = 'https://ucarecdn.com/5fd04f1a-4654-4581-af57-9aa38b41a426/-/format/auto/'; spriteImage.current.onload = initGame; }, []); const initGame = () => { const newMaze = generateMaze(); setMaze(newMaze); const [playerPos, goalPos] = setRandomPositions(newMaze); setPlayerPosition(playerPos); setGoalPosition(goalPos); updateVisibleMaze(playerPos.x, playerPos.y, newMaze); drawMaze(); spawnEnemies(); }; const generateMaze = () => { const maze = Array(MAZE_SIZE).fill().map(() => Array(MAZE_SIZE).fill(1)); const stack = [{x: 1, y: 1}]; maze[1][1] = 0; while (stack.length > 0) { const current = stack[stack.length - 1]; const directions = [ {dx: 0, dy: -2}, {dx: 2, dy: 0}, {dx: 0, dy: 2}, {dx: -2, dy: 0} ].sort(() => Math.random() - 0.5); let moved = false; for (const dir of directions) { const nx = current.x + dir.dx; const ny = current.y + dir.dy; if (nx > 0 && nx < MAZE_SIZE - 1 && ny > 0 && ny < MAZE_SIZE - 1 && maze[ny][nx] === 1) { maze[ny][nx] = 0; maze[current.y + dir.dy / 2][current.x + dir.dx / 2] = 0; stack.push({x: nx, y: ny}); moved = true; break; } } if (!moved) stack.pop(); } for (let y = 0; y < MAZE_SIZE; y++) { for (let x = 0; x < MAZE_SIZE; x++) { const areaX = Math.floor(x / 50); const areaY = Math.floor(y / 50); if (maze[y][x] === 0) { maze[y][x] = areaX + areaY * 2 + 2; } } } return maze; }; const setRandomPositions = (maze) => { let playerPos, goalPos; do { playerPos = { x: Math.floor(Math.random() * MAZE_SIZE), y: Math.floor(Math.random() * MAZE_SIZE) }; goalPos = { x: Math.floor(Math.random() * MAZE_SIZE), y: Math.floor(Math.random() * MAZE_SIZE) }; } while (maze[playerPos.y][playerPos.x] === 1 || maze[goalPos.y][goalPos.x] === 1 || (playerPos.x === goalPos.x && playerPos.y === goalPos.y)); return [playerPos, goalPos]; }; const spawnEnemies = () => { const newEnemies = []; for (let i = 0; i < 5; i++) { newEnemies.push({ x: Math.floor(Math.random() * MAZE_SIZE), y: Math.floor(Math.random() * MAZE_SIZE), type: Math.random() < 0.5 ? 'ghost' : 'dog', timeLeft: 10000 }); } setEnemies(newEnemies); }; const updateVisibleMaze = (playerX, playerY, fullMaze) => { const newVisibleMaze = []; const offsetX = playerX - Math.floor(VISIBLE_RANGE / 2); const offsetY = playerY - Math.floor(VISIBLE_RANGE / 2); for (let y = 0; y < VISIBLE_RANGE; y++) { newVisibleMaze[y] = []; for (let x = 0; x < VISIBLE_RANGE; x++) { const mazeX = x + offsetX; const mazeY = y + offsetY; if (mazeX >= 0 && mazeX < MAZE_SIZE && mazeY >= 0 && mazeY < MAZE_SIZE) { newVisibleMaze[y][x] = fullMaze[mazeY][mazeX]; } else { newVisibleMaze[y][x] = 1; } } } setVisibleMaze(newVisibleMaze); }; const drawMaze = () => { const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); for (let y = 0; y < VISIBLE_RANGE; y++) { for (let x = 0; x < VISIBLE_RANGE; x++) { const cellType = visibleMaze[y][x]; const spriteX = cellType === 1 ? 0 : ((cellType - 2) % 2) * BLOCK_SIZE; const spriteY = cellType === 1 ? 0 : BLOCK_SIZE; ctx.drawImage(spriteImage.current, spriteX, spriteY, BLOCK_SIZE, BLOCK_SIZE, x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE); } } const playerSpriteX = 0; const playerSpriteY = (4 + animationFrame) * BLOCK_SIZE; ctx.save(); if (isPlayerFacingLeft) { ctx.scale(-1, 1); ctx.translate(-BLOCK_SIZE, 0); } ctx.drawImage(spriteImage.current, playerSpriteX, playerSpriteY, BLOCK_SIZE, BLOCK_SIZE, (isPlayerFacingLeft ? -1 : 1) * Math.floor(VISIBLE_RANGE / 2) * BLOCK_SIZE, Math.floor(VISIBLE_RANGE / 2) * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE); ctx.restore(); const offsetX = playerPosition.x - Math.floor(VISIBLE_RANGE / 2); const offsetY = playerPosition.y - Math.floor(VISIBLE_RANGE / 2); if (goalPosition.x >= offsetX && goalPosition.x < offsetX + VISIBLE_RANGE && goalPosition.y >= offsetY && goalPosition.y < offsetY + VISIBLE_RANGE) { ctx.drawImage(spriteImage.current, 3 * BLOCK_SIZE, 3 * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE, (goalPosition.x - offsetX) * BLOCK_SIZE, (goalPosition.y - offsetY) * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE); } enemies.forEach(enemy => { if (enemy.x >= offsetX && enemy.x < offsetX + VISIBLE_RANGE && enemy.y >= offsetY && enemy.y < offsetY + VISIBLE_RANGE) { const enemySpriteX = enemy.type === 'ghost' ? 2 * BLOCK_SIZE : 4 * BLOCK_SIZE; ctx.drawImage(spriteImage.current, enemySpriteX, 4 * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE, (enemy.x - offsetX) * BLOCK_SIZE, (enemy.y - offsetY) * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE); } }); }; const movePlayer = (dx, dy) => { const newX = playerPosition.x + dx; const newY = playerPosition.y + dy; if (newX >= 0 && newX < MAZE_SIZE && newY >= 0 && newY < MAZE_SIZE && maze[newY][newX] !== 1) { setPlayerPosition({ x: newX, y: newY }); setIsPlayerFacingLeft(dx < 0); setAnimationFrame(prev => (prev + 1) % 2); updateVisibleMaze(newX, newY, maze); checkCollisions(newX, newY); } }; const checkCollisions = (x, y) => { if (x === goalPosition.x && y === goalPosition.y) { alert('Goal reached! You win!'); initGame(); } enemies.forEach(enemy => { if (x === enemy.x && y === enemy.y) { setIsGameOver(true); } }); }; const handleKeyDown = (e) => { if (isGameOver) return; switch (e.key) { case 'ArrowUp': movePlayer(0, -1); break; case 'ArrowDown': movePlayer(0, 1); break; case 'ArrowLeft': movePlayer(-1, 0); break; case 'ArrowRight': movePlayer(1, 0); break; } }; React.useEffect(() => { window.addEventListener('keydown', handleKeyDown); return () => window.removeEventListener('keydown', handleKeyDown); }, [playerPosition, maze, isGameOver]); React.useEffect(() => { if (isGameOver) { alert('Game Over!'); initGame(); setIsGameOver(false); } }, [isGameOver]); React.useEffect(() => { const gameLoop = setInterval(() => { setEnemies(prevEnemies => prevEnemies.map(enemy => { if (enemy.timeLeft <= 0) return null; const dx = Math.floor(Math.random() * 3) - 1; const dy = Math.floor(Math.random() * 3) - 1; const newX = Math.max(0, Math.min(MAZE_SIZE - 1, enemy.x + dx)); const newY = Math.max(0, Math.min(MAZE_SIZE - 1, enemy.y + dy)); return { ...enemy, x: newX, y: newY, timeLeft: enemy.timeLeft - 100 }; }).filter(Boolean) ); drawMaze(); }, 100); return () => clearInterval(gameLoop); }, [playerPosition, maze, enemies, goalPosition, visibleMaze]); React.useEffect(() => { const animationInterval = setInterval(() => { setAnimationFrame(prev => (prev + 1) % 2); }, 200); return () => clearInterval(animationInterval); }, []); return (

); }