A pastel bubble shooter whose AI traces 640 bank shots before every throw.
Bubbles hang in an offset hex grid, and a shot travels in a straight line that reflects exactly off the side walls; each leg is solved analytically as a ray against the walls, the ceiling and every bubble grown by the shot's radius, so the dotted aim guide is exactly where the bubble will go. Where it lands, a flood fill finds its same-colored cluster, three or more pop in a ripple outward from the impact, and a second flood fill from the ceiling finds every bubble left hanging, which falls under gravity and scores when it hits the tray. Before each throw the AI traces 640 launch angles with that same routine and simulates the pop and the drop for both the loaded and the spare bubble; the fan of rays is that search, colored by payoff. Neighboring angles that land in the same cell form a window, and the AI weighs each window's outcome and bank bonus against the chance of hitting a window that narrow with a little aim error, then fires through its middle. Miss too often and a new row pushes in from the top.
Try it. Point to aim and click to shoot (on a touch screen, drag and release), or use the arrow keys and space. Tap the spare bubble or press X to swap. While you play the planner panel compares your aim with its own best shot, and H draws its line on the board. G toggles your aim guide and N deals a new board. The AI takes over after six idle seconds.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a bubble shooter game with JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step,.
Start simple:
- Make a canvas that fills the window and stays sharp on high-DPI screens. Center a tall playfield and work in board units where a bubble's radius is 1.
- Store the bubbles in an offset hex grid: 11 columns, rows spaced sqrt(3) apart, every other row shifted right by one unit and one bubble shorter. Fill the top 8 rows with 5 colors, often copying a neighbor's color so clusters form.
- Put a launcher at the bottom center. The mouse aims it and a click fires the loaded bubble. Move the shot in small steps, reflect it off the side walls, and stop it at the ceiling or within about 1.7 units of a bubble.
- Snap it into the nearest empty cell that touches the ceiling or a bubble. Flood fill its same-colored group and pop it if it has 3 or more, then flood fill from the top row and drop everything left unconnected.
Once that works, make it beautiful and smart:
- Draw glossy pastel bubbles with a radial gradient and a white highlight, cached per color in an offscreen canvas.
- Replace the stepping with an exact trace: solve each leg as a ray against the walls, the ceiling and every bubble (ray-circle intersection), and draw the resulting path as a dotted aim guide.
- Let dropped bubbles fall with gravity and burst into particles, and make nearby bubbles wobble on springs when something lands.
- Add an autoplayer: trace a few hundred angles, simulate what each one would pop and drop, and fire the best.
Explain the key ideas in short code comments. When done, suggest three directions I could take it next, such as rewarding bank shots with a score multiplier, pushing a new row in after a few misses, or letting the autoplayer weigh a narrow shot's risk of missing.
