Collision Manager Component

The Collision Manager component handles collision detection between obstacles and the spaceship. It runs at 60 FPS and manages game state accordingly.

1. File Declaration and Imports

import { useEffect } from 'react';
import { useAtom } from 'jotai';
import { collisionStateAtom } from '../store/atom';

The file starts with: - Component file declaration - `useEffect` hook import for managing side effects - `useAtom` from Jotai for state management - `collisionStateAtom` for tracking collision state

2. Component Declaration and Props

const CollisionManager = ({ 
  obstacles, 
  playerPosition, 
  setGameOver,
  gameOver 
}) => {
  const [isColliding, setIsColliding] = useAtom(collisionStateAtom);

Component setup: - Declares CollisionManager component with destructured props - `obstacles`: Array of current obstacles - `playerPosition`: Current position of the spaceship - `setGameOver`: Function to end the game - `gameOver`: Current game state - Initializes collision state using Jotai's useAtom

3. Collision State Reset Effect

  useEffect(() => {
    if (!gameOver) {
      setIsColliding(false);
    }
  }, [gameOver, setIsColliding]);

First useEffect hook: - Resets collision state when game is active - Runs when gameOver state changes - Dependencies include gameOver and setIsColliding

4. Main Collision Detection Effect

  useEffect(() => {
    const checkCollisions = () => {
      obstacles.forEach(obstacle => {
        const spaceshipWidth = 50;
        const spaceshipHeight = 50;
        
        const playerCollision = 
          obstacle.x < (playerPosition.x + spaceshipWidth) &&
          (obstacle.x + 20) > playerPosition.x &&
          obstacle.y > (600 - spaceshipHeight - 20) &&
          (obstacle.y + 20) > (600 - spaceshipHeight);
        
        if (playerCollision && !isColliding) {
          setIsColliding(true);
          setGameOver(true);
        }
      });
    };

    const collisionInterval = setInterval(checkCollisions, 16);
    return () => clearInterval(collisionInterval);
  }, [obstacles, playerPosition, isColliding, setGameOver, setIsColliding]);

Main collision detection logic: - Defines checkCollisions function that: • Sets spaceship dimensions (50x50) • Checks each obstacle for overlap with spaceship • Uses precise collision detection formula • Updates game state on collision - Sets up 60 FPS interval (16ms) - Includes cleanup function - Dependencies track all relevant state changes

5. Component Return and Export

  return null;
};

export default CollisionManager;

Component completion: - Returns null as this is a logical component with no UI - Exports the component for use in other parts of the application

Back to Home