Workshop › Scorched Earth-style Artillery › Step 3 of 23

Two tanks

What we are doing

Two tanks: yours (blue) on the left, the computer's (red) on the right. Each remembers where it is, its health, and how it aims. They sit on the ground: groundAt(x) tells the ground's height at any x, even between or outside columns.

```js
let tanks // [you, the computer]: { x, y, hp, angle, power, color }

const groundAt = (x) => ground[Math.max(0, Math.min(W - 1, Math.round(x)))]

function reset() {
  makeGround()
  tanks = [
    { x: 70, y: 0, hp: 100, angle: -Math.PI / 4, power: 8, color: '#2563eb' },
    { x: W - 70, y: 0, hp: 100, angle: (-3 * Math.PI) / 4, power: 8, color: '#dc2626' },
  ]
  for (const t of tanks) t.y = groundAt(t.x)
}

  for (const t of tanks) {
    ctx.fillStyle = t.color
    ctx.fillRect(t.x - 10, t.y - 8, 20, 8)
  }

reset()
```

What it means

groundAt rounds x to a column and keeps it on the canvas, so any x is safe.
A tank's x, y is the middle of its bottom edge, so it is drawn 10 pixels to each side and 8 up.
The angles point up-right (−45°) for you and up-left (−135°) for the computer: up is negative on a canvas.

Your turn

Under ground, write tanks.
Under makeGround, write groundAt and reset.
At the end of draw, draw the tanks; at the bottom, call reset() instead of makeGround().

Skills: Drawing on a canvas, Arrays and objects

← Hills The barrel →

All steps