Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Object-Oriented JavaScript: Challenge Introducing 'Four in a Row' Planning the Classes

Ashley Boucher
STAFF
Ashley Boucher
Treehouse Teacher

Planning the Classes Discussion

Discuss your notes, thoughts, and answers to the brainstorming questions for Planning the Classes.

Disclaimer: I haven't looked at the solution yet.

I can think of two (physical) objects: the chips the board

For the chips I can think of the following properties: color position

For the board I can think of: 6 vertical slots 7 horizontal slots

There needs to be a class for adding chips. A class needs to determine whether there are four chips of the same color in a row.

Thoughts?

Mike Hatch
Mike Hatch
14,940 Points

By looking at the provided code in the html file I concluded we'd need classes for Game, Board, Space, Player, Token, and App. I am guessing App will be the parent component that will pass down to the children. The linked js src files at the bottom give it away. I don't know if these will be turned into classes or not, but that's my guess. That's about all I was able to envision for now.

Edit: No need for an App class according to following video.

I think we will need a class for token, player, board and game_helper. We need two instances of both token and player. Board and game_helper, although abstract, I would still create two different classes, just for separation of concerns and all that good stuff. Each class should have its own file. Then we can instantiate all of them in a four_in_a_row file.

Félix Guérin
Félix Guérin
17,910 Points

I think we'll need classes for:

  • Message board (to display game-over, according to the code, and maybe to keep score)
  • Player, 2 instances
  • Tokens, 2 instances
  • Board
  • Columns (maybe sub-classes of the Board class?), 7 instances
Frank Kynard
Frank Kynard
6,958 Points

So for my classes I have -Player Takes turns -Game Player starts game, Player 1 is Red and Player 2 is Yellow Displays “Game Over” when 4 of a players tokens connect then resets board -Board Populated with tokens after a player takes their turn, placing the token on the selected area -Tokens 2 colors for both players -Movements What the players will have to do -Reset What will happen when the game is over

11 Answers

YONGJIN KIM
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
YONGJIN KIM
Full Stack JavaScript Techdegree Graduate 20,287 Points

class(object) list:

  • game: having 'state' and 'winner' as properties
  • player: having 'playerName' and 'activeTurn' as properties
  • gameBoard: having 'filledGrid' as a property
  • token: having 'column', 'playerName' as properties
Alec Bergamini
Alec Bergamini
4,611 Points

Objects/Classes

  • Game
  • Player
  • Board
  • Space
  • Tokens

Board --> Area where game is being played (grids), board() will be displayed with desired amount of slots. Will dictate where the token() goes when selected().

Players --> Two players max, player1 token() = red, player2 token() = blue, can also hold score() for each player.

Tokens --> Will be two tokens max one for each player. Token moves() left and right. When selected() token will drop down the column for an empty spot inside the board().

Game/ logic --> will display the score() for each player as well as holding most of the logic when the player moves or wins. When player() wins() by connecting four in a row, then game board will reset() for a new game.

Berlin Galvan
Berlin Galvan
7,145 Points

I can think of:

  • board
  • tokens
  • 2 players
  • active state for taking turns
  • a win
  • a tie
  • a tally to keep track of each player's score
Richard Preske
PLUS
Richard Preske
Courses Plus Student 4,356 Points

Classes:

Board - 5x5 array 5 horizontal, 5 vertical spaces Tokens - player 1, player 2 colors red and yellow Space - "empty" and "filled" with player token Player - assign tokens Game - switching player's turn, check for win(four in a row), if all filled no winner, reset board after 4 in a row win or no win, player movement left, right, down (drop).

Game Classes

  • Player
    • Takes turns
  • Game
    • Player starts game, Player 1 is Red and Player 2 is Yellow
    • Displays “Game Over” when 4 of a players tokens connect then resets board
  • Board
    • Populated with tokens after a player takes their turn, placing the token on the selected area
  • Token
    • Red & Yellow token - assigned to each player

Well for in the game. player puts a token inside a certain column, which then is placed all the way in the end of the column and if there is a token underneeth the current token will be places in the row above it, instead of the default placing. And one token needs to be horizontaly, vertically, or diaganoly, then that token need to be connected by 4 other current tokens or same colored ones-hmmmm. so what i am seeing and feeling about this. are. There should be an object for board resetBoard currentBoard player currentPlayer playerTokenColor currentPostionToken playerID token tokenInPosition feel like resetBoard will remove all tokenPosition or tokenHistory currenBoard will keep a history of the token and will spot if current token has 4 tokens that are connected witchEver postion in player. the currentPlayer will be abolion that will trigger if the player had finished their turn which will be indicated by the tokenInPosition. And if is it will then trigger false but triggering the player thats next. player token color will just change or create a color of the token it where they wil get to choose. currentPostionToken will log the postion of the last placed token and send it into an array where it will show the history of where it was placed on the board. playerid will tell you if its player one and player two and will rotate turns like that. token. tokenInPosition will just log and create array or list of the current token or maybe not needed but just thinking. it can possibly be placed somewhere else.

Feel like there is going to be game logic in the player board object?

Joseph Bertino
seal-mask
.a{fill-rule:evenodd;}techdegree
Joseph Bertino
Full Stack JavaScript Techdegree Student 14,652 Points

As far as the distinct physical objects that make up the gameplay, we have:

  • Player
  • Token / Gamepiece
  • Game board

There are some methods which I believe are too abstract to be attributed directly to the game board, and thus I believe that there should also be a Game object to design as well. Some of its methods would be:

  • Start game
  • Switch player turn
  • End game (show "Game Over" screen)

I also observed that the index.html imports a Space.js, so I assume I should consider a game board space as an object. The methods I would attribute to a Space are:

  • isFull() // determining if there is a token in the space
  • returnToken() // return the color/player of the token in that space. (This could also be combined with the isFull() method)

State:

  • start game / win game
  • player choose drop column / ball dropped

Object:

  • player:
    • isMyTurn
    • winning or not
  • grid:
    • color: stands for player
    • position: store ball position

Controller:

  • animate:
    • choose column animate
    • ball dropped animate
  • check in a row or not: logic algorithm
  • change turn
  • display start / winning

Announcer/GameMaster

  • Player Turn
  • game state
  • checks if tokens are 4 in a row
  • resets the board

Player

  • score
  • name
  • tokens

GameBoard

  • size(rowxcol)
  • filled area(cellboard)

CellBoard

  • x(row)
  • y(col)
  • isFilled

Token

  • cellboard
  • isPlaced