Workshop › Asteroids › Step 4 of 41

A triangle ship

What we are doing

The ship is a triangle: the nose at angle, and two back corners at angle + 2.5 and angle - 2.5, the same distance away. Because every corner comes from the angle, the whole triangle turns with it.

```js
const left = { x: ship.x + Math.cos(ship.angle + 2.5) * SHIP_R, y: ship.y + Math.sin(ship.angle + 2.5) * SHIP_R }
const right = { x: ship.x + Math.cos(ship.angle - 2.5) * SHIP_R, y: ship.y + Math.sin(ship.angle - 2.5) * SHIP_R }
ctx.beginPath()
ctx.moveTo(tip.x, tip.y)
ctx.lineTo(left.x, left.y)
ctx.lineTo(right.x, right.y)
ctx.closePath()
```

What it means

left and right are the back corners, 2.5 radians either side of the nose.
The pen goes nose → left → right, and closePath draws the last line back to the nose.

Your turn

In drawShip, write left and right under tip, and replace the line to the center with the two corner lines and closePath().

Skills: Drawing on a canvas

← Which way it points Which keys are down? →

All steps