Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Treehouse

Object-Oriented JavaScript: Challenge Course (How To)

via Treehouse

Overview

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

Syllabus

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

Reviews

Start your review of Object-Oriented JavaScript: Challenge Course (How To)

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.