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

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

1. Extract the downloaded package.
2. Open the production_build/ folder.
3. Upload its contents to your web root.
4. 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.