Three 3D Web Games Generated with Claude Opus 5.5: Local Build and Play Guide

Project Overview

claude-opus-5-5-demo is an experiment in Claude Opus 5.5's code-generation capabilities. The repository contains three directly playable 3D web games. Each project was completed from a single prompt within one Claude Code session, including research, project setup, coding, building, testing, and deployment.

According to the repository documentation, the source code for all three games was generated by the model without manual code modifications. The projects use Three.js to build 3D scenes, then use esbuild to bundle each application into a single HTML file with the code inlined. Models, textures, animations, and sound effects are all generated procedurally in code, without external images, audio, or third-party assets.

This is not a traditional game development template, but a set of runnable, buildable, and inspectable results from one-shot code-generation experiments.

Three Games and Their Features

Pelican Bike

This is a casual coastal-road cycling game. The player controls a pelican wearing a helmet, sunglasses, and a red scarf as it rides a bicycle and catches fish. The project includes cloth-physics scarf simulation, waves and shore foam, a day-night cycle, procedurally generated sound effects and music, and a mechanism that automatically adjusts image quality based on frame rate.

• W, S: Accelerate and decelerate.
• A, D: Change lanes and approach fish.
• Space: Jump.
• T: Spread the wings and lift the front wheel.
• Autopilot: When there is no input for an extended period, the pelican automatically pursues fish.

The game also provides 14 achievements, 5 camera modes, touch controls, and browser-generated real-time music that changes with the pedaling cadence.

Play Pelican Bike online

CrossFire: Transport Ship

This project attempts to recreate the classic Transport Ship map from CrossFire. During generation, layout diagrams and strategy guides were researched first. The scene was then built around features such as the elongated deck, ship-cabin spawn points at both ends, V-shaped containers placed diagonally in the center, and one-way pipes on both sides.

Gameplay includes weapon ballistics, recoil, battles against robot AI, hit feedback, kill announcements, procedurally generated gunshots and other sound effects, as well as touch controls.

Play CrossFire: Transport Ship online

QQ Speed

This racing project recreates Shift drifting, Ctrl nitro, quick boosts, double boosts, reset, and other controls. It also provides four tracks designed in the style of the official maps.

• City 11: An urban night track with 11 turns, including hairpin bends.
• Aegean Romance: Focuses on climbs and consecutive turns.
• Pharaoh's Pyramid: Includes a jump ramp at the end of the straightaway.
• Snow Adventure: Uses a figure-eight interchange structure.

Before formal development began, the track shapes were generated as top-down images by script to check turn layouts and intersections.

Play QQ Speed online

Before You Begin

Local builds require an environment capable of running npm and Node.js scripts. The repository does not include node_modules/ or dist/, so after cloning or downloading the source code, install dependencies and build each game you want to try.

The three subprojects are independent. You can build just one or build them one at a time. Their main dependencies include Three.js and esbuild.

Repository Structure

pelican-bike/
  src/
  index.template.html
  build.mjs
  package.json

cf-transport-ship/
  src/
  build.mjs
  package.json

qq-speed/
  src/
  build.mjs
  wrangler.jsonc
  package.json

pelican-bike/src/ contains 11 modules covering the pelican, bicycle, ocean, fish, sky, effects, audio, and other features. cf-transport-ship/src/ contains 18 modules covering the map, firearms, weapons, robots, player, physics, and first-person weapon model. qq-speed/src/ contains 15 modules covering vehicles, tracks, layout, AI, maps, and items.

Installation and Building

Method 1: Build Pelican Bike

cd pelican-bike
npm install
node build.mjs

Method 2: Build CrossFire: Transport Ship

cd cf-transport-ship
npm install
node build.mjs

Method 3: Build QQ Speed

cd qq-speed
npm install
node build.mjs

After each project is built, the output is written to dist/index.html in the corresponding directory. According to the repository's usage instructions, open this file directly in a browser to play.

The three build outputs are approximately 700 KB to 840 KB. Because the JavaScript is bundled into the HTML, the games do not need to load model, texture, or sound resources at runtime.

Basic Usage Flow

1. Choose a game from the three subdirectories.
2. Enter the corresponding directory and run npm install.
3. Run node build.mjs.
4. Confirm that dist/index.html was generated.
5. Open the file in a browser.
6. Use the keyboard or touch controls, depending on the game, to start playing.

If you only want to try the games quickly and do not plan to inspect the source or rebuild them, open the online addresses where the projects have already been deployed to Cloudflare Pages or a CDN.

Understanding the Single-File Build

Here, “single-file HTML” means that the final page has the bundled JavaScript inlined into the HTML. The src/ directory remains split into multiple functional modules for development and maintenance. When build.mjs runs, esbuild merges these modules into a browser-runnable output.

The Pelican project also uses index.template.html as a page template, injecting the bundled JavaScript and og:image during the build. The repository only commits source files, so after modifying the source, you must run the build script again to produce a new dist/index.html.

Advanced Reading and Debugging Tips

Locate Features by Module

When reading the code, you do not need to start with the complete build output. Locate features by module names in the directories. For example, inspect the ocean, sky, audio, or effects modules in the Pelican project; the firearms, robots, player, and physics modules in the FPS project; and the vehicle, track, AI, and map-layout modules in the racing project.

Always Rebuild After Changes

During development, modify the source files in src/ rather than treating dist/index.html as the primary source. After making changes, run:

node build.mjs

Because dist/ is not committed, you must also rebuild after recloning the repository or cleaning the working directory.

Perform Long-Term Stability Checks

Repository records show that the Pelican game underwent a 320-second accelerated soak test to cover a complete day-night cycle while monitoring whether geometry counts, texture counts, and JavaScript heap memory remained stable. The 36-kilometer distance modulo boundary was also tested specifically.

If you modify the infinite road, day-night system, particles, ocean surface, or texture logic, you can use a similar approach: run the game for an extended period, watch for continuously increasing resource counts, and test the boundary conditions of distance, timers, and looping animations.

Check the Effects of Invalid Values on Post-Processing

After the project went live, occasional black screens appeared. The records show that the issue was reproduced by injecting NaN and was ultimately traced to Bloom post-processing spreading invalid pixels into black blocks. Fixes included adding a cleanup pass before bloom and handling invalid values from sources such as ocean-surface Fresnel calculations.

This means that when modifying shader, ocean-surface, lighting, or post-processing code, you should check not only for syntax errors but also whether calculations might produce NaN or other invalid values.

Verify Controls and Complete Matches

The original projects used a headless browser to check page loading, runtime errors, and simulated key presses, and to run complete matches. After extending the game logic, focus on validating the startup flow, key responses, win and loss conditions, reset behavior, and long-running state rather than merely confirming that the home page appears.

Preserve the Single-File Advantage During Deployment

The build output is a standalone dist/index.html, making it suitable for static hosting services. The three games in the repository have already been deployed to Cloudflare Pages; qq-speed/ also includes the wrangler.jsonc deployment configuration. Before publishing, confirm locally that the build output opens correctly, then handle project creation, domain binding, cache refreshes, and certificate status.

Project Scope and Notes

• The three games are capability-test projects generated by Claude Opus 5.5 in Claude Code.
• The generation environment documented by the repository used a 1M context window and xhigh reasoning effort.
• Each game was created from a single requirement prompt in one session.
• The CrossFire and QQ Speed projects are tribute-style capability tests and are not affiliated with the original publishers.
• The repository lists the generation date as September 2026.

Summary

claude-opus-5-5-demo demonstrates the result of generating complete 3D web games from a single prompt, while also providing inspectable modular source code and a unified build process. Choose any subproject, install its dependencies, and run node build.mjs to produce a single-file HTML page that can be opened directly. For further study, focus on procedural asset generation, game-module organization, long-term stability testing, and invalid-value protection in WebGL post-processing.