Workshop › Lunar Lander › Step 18 of 31
On a phone there are no arrow keys. Touching the left, middle or right third of the screen holds the matching key in
keys; lifting the finger releases it.
```js
// Touch: hold the left third to turn left, the right third to turn right, the middle for the engine.
canvas.addEventListener('pointerdown', (event) => {
const rect = canvas.getBoundingClientRect()
const third = ((event.clientX - rect.left) / rect.width) * 3
keys[third < 1 ? 'ArrowLeft' : third < 2 ? 'ArrowUp' : 'ArrowRight'] = true
})
function stopTouch() {
keys.ArrowLeft = false
keys.ArrowUp = false
keys.ArrowRight = false
}
canvas.addEventListener('pointerup', stopTouch)
canvas.addEventListener('pointercancel', stopTouch)
```third is 0 to 3 across the canvas: below 1 is the left third, below 2 the middle, the rest the right.? : in a row pick one of three key names; that key is set to true in keys.stopTouch releases all three. It runs when the finger lifts (pointerup) or the touch is cancelled.Write the touch code above function burning() {, followed by an empty line.
Skills: Keyboard and mouse input