Trop Beach: Eight-Ball – 3D Browser Pool Game

Version 1.0 | True 3D Balls via Three.js r158 | VS Computer AI | 2-Player Local | No Build Step

Trop Beach: Eight-Ball is a complete browser billiards game built with vanilla HTML, CSS, and JavaScript. It recreates the classic 8-ball pool table with true 3D balls, full 8-Ball rules, and a smart computer opponent. Aim, strike, and rule the table — pot all seven of your assigned balls, then sink the black 8-ball to win.

Game Modes

VS Computer – Three skill tiers (Easy / Medium / Hard) with clearly different AI behavior
1 VS 1 Match – Local two-player turn-based play on one device

AI Difficulty

Easy – Direct shots only, human-like aim spray that grows with shot difficulty, relaxed cut angles (_{80°), and the occasional genuine miss}
Medium – Near-dead-center precision, tighter cut angles (87°), scratch-avoiding spin, combination & bank shots, and basic next-shot position planning
Hard – Expert play: razor precision (~89°), full spin control, next-shot position planning, pocket-traffic awareness, combo & bank shots, and snooker-hunting safety play — it will shut the table down instead of taking a desperate pot

Every tier lines its shot up visibly: the AI solves the exact stick angle with a ray-contact refinement (the object ball must head straight into the pocket mouth), eases the stick to that angle while the long guideline sweeps the table, then strikes along the solved line.

Tables, Cue Sticks & Aiming Aids

3 Table Designs – Classic Table, Navy Table, and Red Blue Table, each with its own measured pocket geometry
3 Cue Stick Designs – Classic Royal Oak, Midnight Carbon, and Crimson Dragon
Guideline – Long or short aiming guide with ghost-ball preview and first-impact prediction
Manual Controls – Optional cue power slider and fine-aim wheel; enabled by default on mobile, opt-in on desktop

8-Ball Rules

The Break – Cue ball placed behind the head string; potting any object ball keeps the break
Group Assignment – The first ball potted assigns your group: Solids (1–7) or Stripes (9–15)
Turn-Based Play – Pot one of your own balls to keep shooting; a missed or invalid shot passes the turn
Fouls – Scratch (cue ball pocketed), wrong-group contact, and no-contact shots foul; the opponent gets ball-in-hand anywhere on the table
8-Ball Last – Clear your entire group first, then pot the black 8-ball to win. Pocketing the 8-ball early (or with a foul) is an instant loss

Controls

Move the mouse or finger around the table to aim
Click & drag backward away from the cue ball to set power, then release to shoot
Cue Power Slider – Drag down to pull the cue and shoot (manual mode)
Fine-Aim Wheel – Drag up and down for micro-aim precision (manual mode)
Spin Control – Drag the dot on the cue-ball widget for English spin, follow, or draw/backspin; a fullscreen spin modal is included as well
Arrow Keys – Nudge spin on desktop; Escape closes the spin overlay

Features

True 3D balls rendered in real time with Three.js r158 (glossy Vault Cue-style solids, stripes, and 8-ball with readable numerals); automatic 2D glossy-sphere fallback when WebGL is unavailable
Authentic 8-Ball physics: cushion rails with open pocket mouths, pocket capture, ball-in-hand, and cloth bounds guard — balls always stop, rebound, or drop into pockets correctly
Recorded pool sound effects (cue strike, ball impacts, cushion thumps, pocket drops) with a natural slate-table reverb tail, plus optional background music
Clear turn, foul, and group banners, plus a live top bar that tracks each player’s remaining balls
First-time player tutorial overlay, win/lose celebration screen with confetti, pause, and new-game flows
Pre-game ad slot with countdown (disabled by default, configurable) and a ready-to-edit sponsor placeholder iframe
Fully responsive — desktop, tablet, and mobile, with a landscape rotate overlay for portrait phones
No build step: open the main file directly or deploy to any static host

Tech Stack

Vanilla HTML5 + CSS3 custom properties (no frameworks)
Three.js r158 for 3D ball rendering (bundled locally in scripts/js/library/three.js)
Canvas 2D overlay engine for table geometry, physics, and the manual cue renderer
Web Audio API for sound effects (WAV files via fetch over http(s); native HTMLAudio fallback on file://)
HTML5 Audio for background music (scripts/sounds/bg-music.mp3)
LocalStorage for sound, music, mode, table, cue, guideline, and tutorial preferences

Third-Party Services & Dependencies

Three.js r158 – bundled locally; required for 3D balls (2D fallback otherwise)
Google Fonts (Bungee) – loaded via CDN (fonts.googleapis.com); the game falls back to system fonts when offline
Font Awesome 6.5.1 – loaded via CDN (cdnjs.cloudflare.com) for small UI icons

These are third-party resources and are outside the author’s control. An internet connection is required to load the CDN-hosted fonts and icons unless you replace them with local copies.

Advertisement Integration

Important: Ad network integrations such as Google AdSense, AdMob, and ironSource are third-party external services not affiliated with or included in this product. Each network operates independently and has its own account registration process, eligibility requirements, approval policies, and potentially associated costs. Trop Beach: Eight-Ball provides the ad slot infrastructure only — buyers are solely responsible for obtaining their own accounts, meeting each network’s requirements, and complying with their respective terms of service.

Ad behavior is controlled entirely from scripts/config/ads.js (master switch, pre-game toggle, skip countdown)
A ready-made sponsor placeholder iframe (scripts/sponsor/sponsor-placeholder.html, 300 × 250 Medium Rectangle) ships with step-by-step comments for wiring your own ad network
Ads are disabled by default — no third-party ad code runs unless you enable it and paste in your own scripts

FAQ – Ad Network Approval

Do ads work out of the box? No. The game ships with the ad slot infrastructure only — the placeholder iframe and a config file. No third-party ad code runs unless you add it.
Who approves my ad account? Account registration and approval are handled entirely by each third-party ad network (for example Google AdSense). The product and its author do not approve, guarantee, or speed up their decisions.
Are there any costs or terms? Yes — ad networks have their own eligibility requirements, usage policies, and possibly associated costs. Buyers are responsible for meeting them.
How long does approval take? Review and approval times vary depending on the provider, so plan accordingly.

Requirements

Chrome 80+ / Firefox 74+ / Safari 13.1+ / Edge 80+ / Opera 67+ (the code uses native optional-chaining syntax with no transpiling, so these are hard minimums, not just recommendations)
JavaScript, Canvas, LocalStorage, and WebAudio support
WebGL recommended for the 3D ball renderer (graceful 2D fallback included)
Landscape orientation recommended on mobile (rotate overlay included)
Internet connection required only for CDN-hosted fonts and icons on first load

Trop Beach: Eight-Ball | HTML5 3D Billiards Game