Workshop › Tower Defense › Step 1 of 42
Build towers beside the road and stop the waves before they get through. Walking along a path by distance, turning mouse clicks into tiles, choosing targets, homing bullets, splash damage and waves that grow stronger.
We are building a tower defense game: enemies walk along a road, and the towers you build beside it shoot them. First the measures: a map of 12 × 9 tiles of 40 pixels, with a strip on top for gold, lives and buttons. Then a dark background.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const TILE = 40
const COLS = 12
const ROWS = 9
const TOP = 40 // room for gold, lives and the tower buttons
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.TOP (40) down to 400; the last 40 pixels are for a
bottom bar later.fillRect(x, y, width, height) paints a rectangle in the fillStyle color; (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