Game Development Overview

The Developer: Clown Hunt FPS

Introduction

"The Developer: Clown Hunt FPS" is a first-person shooter (FPS) game where players navigate a 3D environment, hunting clowns while avoiding obstacles and collecting in-game items. The game incorporates elements of real-time physics, AI-driven enemy behavior, and interactive 3D assets, creating an immersive gaming experience.

Technologies Used

Front End (Client-side)

• React & TypeScript: Provides a modular and scalable front-end architecture.
• React Three Fiber (R3F): Enables the creation and rendering of the 3D game world.
• Three.js: Handles the 3D graphics, lighting, and materials.
• React Zustand: Manages the game's state, including player stats and game logic.
• React Cannon: Implements real-time physics for dynamic interactions.
• Supabase Authentication: Manages user authentication and login.

Back End (Server-side & Database)

• Supabase: Acts as a backend-as-a-service (BaaS) for handling authentication and storing player stats.‍
• PostgreSQL Database: Stores player statistics, achievements, and game progress.

Game Features

• First-Person Shooter Mechanics: Players can aim and shoot at enemies using a physics-based shooting system.
• AI-Driven Enemies: Clowns actively pursue players and attempt to catch them.
• Collectible Items: Players can pick up logos that contribute to their final score.
• Interactive Environment: Movable obstacles and destructible objects enhance gameplay.
• Player Authentication & Tracking: Players log in and have their progress saved in a database.
• Dynamic Score System:  Kills and item collection contribute to a real-time scoreboard.
• Physics-Driven Gameplay: The game world incorporates realistic object movement, collisions, and gravity.

Development Process

1. Planning & Prototyping
   
   • Defined game concept, mechanics, and user experience.
   • Created wireframes and prototypes using Figma/Webflow.
2. Environment & Character Setup
   • Designed and imported 3D assets for the player, enemies, and objects.
   • Implemented physics interactions with @react-three/cannon.
3. Game Logic Implementation
   
   • Developed player movement and shooting mechanics.
   • Implemented enemy AI for dynamic behavior.
4. Authentication & Database Integration
   
   • Configured Supabase authentication for secure player login.
   • Set up database tables to store game progress and stats.
5. UI & User Experience
   
   • Developed welcome screens, login screens, and in-game menus.
   • Designed an interactive HUD displaying score, kills, and controls.
6. Optimization & Testing
   
   • Performed performance optimizations for smooth gameplay.
   • Conducted bug testing and user feedback iterations.

Key Components

• GameCanvas.tsx: Handles 3D rendering, physics, and game world setup.
• Player.tsx: Defines the player’s behavior, movement, and shooting mechanics.
• Clown.tsx:  Implements enemy AI and interactions.
• Scoreboard.tsx: Displays the player's score and kills in real-time.
• PlayerControls.tsx: Manages input handling for movement and shooting.
• WelcomeScreen.tsx: Provides an entry point with game information and login options.
• GameMenu.tsx: Displays end-game stats and options for saving, restarting, or exiting.
• SupabasePlayerStats.ts: Manages player data storage and retrieval from Supabase.

"The Developer: Clown Hunt FPS" is a well-structured game that blends FPS mechanics with interactive gameplay elements. It integrates with Webflow to showcase my skills in backend and frontend development while demonstrating the power of modern web technologies in creating interactive and immersive browser-based experiences. By leveraging React, Three.js, and related libraries, I developed a visually stunning and engaging game. Explore the game and experience the future of web-based entertainment!