Canvas Helicopter Game

I made another game in canvas! This time I went for the classic flash game where you're a helicopter in a cave trying to not hit the stalagmites & stalactites (think flappy bird but from 2000). Here's the game:

See the Pen Canvas Helicopter Game by Josh Fabean (@fabean) on CodePen.

This continues my quest of trying to get better at making games in JavaScript. As a side note I coded most of this game in a plane on the way back form Mexico. The hard thing I had to figure out here was collision with moving objects. I feel like this is probably the easiest game to calculate that since I'm just drawing rectangles and nothing too crazy yet.

My function to calculate this is pretty simple and is as follows, where path is an array of all the rectangles drawn on the screen (and they're the black part of the game).

let calcCollision = () => {
  // loop through path and see which one I'm current in
  for (let i=0; i<path.length; i++) {
    if (path[i].x < dot.x && path[i].x+PATH_WIDTH > dot.x) {
      // this means this is the path youre currently in

      if (path[i].y > dot.y || path[i].height+path[i].y < dot.y) {
        console.log('you collided');
        startScreen = true;
      }
    }
  }
};

I learned a decent amount making this game, and I think I'm going to figure out how to put it on a phone as an app which should take a couple hours. You can also see this as a git repo up on github if you wanted to fork it and have it be your own thing.

Hopefully this pen inspires you and make you want to learn fun stuff.

:wq