feat: add top boundary

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>

src/js/app.js

@@ -1,14 +1,14 @@
 import { testCollision } from './collisions.js'
 import { drawShape } from './draw.js'
-import { makeAstronaut, makeBottomBoundary } from './world.js'
+import { makeAstronaut, makeBoundary } from './world.js'
 
 /** @typedef {import('./shape').Shape} Shape */
 
 // Global on purpose
 /** @type {Shape} */
 let astronaut
-/** @type {Shape} */
-let bottomBoundary
+/** @type {Array<Shape>} */
+const boundaries = []
 /** @type {HTMLCanvasElement} */
 let canvas
 /** @type {CanvasRenderingContext2D} */
@@ -38,12 +38,24 @@ export function app () {
   astronaut = makeAstronaut()
 
   const boundaryHeight = 2
-  bottomBoundary = makeBottomBoundary({
-    x: 0,
-    y: canvas.height - boundaryHeight,
-    height: boundaryHeight,
-    width: canvas.width
-  })
+  boundaries.push(
+    makeBoundary({
+      x: 0,
+      y: canvas.height - boundaryHeight,
+      height: boundaryHeight,
+      width: canvas.width
+    })
+  )
+
+  boundaries.push(
+    makeBoundary({
+      x: 0,
+      y: 0 + boundaryHeight,
+      height: boundaryHeight,
+      width: canvas.width
+    })
+  )
+
   tick()
 }
 
@@ -51,12 +63,17 @@ export function app () {
 // See https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#notes
 function tick () {
   context.clearRect(0, 0, canvas.width, canvas.height)
-  drawShape(context, bottomBoundary)
+  boundaries.forEach(function (boundary) {
+    drawShape(context, boundary)
+  })
+
   drawShape(context, astronaut)
 
-  if (testCollision(bottomBoundary, astronaut)) {
-    throw new Error('Game Over!')
-  }
+  boundaries.forEach(function (boundary) {
+    if (testCollision(boundary, astronaut)) {
+      throw new Error('Game Over!')
+    }
+  })
 
   window.requestAnimationFrame(tick)
 }