Learn OOP the fun way! Build a command line “Frogger” game

Disclaimer: Don’t read this guide as an OOP design guide, but instead as a way to practice writing OOP code and reviewing OOP concepts in context.

Step 1. Write a description of the problem

OOP deals with objects using every day language, so we’ll start by writing a description of the game and what we are trying to build. From the description, we’ll take the important nouns and verbs, which we’ll use to build a skeleton of the game.

  • Obstacles
  • Road/River — Lanes
  • Landscape
  • Move
  • Get hit

Step 2: Code!

The code will be presented in 7 “lessons” and you’ll see notes on the code as we go and a lot of refactoring as we go as well to be more “OOP”.

Lesson 1

In this lesson, we’re going to start small. You can see the full code at the bottom of the lesson. The code uses the pseudo-classical OOP pattern, so we have constructor functions that can build player, lane, landscape, and game instances, and methods added to those function’s prototype properties.

> new Array(20)
[ <20 empty items> ]
> function Lane() {}
undefined
> Lane.prototype.makeLane = function() {
console.log('example');
}

ƒ () {
console.log('example');
}

> Lane.prototype
{makeLane: ƒ, constructor: ƒ}

Lesson 2

In this lesson, we’ll add properties to Frog, add a player to the FroggerGame, and add in some functionality to move the player around the ‘board’/landscape.

  • lives with value 3
  • row with value 6
  • column with value 9
We know that the board looks approximately like the image, and we want to move Frogger up and down and left to right.
let array = [
0: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
1: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
2: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
3: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
4: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
5: [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20],
6: [0,1,2,3,4,5,6,7,8,✅,10,11,12,13,14,15,16,17,18,19,20],
]
  • array[6][9–1] = “✅”
  • Add in player.column -= 1 somewhere

Lesson 3

In lesson 3, we will add some game play messages, add in a way to use the keyboard to choose the movement direction, and start to add in some obstacles.

  • Obstacles can only move in one direction
  • Obstacles should have a default icon/ icons
  • New obstacles enter the screen at the right most side of the landscape and move left
  • ‘[B’: down
  • ‘[C’: right
  • ‘[D’: left

Lesson 4

This lesson will be light-weight and focused on cleaning up some earlier code.

  • Add a method for initializing the Frog player position
  • Pass row + column args when we invoke Frog
  • Remove the startLane function
  • Remove the startLane invocation in Landscape
  • Add in a method that handles the player start position
  • Invoke the method that handles the player start position

Lesson 5

Remember a while back I promised that we’d randomize the obstacles? That time is now. Here’s what to expect in this lesson:

  • Randomization of the row when new obstacles enter
  • A move method to handle obstacle movement
  • A method to add more obstacles each round
  • A way to account for the players being out of bounds
  • Update the methods to move the player object and account for being “out of bounds”

Giving movement to the obstacles

Let’s go back to the Obstacles.prototype.initializeObstacles method now–we’ve been hard coding in a column and row argument, so all of the obstacles are in the same location. Instead, we’ll randomize that value. To do that, we’ll use the getRandom method in the Obstacle method itself.

Lesson 6

There is a small bug in the moveRight method. Update to reflect the code below:

Update to account for collisions with our obstacles

We’ll continue to encapsulate obstacle behavior on Obstacles. Since we call the gameOver method in the testForCollision method, we need to pass it as an argument and pass a this context.

Bonus Features

It’s grayed out for now for debugging purposes, but eventually we’ll start to use console.clear() to keep the game clean and in the same spot in the command line.

Lesson 7

In this lesson, we’ll make the game more game-like. By that I mean, we’ll add things like:

  • Adding the ability to play more rounds
  • Adding logic for reseting the board for another round
  • Tracking lives

Player changes

We need a way to reset the player’s position when we reset the board and a way to track lives. Three methods on Frog can handle resetting the player position, removing a life, and resetting lives. resetPlayerPosition will be invoked when we reset the board for a new game. removeLife will be used when there is an obstacle collision. resetLives is used when the player wins and a new game is started.

Obstacles changes

There is a lot going on below and there is most likely a better way to handle this, but this method is a great opportunity to practice passing context + using the call method. The code below is basically the same as:

Displaying points

Updating messaging and making it more user friendly

Journalist and endlessly curious person. One half of @hatchbeat.