Workshop › Bomberman-style Arena › Step 1 of 42
Blast through crates and trap the enemies. A grid of walls, pillars and crates, sliding from tile to tile, bombs with fuses, cross-shaped explosions that stop at walls and set off chain reactions, wandering enemies, power-ups kept in a Map, and touch controls that reuse the keyboard's rules.
We are building a Bomberman-style game: an arena of tiles, bombs, flames and enemies. First the measures: 13 columns and 11 rows of 32-pixel tiles, with a 32-pixel strip on top for the lives and the time. Then a dark background.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const COLS = 13
const ROWS = 11
const TILE = 32
const TOP = 32 // room for the lives and the time
ctx.fillStyle = '#0f172a'
ctx.fillRect(0, 0, canvas.width, canvas.height)
```getElementById('game') finds the canvas; getContext('2d') gives ctx, the object with the drawing commands.fillStyle picks the color and fillRect(x, y, width, height) paints a rectangle; (0, 0) is the top-left
corner, and y grows downwards.Write the code under the three comment lines, then press Run.
Skills: Drawing on a canvas