diff --git a/packages/client/src/components/Game/Game.tsx b/packages/client/src/components/Game/Game.tsx index c9fcecc..d516d12 100644 --- a/packages/client/src/components/Game/Game.tsx +++ b/packages/client/src/components/Game/Game.tsx @@ -52,7 +52,15 @@ export const Game: React.FC = () => { const elapsed = timestamp - lastTimestamp setDelay(elapsed) } - updatePlayerMovement(player, setPlayer, speedFactor) + const canvas = getCanvas() + if (!canvas) return + updatePlayerMovement( + player, + setPlayer, + speedFactor, + canvas.width, + canvas.height + ) gameLoop( timestamp, context, @@ -102,8 +110,7 @@ export const Game: React.FC = () => { useEffect(() => { if (gameStarted && !isPaused) { - const canvas = canvasRef.current - context = canvas?.getContext('2d') + context = getContext() if (context) { requestAnimationFrame(loop) diff --git a/packages/client/src/components/Game/controls.tsx b/packages/client/src/components/Game/controls.tsx index 1473555..3bc2e88 100644 --- a/packages/client/src/components/Game/controls.tsx +++ b/packages/client/src/components/Game/controls.tsx @@ -16,7 +16,9 @@ export const handleKeyUp = (key: string) => { export const updatePlayerMovement = ( player: Player, setPlayer: React.Dispatch>, - speedFactor: number + speedFactor: number, + canvasWidth: number, + canvasHeight: number ) => { const speed = player.speed * speedFactor @@ -24,6 +26,7 @@ export const updatePlayerMovement = ( let newX = prevPlayer.x let newY = prevPlayer.y + // Определение направления движения if (keyMap['ArrowUp'] || keyMap['w'] || keyMap['ц']) { newY -= speed } @@ -37,9 +40,9 @@ export const updatePlayerMovement = ( newX += speed } - // Ограничение движения по краям экрана - newX = Math.max(0, Math.min(newX, window.innerWidth - prevPlayer.width)) - newY = Math.max(0, Math.min(newY, window.innerHeight - prevPlayer.height)) + // Ограничение движения по краям canvas + newX = Math.max(0, Math.min(newX, canvasWidth - prevPlayer.width)) + newY = Math.max(0, Math.min(newY, canvasHeight - prevPlayer.height)) return { ...prevPlayer, x: newX, y: newY } })