LIVE PREVIEWBUY FOR $22

Bobble Brawl – HTML5 Boxing Recreation

A whole, skilled HTML5 boxing recreation packed right into a single self-contained file. No libraries. No dependencies. No server. Open index.html in any browser and play instantly. Embed it in an iframe, drop it on a CDN, or customise and resell — no construct instruments required.

GAME MODES

VS AI — Battle the pc at Simple, Medium, or Arduous issue.

2-Participant Native — Participant 1 on mouse, Participant 2 on keyboard on the similar desk. No community or further {hardware} wanted.

GAMEPLAY FEATURES

Bobblehead Physics
A spring-damper system makes each hit really feel satisfying. The top launches again on impression and bounces realistically based mostly on hit drive.

Inverse Kinematics Arms
2-bone IK animation utilizing the regulation of cosines. Punches visually journey from the shoulder and land instantly on the opponent’s physique.

Sensible AI Opponent
Three issue tiers with distinct behaviour — Simple (720ms response, 28% aggression), Medium (360ms, 62%), Arduous (120ms, 90%). The AI blocks, counterattacks, and varies its patterns per tier.

Bounce Over Your Opponent
A full arc soar that clears the opponent utterly. Hole enforcement is disabled whereas airborne so fighters can leap over one another.

Three Assault Sorts
Jab (quick, protected, low harm), Cross (energy punch, excessive harm), Uppercut (upward arc, ideally suited KO finisher). Every assault has a definite arm swing animation.

Block and Stamina
Blocking absorbs 65% of incoming harm however drains the Stamina bar. Stamina recharges routinely when not blocking or attacking.

Combo Multiplier
Land 3 or extra consecutive hits in fast succession to set off a Combo Multiplier that reinforces your rating for every further hit.

Low HP Hazard Warning
When HP drops to 25% or under, the display edges pulse with a purple vignette — clear visible strain that alerts imminent hazard.

KO Sluggish Movement
A knockout triggers a cinematic 0.18x slow-motion impact for 1.3 seconds, full with display shake and a particle star explosion.

Visible Results
Hit-flash white glow on harm, particle sweat and stars, dizzy orbit stars across the head, ring spotlights, animated crowd, and display shake on heavy hits.

Procedural Audio
All sound results are synthesised in actual time by way of Internet Audio API. No audio recordsdata are wanted. Jabs, crosses, uppercuts, bell, KO, crowd cheer, and ambient crowd noise are all generated on the fly.

CONTROLS

Participant 1 — Mouse
Transfer Transfer mouse left / proper over the ring
Jab Left click on
Cross Proper click on (fast faucet)
Block Maintain proper mouse button
Uppercut Scroll wheel up or Q key
Bounce W key

Participant 2 — Keyboard
Transfer Left / Proper Arrow keys
Bounce Up Arrow key
Block Down Arrow key (maintain)
Jab Numpad 1
Cross Numpad 2
Uppercut Numpad 3

Common Controls
P or ESC Pause / Resume
Pause toolbar button Pause / Resume
Finish toolbar button Finish the present match early
Settings button Open settings display
Mute button Toggle sound on / off
Fullscreen button Enter / exit fullscreen

ALL SCREENS AND UI 

- Loading splash display with animated title card and progress bar
- Primary menu with VS AI and 2-Participant choices
- How To Play display proven routinely earlier than the primary match
- Fighter palette choice — 4 color schemes to select from
- Get Prepared countdown — 3-second lead-in earlier than every spherical
- Battle HUD — HP bars with drain path, Stamina bars, spherical timer, spherical counter, fighter names
- Pause menu — Resume, Restart Spherical, Finish Recreation, Stop to Menu (mouse and keyboard)
- Spherical finish announcement display
- Recreation Over display with winner banner, each scores, and excessive rating leaderboard
- Settings display with all configurable choices
- High toolbar — always-visible Mute, Settings, Fullscreen, Pause, and Finish Recreation buttons
- Combo label — animated pop-up on rapid-fire combos

SETTINGS AND PERSISTENCE

All settings are saved to localStorage and restored routinely on the following go to. 

- Rounds per match: 3 / 5 / 7  (default 5)
- AI Problem: Simple / Medium / Arduous  (default Medium)
- Sound: On / Off
- Spherical time: 30 / 60 / 90 seconds  (default 60)
- Excessive Rating leaderboard — prime 10 scores with date and winner, latest entry highlighted
- Clear Scores button — out there in each the Settings display and the Recreation Over display

CUSTOMIZATION

All the things lives in a single file. Open index.html in any textual content editor — no construct instruments, no terminal, no npm.

Change default match settings by enhancing the GS object close to the underside of the script: 

rounds:        5    // 3, 5, or 7
rTimeSetting:  60   // seconds per spherical — 30, 60, or 90
aiDiff:        1    // 0 = Simple   1 = Medium   2 = Arduous

Add or change fighter color schemes within the PALETTES array: 

{ title:'Crimson Fury', pores and skin:'#f4be9a', shorts:'#d41c1c',
  gloves:'#a80c0c', sneakers:'#1a1a1a' }

Change AI names per issue within the AINAMES array. Disable sound by default by altering let sfxOn = true to false. Exchange the sport title by looking out and changing BOBBLE BRAWL. All button kinds, toolbar structure, and hues are within the <model> block on the prime of the file.

EMBEDDING

Mounted dimension: 

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

Responsive — scales to any container width:

<iframe src=”index.html” allowfullscreen
model=”place:absolute;prime:0;left:0;width:100%;peak:100%;border:0”>
</iframe>

TECHNICAL SPECIFICATIONS 

Expertise            HTML5 Canvas 2D API + Vanilla JavaScript (ES2020)
Exterior dependencies None
Audio recordsdata           None — all SFX synthesised by way of Internet Audio API
Picture recordsdata           None — all graphics drawn on canvas at runtime
File rely            1  (single self-contained HTML file)
File dimension             ~85 KB
Canvas decision     900 x 490 logical pixels
DPR scaling           Integer device-pixel-ratio — crisp on Retina and 4K shows
Body price            60 fps by way of requestAnimationFrame
Physics               Spring-damper bobblehead  (Ok = 0.055, B = 0.84)
Arm animation         2-bone inverse kinematics by way of regulation of cosines
Persistence           localStorage for settings and excessive scores
Fullscreen            Native Fullscreen API
Contact assist         Pointer occasions and on-screen buttons for cell 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 within the file so the sport additionally runs on older browser variations with rounded-corner shapes rendered by way of the usual arcTo fallback.

WHAT IS INCLUDED 

index.html     The whole recreation — open this to play
README.md      Fast begin information, full controls reference, embedding
               directions, and customization documentation
CHANGELOG.md   Full model 1.0 function checklist
LICENSE.txt    Envato Common and Prolonged license discover

SUPPORT

For bug stories, customization questions, or function requests please use the Feedback part on the CodeCanyon merchandise web page. Typical response time is inside 48 hours on enterprise days.


Source