Pen Fight 3D is a complete browser-based 3D tabletop fighting game built with React, TypeScript, Three.js and WebGL. Players aim, flick and spin customizable pens across a classroom desk, using realistic collision physics to knock opponents over the edge.

The package includes offline gameplay, AI opponents, local Pass & Play, practice challenges and real-time online multiplayer powered by an included Cloudflare Workers and Durable Objects backend.

Important External Service Disclosure

Cloudflare services are not included in the purchase price.

Online multiplayer requires the buyer to create and manage a separate Cloudflare account and deploy the included backend to Cloudflare Workers and Durable Objects. Cloudflare Workers, Durable Objects, Cloudflare Pages, hosting, domains, bandwidth, usage charges and any Cloudflare paid plan are external third-party services and are not included with this CodeCanyon item.

Cloudflare may provide limited free quotas, but availability and limits can change. Production traffic may require a paid Cloudflare plan. The buyer is responsible for Cloudflare registration, deployment, billing, monitoring and usage charges.

Offline modes—including VS Bot, Tournament, Pass & Play and Practice—do not require Cloudflare.

Main Features

Complete HTML5 and WebGL 3D browser game
Real-time two-player online multiplayer
Quick matchmaking and private invite rooms
Shareable private room codes and invitation links
Offline VS Bot matches
Configurable tournament matches
Local two-player Pass & Play mode
Practice range with stationery targets
Four customizable 3D pen models
Mouse and touchscreen controls
Direct Flick and Slingshot control techniques
Responsive desktop, tablet and mobile interface
Procedural Web Audio sound effects
Complete editable React and TypeScript source code
Ready-to-upload static production build
Included Cloudflare multiplayer backend source
Detailed installation, customization and deployment documentation

Realistic 3D Pen Physics

The custom physics system is designed specifically for tabletop pen battles. Players can use direction, power and impact position to create straight shots, glancing hits and rotational attacks.

Continuous collision detection between moving pens
Angular momentum and rotational torque
Spin-based flick trajectories
Pen mass, grip, speed, bounce and friction attributes
Desk surface friction and velocity damping
Edge overhang detection
Gravity and fall-off simulation
Pen-to-pen impact response
Desk boundary knockout detection
Double-knockout detection with neutral Round Dismissed results

Game Modes

Online Multiplayer

Challenge another player in a first-to-10-point online match. Players can use automatic matchmaking or create a private classroom desk with a room code and shareable invitation link.

Quick worldwide matchmaking
Private room creation and joining
Shareable room invitation URLs
First-to-10-point online matches
Custom pen model and color synchronization
Live aiming and physics synchronization
Turn and score synchronization
Rematch voting
In-game emoji taunts
Forfeit and exit handling
Expired abandoned-room protection

VS Bot

Play a quick offline duel against the classroom AI. Select Easy, Medium or Hard difficulty and practice different flick techniques without an internet connection.

Tournament

Create configurable point-based matches with 1, 3, 5, 10, 20 or custom goal points. Tournament matches can be played against the AI or through local Pass & Play.

Pass & Play

Two players can compete locally on the same computer, tablet or touchscreen device by taking turns.

Practice Range

Train aiming, power and spin against several stationary pen targets. The practice HUD includes a table radar and shot-speed display.

Four Custom Pen Archetypes

Gel Striker 0.7: Balanced precision gel pen
Titan 1928 Gold: Heavyweight luxury fountain pen
Sonic Clicker RT: Lightweight and agile ballpoint pen
Stealth Vane K-9: Tactical matte carbon striker

Each pen has individual speed, mass, spin, grip and bounce characteristics, allowing buyers to create additional models or rebalance the included pens.

Pencil Box & Customizer

Real-time interactive 3D pen showcase
Four selectable pen models
Multiple barrel and ink color presets
Immediate 3D material updates
Speed, mass and spin attribute displays
Selected model and colors are used during matches
Online opponents can see each player’s customized pen

Flexible Flick Controls

Direct Flick

Swipe forward across the selected pen to launch it in the direction of the gesture. Direct Flick is the default control technique.

Slingshot

Pull backward from the pen and release to launch it in the opposite direction. Power and direction are calculated from the original pointer-down position.

Mouse support
Touchscreen support
Power capping
Gesture cancellation protection
Optional trajectory guide
Persistent control preference

Real-Time Multiplayer Architecture

The included backend uses Cloudflare Workers, Durable Objects and secure WebSockets. Each match is assigned to a dedicated Durable Object, while a separate Matchmaker Durable Object manages quick matchmaking.

Server-authoritative turns and scoring
Validated round identifiers
Duplicate score protection
Out-of-turn flick rejection
Validated physics snapshots
Maximum two-player room capacity
Payload size validation
Message rate limiting
Player name, room code, color and pen-model sanitization
Authoritative knockout validation
Duplicate ready-state protection
Private-room expiry when the host disconnects

Cost-Aware Networking

Cloudflare WebSocket Hibernation API support
Connected but idle rooms can hibernate
Player and match state restored from WebSocket attachments
Automatic heartbeat replies without waking a hibernating room
Aim previews transmitted at up to 20 updates per second
Fast physics transmitted at up to 20 snapshots per second
Slow movement transmitted at 10 snapshots per second
Final settled positions transmitted immediately
Buffered interpolation for smooth opponent movement
Short bounded velocity prediction between snapshots

Actual service usage depends on match duration, movement time, connection count and reconnect frequency. Buyers should monitor their Cloudflare analytics and review current Cloudflare pricing and plan limits.

Game Interface

Responsive stationery-inspired main menu
Live score and goal-point HUD
Current-turn indicator
Shot-speed display
Table radar
Pause and resume controls
Round restart controls
Settings available from the menu and pause screen
Victory and round-result screens
Confetti victory celebration
How-to-play and keyboard-shortcut screen

Game Settings

Easy, Medium and Hard AI difficulty
Direct Flick or Slingshot control mode
Sound enable and mute controls
Adjustable sound volume
Trajectory guide toggle
Sunlight contact shadow toggle
Fair Fight mirror-pen mode

Fair Fight mode gives both competitors the same pen model with contrasting colors, ensuring equal pen statistics.

Procedural Sound System

Pen Fight 3D uses the browser Web Audio API to synthesize game sounds in real time. No external audio files are required.

Pen impact and clack sounds
Desk sliding and friction effects
Flick and whoosh effects
Pen fall sounds
Button feedback
Victory fanfare
Volume and mute controls

Technology Stack

React 19
TypeScript
Three.js
React Three Fiber
WebGL
Vite
Tailwind CSS
Zustand
Lucide React
Canvas Confetti
Web Audio API
Cloudflare Workers
Cloudflare Durable Objects
WebSockets

Responsive and Browser Ready

Desktop mouse controls
Mobile and tablet touch controls
Responsive interface layouts
Fullscreen game presentation
Modern WebGL-capable browser support
Static frontend deployment
Suitable for standard web hosting and HTML5 game portals
Can be embedded in websites using an iframe

Package Contents

production_build/ – Ready-to-upload frontend build
source_code/ – Editable React, TypeScript and Three.js source
source_code/server/ – Cloudflare multiplayer backend source
documentation/ – Illustrated browser-readable documentation
INSTRUCTIONS.txt – Quick installation and deployment guide
README.md – Architecture, development and customization guide
CHANGELOG.md – Complete version history
CREDITS.txt – Third-party libraries and licenses
Frontend and multiplayer regression tests

For marketplace transparency, the production JavaScript and CSS are intentionally readable and unminified. Stable asset filenames and a JavaScript source map are included. The original editable styles are available in source_code/src/index.css and source_code/src/App.css.

Requirements

Running the Ready Build

A modern WebGL-capable browser
A static web host, local web server or HTML5 game portal

Editing and Rebuilding

Node.js 18 or newer
npm
Basic React and TypeScript knowledge recommended

Online Multiplayer

Separate buyer-managed Cloudflare account
Cloudflare Workers and Durable Objects access
Wrangler authentication
Possible Cloudflare paid plan and usage charges

Quick Installation

Offline Game

Extract the downloaded package.
Open the production_build/ folder.
Upload its contents to your web root.
Open the uploaded index.html through your website URL.

Source Development

cd source_code
npm install
npm run dev

Production Build

npm run lint
npm run build

Multiplayer Deployment

cd source_code/server
npm install
npx wrangler login
npm run deploy

Add the deployed secure WebSocket endpoint to the frontend environment file:

VITE_MULTIPLAYER_WS_URL=wss://YOUR-WORKER.YOUR-SUBDOMAIN.workers.dev

Rebuild the frontend after changing the multiplayer endpoint.

Customization

The source is organized into clear modules for common modifications:

src/game/penData.ts – Pen models, statistics and colors
src/game/constants.ts – Arena and physics constants
src/game/physics/PhysicsEngine.ts – Physics simulation
src/components/game/PenMesh.tsx – Pen rendering
src/components/game/TableArena.tsx – Desk environment
src/components/ui/ – Menus, HUD and modal screens
src/network/MultiplayerManager.ts – WebSocket client
server/src/index.ts – Matchmaking, room validation and relay
server/wrangler.jsonc – Cloudflare bindings and migrations

Quality and Testing

TypeScript production build verification
Oxlint code-quality validation
React Doctor validation
Direct Flick and Slingshot regression tests
Power-capping and cancelled-gesture tests
Two-client multiplayer protocol integration test
Heartbeat and matchmaking tests
Duplicate-score protection tests
Turn-enforcement tests
Expired-room invitation tests

Third-Party Libraries

The project uses open-source libraries under their respective permissive licenses, including React, Three.js, React Three Fiber, Zustand, Vite, Tailwind CSS, Lucide React and Canvas Confetti. Full attribution and license information is included in CREDITS.txt.

Changelog

Version 1.0.5 – 20 August 2026

Updated the marketplace title to the BrandName | Item Classification format
Added explicit Cloudflare external-service and paid-plan disclosures
Replaced compressed hash-named production assets with readable CSS and JavaScript
Added stable asset filenames and a JavaScript source map
Added refreshed high-resolution marketplace screenshots

Version 1.0.4 – 19 August 2026

Improved Direct Flick and Slingshot reliability
Slingshot selection now persists across reloads
Gesture direction and power now use the real pointer-down position
Release coordinates are included in the final shot calculation
Cancelled gestures no longer launch a pen
Added flick-direction, power-cap and stationary-gesture regression tests
Removed a confusing circular desk marking
Updated the carved desk branding to UddiCode and UC

Version 1.0.3 – 18 August 2026

Added Cloudflare WebSocket hibernation
Added serialized multiplayer room-state restoration
Added automatic heartbeat replies for hibernating rooms
Reduced active network traffic with adaptive 10–20 Hz updates
Added smooth remote interpolation and short velocity prediction
Added heartbeat and quick-match regression coverage
Expanded deployment, capacity and troubleshooting documentation

Version 1.0.2 – 18 August 2026

Added buffered opponent movement interpolation
Added bounded remote-position extrapolation
Added expired abandoned-room invitation handling
Corrected rematch labels
Made online pause and exit controls available during either turn
Improved React and Three.js performance
Completed React Doctor, lint, type and build checks

Version 1.0.1 – 18 August 2026

Added authoritative online physics snapshots
Added exact round identifiers and duplicate-score protection
Added server-side turn, result and score validation
Added out-of-turn flick rejection
Prevented duplicate ready packets from resetting active matches
Corrected quick-match socket races and online restart behavior
Improved pause, resume and forfeit handling
Added neutral Round Dismissed results for double knockouts
Added live two-WebSocket multiplayer integration tests

Version 1.0.0 – Initial Release

Released the custom 3D pen physics system
Added continuous pen collision detection
Added torque, spin, friction, overhang and gravity simulation
Added four customizable pen models
Added the Pencil Box & Customizer
Added VS Bot, Tournament, Pass & Play and Practice modes
Added online multiplayer infrastructure
Added procedural Web Audio effects
Added responsive mouse and touchscreen controls
Added scores, turn announcements and victory celebrations

Support

Support is available through the CodeCanyon author profile. When requesting assistance, please include your browser and device details, reproduction steps, console errors and the Cloudflare Worker health response when the issue involves online multiplayer.

Pen Fight 3D | Real-Time Multiplayer HTML5 Physics Game