raw Software

HTML5 Boomshine

Robert Eisele

HTML5 Boomshine is a canvas chain-reaction game built around one decision: where to place the initial explosion. Time-based motion, circle collision tests, staged explosion radii, and an exponential level target turn that single action into a compact probability and timing puzzle.

Read the story

HTML5 Boomshine is a canvas chain-reaction game. Moving balls bounce around the board, but the player may place only one expanding circle. Every ball touched by an active circle becomes another explosion, so position and timing determine how far the reaction spreads.

Detecting a Reaction

A moving ball with center \((x_b,y_b)\) and radius \(r_b\) intersects an explosion centered at \((x_e,y_e)\) with radius \(r_e\) when

\[ (x_b-x_e)^2+(y_b-y_e)^2\leq(r_b+r_e)^2. \]

No square root is needed. Comparing squared distance with squared combined radius gives the same decision and is evaluated repeatedly while a reaction is active. A newly intersected ball stops moving and joins the set of expanding circles, which allows the same test to propagate the chain.

Explosion Timing

Each explosion grows linearly to its maximum radius, remains open for a fixed interval, and then contracts linearly. If \(T_g\) is the growth time, \(T_h\) the hold time, and \(R\) the maximum radius, its radius is a piecewise function of elapsed time \(t\):

\[ r(t)= \begin{cases} R\,t/T_g, & 0\leq t<T_g,\\ R, & T_g\leq t<T_g+T_h,\\ R\left(1-\dfrac{t-T_g-T_h}{T_g}\right), & T_g+T_h\leq t<2T_g+T_h,\\ 0, & t\geq2T_g+T_h. \end{cases} \]

Ball movement uses elapsed seconds rather than one fixed displacement per animation frame. The game therefore runs at the same physical speed on displays with different refresh rates. Fast mode changes the velocity and explosion timings deliberately instead of relying on global page clicks.

Level Progression

Level \(L\) contains \(N=5L\) balls. The required count follows a capped exponential curve,

\[ K(L)=\min\left(N-1,\operatorname{round}\left(e^{L/15-1}N\right)\right). \]

Early levels leave room to learn the timing, while later levels demand that nearly every ball joins the chain. A successful reaction adds its caught-ball count to the score and advances to the next level; an unsuccessful reaction restarts the current level.