Workshop › Scorched Earth-style Artillery › Step 1 of 23
Lob shells over the hills at a computer opponent. Hills from added sine waves stored as a height map, aiming by angle and power (and the atan2 trap), flight one frame at a time, round craters dug into the ground, damage that falls off with distance, wind, and a computer that aims by imagining thousands of shots.
We are building an artillery game like Scorched Earth: two tanks on hills lob shells at each other. First the ground. It is a height map: a list with one number for every column of pixels, the y of the surface there. For now it is flat.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const W = canvas.width
const H = canvas.height
let ground // ground[x]: the y of the surface in column x
function makeGround() {
ground = []
for (let x = 0; x < W; x++) {
let y = 220
ground.push(y)
}
}
function draw() {
ctx.fillStyle = '#7dd3fc'
ctx.fillRect(0, 0, W, H)
ctx.fillStyle = '#65a30d'
for (let x = 0; x < W; x++) ctx.fillRect(x, ground[x], 1, H - ground[x])
}
makeGround()
draw()
```W and H are short names for the canvas size, used everywhere.ground[x] is where the grass starts in column x; everything below it is ground.Write the lines under the comments, then press Run.
Skills: Drawing on a canvas, Arrays and objects