Bobble Brawl - HTML5 Boxing Game

Bobble Brawl – HTML5 Boxing Game

A complete, professional HTML5 boxing game packed into a single self-contained file. No libraries. No dependencies. No server. Open index.html in any browser and play immediately. Embed it in an iframe, drop it on a CDN, or customize and resell — no build tools required.

GAME MODES

VS AI — Fight the computer at Easy, Medium, or Hard difficulty.

2-Player Local — Player 1 on mouse, Player 2 on keyboard at the same desk. No network or extra hardware needed.

GAMEPLAY FEATURES

Bobblehead Physics A spring-damper system makes every hit feel satisfying. The head launches back on impact and bounces realistically based on hit force.

Inverse Kinematics Arms 2-bone IK animation using the law of cosines. Punches visually travel from the shoulder and land directly on the opponent’s body.

Smart AI Opponent Three difficulty tiers with distinct behaviour — Easy (720ms reaction, 28% aggression), Medium (360ms, 62%), Hard (120ms, 90%). The AI blocks, counterattacks, and varies its patterns per tier.

Jump Over Your Opponent A full arc jump that clears the opponent completely. Gap enforcement is disabled while airborne so fighters can leap over each other.

Three Attack Types Jab (fast, safe, low damage), Cross (power punch, high damage), Uppercut (upward arc, ideal KO finisher). Each attack has a distinct arm swing animation.

Block and Stamina Blocking absorbs 65% of incoming damage but drains the Stamina bar. Stamina recharges automatically when not blocking or attacking.

Combo Multiplier Land 3 or more consecutive hits in rapid succession to trigger a Combo Multiplier that boosts your score for each additional hit.

Low HP Danger Warning When HP drops to 25% or below, the screen edges pulse with a red vignette — clear visual pressure that signals imminent danger.

KO Slow Motion A knockout triggers a cinematic 0.18x slow-motion effect for 1.3 seconds, complete with screen shake and a particle star explosion.

Visual Effects Hit-flash white glow on damage, particle sweat and stars, dizzy orbit stars around the head, ring spotlights, animated crowd, and screen shake on heavy hits.

Procedural Audio All sound effects are synthesised in real time via Web Audio API. No audio files are needed. Jabs, crosses, uppercuts, bell, KO, crowd cheer, and ambient crowd noise are all generated on the fly.

CONTROLS

Player 1 — Mouse Move Move mouse left / right over the ring Jab Left click Cross Right click (quick tap) Block Hold right mouse button Uppercut Scroll wheel up or Q key Jump W key

Player 2 — Keyboard Move Left / Right Arrow keys Jump Up Arrow key Block Down Arrow key (hold) Jab Numpad 1 Cross Numpad 2 Uppercut Numpad 3

Universal Controls P or ESC Pause / Resume Pause toolbar button Pause / Resume End toolbar button End the current match early Settings button Open settings screen Mute button Toggle sound on / off Fullscreen button Enter / exit fullscreen

ALL SCREENS AND UI

- Loading splash screen with animated title card and progress bar - Main menu with VS AI and 2-Player options - How To Play screen shown automatically before the first match - Fighter palette selection — 4 colour schemes to choose from - Get Ready countdown — 3-second lead-in before each round - Fight HUD — HP bars with drain trail, Stamina bars, round timer, round counter, fighter names - Pause menu — Resume, Restart Round, End Game, Quit to Menu (mouse and keyboard) - Round end announcement screen - Game Over screen with winner banner, both scores, and high score leaderboard - Settings screen with all configurable options - Top toolbar — always-visible Mute, Settings, Fullscreen, Pause, and End Game buttons - Combo label — animated pop-up on rapid-fire combos

SETTINGS AND PERSISTENCE

All settings are saved to localStorage and restored automatically on the next visit.

- Rounds per match: 3 / 5 / 7  (default 5) - AI Difficulty: Easy / Medium / Hard  (default Medium) - Sound: On / Off - Round time: 30 / 60 / 90 seconds  (default 60) - High Score leaderboard — top 10 scores with date and winner, newest entry highlighted - Clear Scores button — available in both the Settings screen and the Game Over screen

CUSTOMIZATION

Everything lives in one file. Open index.html in any text editor — no build tools, no terminal, no npm.

Change default match settings by editing the GS object near the bottom of the script:

rounds:        5    // 3, 5, or 7 rTimeSetting:  60   // seconds per round — 30, 60, or 90 aiDiff:        1    // 0 = Easy   1 = Medium   2 = Hard

Add or change fighter colour schemes in the PALETTES array:

{ name:'Red Fury', skin:'#f4be9a', shorts:'#d41c1c',   gloves:'#a80c0c', shoes:'#1a1a1a' }

Change AI names per difficulty in the AINAMES array. Disable sound by default by changing let sfxOn = true to false. Replace the game title by searching and replacing BOBBLE BRAWL. All button styles, toolbar layout, and colours are in the <style> block at the top of the file.

EMBEDDING

Fixed size:

<iframe src="index.html" width="900" height="640"    frameborder="0" allowfullscreen></iframe>

Responsive — scales to any container width:

TECHNICAL SPECIFICATIONS

Technology            HTML5 Canvas 2D API + Vanilla JavaScript (ES2020) External dependencies None Audio files           None — all SFX synthesised via Web Audio API Image files           None — all graphics drawn on canvas at runtime File count            1  (single self-contained HTML file) File size             ~85 KB Canvas resolution     900 x 490 logical pixels DPR scaling           Integer device-pixel-ratio — crisp on Retina and 4K displays Frame rate            60 fps via requestAnimationFrame Physics               Spring-damper bobblehead  (K = 0.055, B = 0.84) Arm animation         2-bone inverse kinematics via law of cosines Persistence           localStorage for settings and high scores Fullscreen            Native Fullscreen API Touch support         Pointer events and on-screen buttons for mobile play

BROWSER COMPATIBILITY

Chrome    99 and above Firefox   112 and above Safari    15.4 and above Edge      99 and above

A ctx.roundRect polyfill is included in the file so the game also runs on older browser versions with rounded-corner shapes rendered via the standard arcTo fallback.

WHAT IS INCLUDED

index.html     The complete game — open this to play README.md      Quick start guide, full controls reference, embedding                instructions, and customization documentation CHANGELOG.md   Complete version 1.0 feature list LICENSE.txt    Envato Regular and Extended license notice

SUPPORT

For bug reports, customization questions, or feature requests please use the Comments section on the CodeCanyon item page. Typical response time is within 48 hours on business days.