Abby Starnes

Technologies

• 

  Javascript ES6

• 

  Robohash API

• 

  SASS

• 

  CSS3

• 

  HTML5

Overview

Frogger is vanilla javascript implementation of the classic Frogger game. This is a week-long individual project from quarter 1 of Galvanize's 24-week web development immersion course. I used the Robohash API to generate custom graphics for each user with a user-inputted seed value.

(Controls are arrow keys: up down left right - ▲▼◀▶)

Game Instantiation & Collision Detection

Once the user has entered a seed value, clicking 'start' calls the createGame() function. Level data passed in from a JSON object determines the number, speed and direction of the bots for each level. Bots are generated with the Robot class and pushed to an array. A new engine is instantiated at the top of createGame(). Once all of the bots have been created, the bot array is passed to the engine's InitRobots() function.

The engine class has a MoveRobots() function which calls the bot's move() function, and it sets the bot's requestId to window.requestAnimationFrame() with MoveRobots() as the callback. This way MoveRobots() is called every time the browser performs the next repaint. The engine also has a RemoveRobots() function. It calls the bot's remove() function and cancels the previous animation frame request, which stops the bot's movement.

The Robot class's constructor takes in the bot's specific requirments, aquired from the level data passed into the createGame() function. These include the bot's initial vertical and horizontal offset, movement speed, and set value (used to determine the bot's graphic). The create() function generate's a div with a background image from the Robohash API. The user's seed input and the bot's set value are passed as parameters to the url and determine which image is returned. The move() function updates the bot's horizontal position (all bots move only left & right). It also call's checkCollision() every time the bot moves. Check collision checks the bot's current position against the player's current position. If they overlap, the collide() function is called. Collide reset's the player's position to the beginning of the level and decrements the player's lives. If the player is out of lives, setModal() is called.

setModal() displays a modal to the player, allowing them to restart (if they're out of lives) or continue to the next level (if they've won). Once the user presses the submit() button on the modal, the process starts over from level 0 or the next level.