Object-Oriented JavaScript: Challenge Course (How To)

Practice your object-oriented JavaScript skills by building a fun and interactive 'Four in a Row' game.

What you'll learn

• Object-oriented JavaScript
• App Design
• DOM Interaction

Introducing 'Four in a Row'

In this stage, you'll get familiar with the game of 'Four in a Row' and you'll plan out how you want to organize your code.

Chevron 6 steps

• Introducing the Project

  2:38

• instruction

  Review Provided Code

• instruction

  Planning the Classes

• Class Planning Solution

  1:04

• instruction

  Creating Class Files

• Reviewing 'Introducing Four in a Row'

  5 questions

Building Constructor Methods and Generating Objects

In this stage, you're going to start building out the foundations of our classes. You'll starting thinking about object design. What properties will your objects have? How will they interact?

Chevron 14 steps

• Preparing to Build the Classes

  0:34

• instruction

  Practice Brainstorming Properties

• Player Properties Solution

  2:57

• instruction

  Token Properties Brainstorming

• Token Properties Solution

  2:33

• instruction

  Build the createTokens() Method

• createTokens() Method Solution

  3:06

• instruction

  Board and Space Class Constructor Methods

• Board and Space Class Constructor Methods Solution

  3:58

• instruction

  Build the createSpaces() Method

• createSpaces() Method Solution

  2:46

• instruction

  Game Class Constructor Method

• Game Class Constructor Method Solution

  2:45

• Reviewing Constructor Methods and Generating Objects

  5 questions

Rendering the Game

Create the visual components that represent your objects - see your game on screen!

Chevron 11 steps

• instruction

  Connecting with the DOM

• Connecting with the DOM Solution

  3:21

• instruction

  Rendering Spaces

• instruction

  Render the Board

• instruction

  Render the Token

• Rendering the Spaces, Board, and Tokens Solution

  5:11

• instruction

  `Write Getter Methods for unusedTokens, activePlayer and activeToken

• Getter Methods Solution

  2:44

• instruction

  Build the startGame() Method

• startGame() Method Solution

  2:53

• Reviewing Rendering the Game

  5 questions

Making the Game Interactive

The visual components exist - but how do you interact with them? In this stage, you'll add the interactive components of the game so the token moves and drops.

Chevron 10 steps

• instruction

  Making the Game Interactive

• handleKeydown() Solution

  1:51

• instruction

  Build the moveLeft() and moveRight() Methods

• moveLeft() and moveRight() Methods Solution

  5:18

• instruction

  Build the drop() Method

• instruction

  drop() Method Animation Challenge Solution

• drop() Method Solution

  2:40

• instruction

  Build the playToken() Method

• playToken() Method Solution

  3:43

• Reviewing 'Making the Game Interactive'

  5 questions

Adding the Game Logic

For the last part of this course, you'll add in the logical components of the game like checking for a win or altering the game state after a token is dropped. At the end of this stage your game will be complete!

Chevron 12 steps

• What Happens Next?

  1:29

• instruction

  Build the mark() Method

• instruction

  Build the checkForWin() Method

• instruction

  get owner() Solution

• instruction

  checkForWin() Method Challenge Solution

• instruction

  Build the switchPlayers() Method

• instruction

  Build the gameOver() Method

• Game Logic Methods Solution

  1:56

• instruction

  Build the updateGameState() Method

• instruction

  Callback Function Solution

• updateGameState() Method Solution

  2:16

• Reviewing 'Adding the Game Logic'

  4 questions