feat: control gravity

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

src/js/app.js

@@ -1,5 +1,6 @@
 import { testCollision } from './collisions.js'
 import { drawShape } from './draw.js'
+import { Vec2 } from './vector.js'
 import { makeAstronaut, makeBoundary } from './world.js'
 
 /** @typedef {import('./shape').Shape} Shape */
@@ -13,6 +14,8 @@ const boundaries = []
 let canvas
 /** @type {CanvasRenderingContext2D} */
 let context
+/** @type {number} */
+let gravity
 
 /**
  * Entry point into the game.
@@ -26,6 +29,14 @@ export function app () {
     return
   }
 
+  const input = document.getElementById('gravity')
+  if (!input) {
+    console.error('Could not start game!')
+    return
+  }
+
+  input.addEventListener('change', updateGravity)
+
   canvas = /** @type {HTMLCanvasElement} */(game)
   const ctx = canvas.getContext('2d')
 
@@ -35,6 +46,31 @@ export function app () {
   }
 
   context = ctx
+  gravity = parseFloat(/** @type {HTMLInputElement} */(input).value)
+  createObjectsInWorld()
+  tick()
+}
+
+/* TODO: Add some paint-FPS to UI */
+// See https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#notes
+function tick () {
+  context.clearRect(0, 0, canvas.width, canvas.height)
+  boundaries.forEach(function (boundary) {
+    drawShape(context, boundary)
+  })
+
+  drawShape(context, astronaut, Vec2(0, gravity))
+
+  boundaries.forEach(function (boundary) {
+    if (testCollision(boundary, astronaut)) {
+      throw new Error('Game Over!')
+    }
+  })
+
+  window.requestAnimationFrame(tick)
+}
+
+function createObjectsInWorld () {
   astronaut = makeAstronaut()
 
   const boundaryHeight = 2
@@ -55,25 +91,18 @@ export function app () {
       width: canvas.width
     })
   )
-
-  tick()
 }
 
-/* TODO: Add some paint-FPS to UI */
-// See https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame#notes
-function tick () {
-  context.clearRect(0, 0, canvas.width, canvas.height)
-  boundaries.forEach(function (boundary) {
-    drawShape(context, boundary)
-  })
-
-  drawShape(context, astronaut)
-
-  boundaries.forEach(function (boundary) {
-    if (testCollision(boundary, astronaut)) {
-      throw new Error('Game Over!')
-    }
-  })
+/**
+ * Updates the applied gravity.
+ *
+ * @param {Event} event
+ */
+function updateGravity (event) {
+  if (!event.target) {
+    return
+  }
 
-  window.requestAnimationFrame(tick)
+  const input = /** @type {HTMLInputElement} */(event.target)
+  gravity = parseFloat(input.value)
 }