Workshop › Angry Birds-style Slingshot › Step 1 of 47
Launch birds at towers of wood and stone and knock out the pigs. Aiming with an angle and a pull, gravity and the parabola (drawn before you shoot), boxes that stack, push and bounce by their mass, damage from hard hits, three birds per level, and levels written as data and tested to stand.
We are building a slingshot game: pull a bird back, let go, knock down towers. Everything is drawn on the page's
<canvas>. The first thing we draw is the sling's wooden post.
```js
const canvas = document.getElementById('game')
const ctx = canvas.getContext('2d')
const GROUND = 290
const SLING = { x: 90, y: 220 } // where the bird sits before it is launched
ctx.fillStyle = '#78350f'
ctx.fillRect(SLING.x - 4, SLING.y, 8, GROUND - SLING.y)
```getElementById('game') finds the canvas; getContext('2d') gives ctx, the object with all the drawing commands.GROUND is the y where the ground starts. SLING is an object: the top of the sling, SLING.x and SLING.y.(0, 0) is the top-left corner and y grows downwards.fillRect(x, y, width, height) paints a rectangle in the fillStyle color: 8 pixels wide, centered on SLING.x,
from the top of the sling down to the ground.Write the code under the three comment lines, then press Run.
Skills: Drawing on a canvas