Workshop › Missile Command-style Defense › Step 1 of 35
Click the sky to fire interceptors and protect six cities from falling missiles. Moving towards a target at a set speed, explosions that grow and shrink, chain reactions, limited ammo, waves and missiles that split.
Every game needs something to lose. Here it is six cities standing on the ground under a night sky.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const GROUND = 370
const CITY_XS = [50, 110, 170, 310, 370, 430]
ctx.fillStyle = '#020617'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = '#854d0e'
ctx.fillRect(0, GROUND, canvas.width, canvas.height - GROUND)
ctx.fillStyle = '#38bdf8'
for (const x of CITY_XS) {
ctx.fillRect(x - 16, GROUND - 14, 32, 14)
}
```canvas and ctx are the canvas and its 2D drawing context.GROUND is the y where the ground starts; CITY_XS lists the middle x of each city.GROUND down to the bottom (30 pixels).for (const x of CITY_XS) draws one 32×14 block per city, centered on its x and standing on the ground.Write the code under the three comment lines, then press Run.
Skills: Drawing on a canvas, Arrays and objects