Workshop › Space Invaders-style › Step 1 of 21
Hold the line against a marching alien formation. Shot cooldowns, bullet lists, group movement, a speed-up that emerges from the rules, and enemy fire.
We are building a Space Invaders-style shooter: rows of invaders march down, and your ship at the bottom shoots them. First the ship: a cyan box with a small cannon on top, in the middle of the bottom.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const SHIP_Y = 480
const SHIP_W = 36
const SHIP_H = 16
let ship = { x: canvas.width / 2 - SHIP_W / 2, y: SHIP_Y, w: SHIP_W, h: SHIP_H }
function draw() {
ctx.fillStyle = '#020617'
ctx.fillRect(0, 0, canvas.width, canvas.height)
ctx.fillStyle = '#22d3ee'
ctx.fillRect(ship.x, ship.y, ship.w, ship.h)
ctx.fillRect(ship.x + SHIP_W / 2 - 3, ship.y - 6, 6, 6)
}
draw()
```canvas.width / 2 - SHIP_W / 2 puts the ship's middle in the middle of the canvas.Write the lines under the comments, then press Run.
Skills: Drawing on a canvas