Introduction

This project documents the full journey of building a 3D Battleship multiplayer game using Emergent. What started as a simple idea became a complete interactive 3D experience with ship placement, live attacks, synchronized turns and stable multiplayer behavior. The result is a polished, immersive game with smooth visuals and reliable real-time updates.

Final Tech Stack:

Frontend: React, Three.js, @react-three/fiber, @react-three/drei, Tailwind CSS
Backend: FastAPI with WebSocket support
Database: MongoDB via Motor
Real-time Features: WebSockets with polling fallback
3D Interaction: Raycasting and optimized scene updates

The game includes dual 3D grids, ship placement logic, invite code matchmaking, hit/miss visuals and victory detection.

Problem Statement and Proposed Solution

Our Vision

Most Battleship games feel flat or disconnected. They lack visual immersion, rely on simple 2D grids and use cumbersome multiplayer systems.

Problems with existing Battleship games:

• They lack dynamic visuals

• They require accounts or slow matchmaking

• They do not feel reactive or real-time

• They rarely show satisfying hit or sink animations

The Proposed Solution

Build a visually engaging 3D Battleship game that runs in the browser, requires no accounts and supports instant 1v1 matches through invite codes.

Key elements defined early:

1. Styling: cartoon-like water and clean 3D grids

2. Gameplay: classic 10x10 grid and 5 ships

3. Multiplayer: WebSockets for real-time state sync

4. Simplicity: no login system, just invite codes

5. Interaction: click-to-place and click-to-attack mechanics

Learning Outcomes

Throughout the process, we learned how to:
Gather requirements before coding
Translate classic game rules into clear mechanics
Build and optimize 3D scenes using React-Three-Fiber
Implement synchronized multiplayer logic
Debug complex browser issues like memory leaks and event conflicts
Continuously iterate until the game became stable and playable

Step 0: Prerequisites

What We Had

Emergent environment with React, FastAPI and MongoDB already connected.

What Was Needed

• Clear agreement on ship sizes

• Grid layout and turn flow

• Decision to use invite codes instead of accounts

After confirming these, we were ready to send the initial prompt into Emergent.

Step 1: Initial Prompt and Requirement Gathering

Our First Message

I want to build a 3D Battleship multiplayer game using Three.js. 
Each player gets a grid, places 5 classic ships and then takes turns dropping bombs. 
Show hit/miss visually and use invite codes for 1v1 games

Agent’s Clarification Questions:

• Grid size

• Ship list

• Matchmaking style [Whether user accounts were needed]

• Visual theme

• Multiplayer protocol

Our Answers

• Use a 10x10 grid

• Use the classic 5 ships

• Only invite codes, no user accounts

• Use a cartoon water style

• Enable WebSockets

Step 2: UI and 3D Improvements

Our Request

We wanted clearer visuals, intuitive placement and a stable camera that didn’t interfere with clicking

Agent’s Interpretation

1. Two separate grids labelled clearly

2. Water shader kept light and stylized

3. Camera rotation disabled during placement

4. Pointer interactions prioritized over 3D orbiting

5. Panels for turn messages and status updates

6. Ships resized and aligned cleanly on the grid

7. Placement highlighting added

Step 3: First Major Gameplay Issue

Our Report

Again, it's important to note that opening the inspect pane and searching for errors in red popping up on the console or network tabs is one of the best ways to troubleshoot complicated apps. Here's the error we found:

Bombs would not fire on the opponent grid. 
Console logs showed the WebSocket stuck in CONNECTING state

Agent’s Fix

• Added open-connection checks

• Added retry logic

• Added fallback syncing from REST endpoints

This stabilized the attack flow.

Step 4: Additional Feature Requests

Our Request

Improve enemy-hit visibility and fix inconsistency between players

Agent’s Fix

• Backend now returns opponent_hits_on_me [an identifier tag]

• Frontend shows hits on your fleet

• Ship sinking detection improved

• Tile indicators updated in both grids

Common Issues

During testing we faced:

• Blank screen issues from wrong URLs

• Ship placement blocked by OrbitControls

• Attacks not firing due to socket timing

• Delayed updates due to server-client desync

• Browser crashes from excessive animations

• Overflow clipping affecting logos and panels

For troubleshooting your app:

• Describe what you see

• Take a screenshot

• Open browser console and check for red errors

• Share both with the agent

• Iterate until resolved

Deploying Your App

Preview Your Game

Use the Preview feature in Emergent and test the following:

• Gameplay and logic

• Ship placement

• Click detection

• WebSocket syncing

• Turn order

• Hit and sink logic

Fix Any Issues

Send findings to the agent for quick iteration.

Deploy the Application

Click Deploy, wait for Emergent to finalize the hosting and use the final production URL to play the game with others!

Wrapping Up

You now have a fully interactive 3D Battleship game built step-by-step with the brand - new Opus 4.5 model by Claude through Emergent. Here's the comparison of Opus 4.5 and Sonnet 4.5 models, using which we built the same 3D battleship game:

Why don't you test the previous game and see if our preview down below looks better? Tweet at us on X or reach out on Discord to play the updated game with friends!

Your build now includes:

• A complete 3D battlefield

• Real-time turn-based gameplay

• Clear hit and miss animations

• Ship sinking logic

• Invite code matchmaking

• Optimized memory usage for long play sessions

If you want to push the game further, possible upgrades include:

• Explosion or splash animations

• Sound effects

• Fog of war or other power-ups that a user can buy from a store (get coins from winning)

• Smarter camera for mobile

• AI opponent mode

• Match history

Ready when you are to extend or refine your game.