Workshop › Puzzle Bobble-style Bubble Shooter › Step 1 of 31
Shoot bubbles to pop three of a color and drop what they hold up. A hex grid in a 2D array, aiming with atan2, shots that bounce and snap into the grid, a flood fill for groups and another for what still hangs, a ceiling that comes down, and a guide that simulates the shot.
We start with the usual frame: find the canvas, take its 2D context, and a loop that paints a deep blue background about 60 times a second.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
function draw() {
ctx.fillStyle = '#1e1b4b'
ctx.fillRect(0, 0, canvas.width, canvas.height)
}
function loop() {
draw()
requestAnimationFrame(loop)
}
requestAnimationFrame(loop)
```canvas is the 400×520 canvas, ctx its pen.draw fills the whole canvas deep blue.loop draws and asks the browser to call it again before the next screen refresh; the last line starts it.Write the code under the three comment lines, then press Run.
Skills: Drawing on a canvas, The game loop