feat(collision-detection): move to web worker

.eslintignore

@@ -1,4 +1,5 @@
 dist/
 node_modules/
 lib/jquery/
+lib/threadify
 coverage/

.eslintrc

@@ -8,6 +8,7 @@
         "no-trailing-spaces": ["error", { "skipBlankLines": true }],
         "padded-blocks": ["error", "always"],
         "no-unused-vars": 0,
+        "new-cap": 0,
         "no-console": "error",
         "no-only-tests/no-only-tests": 2
     },

lib/canvas/canvas.js

@@ -220,63 +220,6 @@ class Canvas {
 
   }
 
-  /**
-   * checks collision between obstacles and bird object
-   */
-  collisionDetection () {
-
-    let birdShape = this.bird.shape;
-    let obstacles = this.obstacles;
-    let birdWidth = birdShape.x + birdShape.width;
-
-    const _hitAction = () => {
-
-      if (typeof this.onClear === 'function') {
-
-        this.onClear();
-
-      }
-
-    };
-
-    obstacles.forEach(obstacle => {
-
-      let obstacleShape = obstacle.shape;
-      let obstacleHeight = obstacleShape.y + obstacleShape.height;
-      let obstacleWidth = obstacleShape.x + obstacleShape.width;
-
-      if (
-        (birdShape.x >= obstacleShape.x && birdWidth <= obstacleWidth) ||
-        (birdWidth >= obstacleShape.x && birdWidth <= obstacleWidth) ||
-        (birdShape.x === obstacleWidth) ||
-        (birdShape.x === obstacleShape.x) ||
-        (birdWidth === obstacleWidth)
-      ) {
-
-        if (obstacleShape.y === 0) { // check upper obstacle
-
-          if (birdShape.y <= obstacleHeight) {
-
-            _hitAction();
-
-          }
-
-        } else { // check lower obstacle
-
-          if (birdShape.y + birdShape.height >= obstacleShape.y) {
-
-            _hitAction();
-
-          }
-
-        }
-
-      }
-
-    });
-
-  }
-
   /**
    * completely deletes canvas and all its shapes
    */

lib/collision-detection/collision-detection.js

@@ -0,0 +1,49 @@
+
+/**
+   *  @param {Bird} options.bird
+   *  @param {Array<Obstacle>} options.obstacle
+   */
+function collisionDetection ({ bird, obstacles }) {
+
+  let birdShape = bird.shape;
+  let birdWidth = birdShape.x + birdShape.width;
+
+  obstacles.forEach(obstacle => {
+
+    let obstacleShape = obstacle.shape;
+    let obstacleHeight = obstacleShape.y + obstacleShape.height;
+    let obstacleWidth = obstacleShape.x + obstacleShape.width;
+
+    if (
+      (birdShape.x >= obstacleShape.x && birdWidth <= obstacleWidth) ||
+              (birdWidth >= obstacleShape.x && birdWidth <= obstacleWidth) ||
+              (birdShape.x === obstacleWidth) ||
+              (birdShape.x === obstacleShape.x) ||
+              (birdWidth === obstacleWidth)
+    ) {
+
+      if (obstacleShape.y === 0) { // check upper obstacle
+
+        if (birdShape.y <= obstacleHeight) {
+
+          return true;
+
+        }
+
+      } else { // check lower obstacle
+
+        if (birdShape.y + birdShape.height >= obstacleShape.y) {
+
+          return true;
+
+        }
+
+      }
+
+    }
+
+    return false;
+
+  });
+
+}

lib/main/main.js

@@ -1,4 +1,4 @@
-/* global Canvas, Footer, KeyboardHandler */
+/* global Canvas, Footer, KeyboardHandler, collisionDetection, threadify */
 let mrflap, canvas, bird;
 
 function appendFooter () {
@@ -93,7 +93,24 @@ function spawnObstacles () {
   setInterval(() => {
 
     canvas.moveObstacles();
-    canvas.collisionDetection();
+
+    // execute collision detection inside web worker
+    const collisionDetectionWrapped = threadify(collisionDetection);
+
+    const job = collisionDetectionWrapped({
+      bird: canvas.bird,
+      obstacles: canvas.obstacles
+    });
+
+    job.done = (isCollided) => {
+
+      if (isCollided) {
+
+        canvas.onClear();
+
+      }
+
+    };
 
   }, 1000 / 30);