
- JavaScript
- Intermediate
About this Course
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.
6 stepsBuilding 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?
14 steps-
Preparing to Build the Classes
0:34
-
Practice Brainstorming Properties
-
Player Properties Solution
2:57
-
Token Properties Brainstorming
-
Token Properties Solution
2:33
-
Build the createTokens() Method
-
createTokens() Method Solution
3:06
-
Board and Space Class Constructor Methods
-
Board and Space Class Constructor Methods Solution
3:58
-
Build the createSpaces() Method
-
createSpaces() Method Solution
2:46
-
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!
11 steps-
Connecting with the DOM
-
Connecting with the DOM Solution
3:21
-
Rendering Spaces
-
Render the Board
-
Render the Token
-
Rendering the Spaces, Board, and Tokens Solution
5:11
-
`Write Getter Methods for unusedTokens, activePlayer and activeToken
-
Getter Methods Solution
2:44
-
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.
10 steps-
Making the Game Interactive
-
handleKeydown() Solution
1:51
-
Build the moveLeft() and moveRight() Methods
-
moveLeft() and moveRight() Methods Solution
5:18
-
Build the drop() Method
-
drop() Method Animation Challenge Solution
-
drop() Method Solution
2:40
-
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!
12 steps-
What Happens Next?
1:29
-
Build the mark() Method
-
Build the checkForWin() Method
-
get owner() Solution
-
checkForWin() Method Challenge Solution
-
Build the switchPlayers() Method
-
Build the gameOver() Method
-
Game Logic Methods Solution
1:56
-
Build the updateGameState() Method
-
Callback Function Solution
-
updateGameState() Method Solution
2:16
-
Reviewing 'Adding the Game Logic'
4 questions
Teacher
-
Ashley Boucher
I'm a Portland resident who loves building in JavaScript and Python, especially browser games. My free time is spent aspiring to write a novel, playing piano and roller skating.