Making Four-In-A-Row - Part 3: Making Moves
In the previous blog post, you set up your
FourInARowGame class's fields.
Now you're ready to start implementing player moves and updating the state of the game accordingly.
Creating the method#
You'll start off by creating a new method in the
FourInARowGame class called
Note: You're just returning mock data for now. You'll properly implement this method later on.
playMove() method actually takes in a
columnIndex argument. From this input, a move will be attempted and the result of the move will be evaluated and returned. The code example above shows a
MoveResult object being returned in the
playMove() method. A
MoveResult can contain:
- The current state of the board after a move has been played
- The winner
- The status of the move
- The win line - an array of positions of 4 consecutive tokens were located, if found.
Interacting with your state machine#
Exposing your state machine object#
Now, to try out your code, you'll interact with your Four-In-A-Row state machine in your browser.
First, you'll need to expose the object so that the browser's console can access it. One way you can do this is by adding an instance of the
FourInARowGame class to the
window object. Let's do that right now. Replace the contents of
src/index.js with the following:
; window.fourInARowGame = new FourInARowGame;
Now, ensure that the a HTTP server is running in the root of project and navigate to the server's address in your web browser.
Open up the console your browser's developer tools (The keyboard shortcut to open in it Google Chrome is
J) in your web browser then enter in:
window.fourInARowGame. You should see an output of the
FourInARowGame instance object. In Google Chrome it looks like this:
There is also the options to expand the object so you can view more details about the object.
If you don't see some sort of representation of an
FourInARow instance object then please go over your code and check that you've followed the instructions correctly!
Play a (fake) move#
Now, call the
playMove method from the
FourInARow instance, in the browser console window.
First, store the state machine in an easier to reference variable called
Then, call the
playMove method with the
columnIndex parameter set to
Your browser's console window should output something resembling the
MoveResult object you discussed earlier:
When expanded, you get more details:
board: 6 status: winLine: winner: "none" : Object
Now that you know the type of result that you're expecting after calling
playMove(), let's properly implement the method so that it returns real data based on the state of the board.
Implementing the method (for real this time!)#
Firstly, you'll update the
playMove() method in your
FourInARowGame class so that it checks the current status of the game before allowing the player to make a move.
It wouldn't make sense for a player to be able to perform a move when the game has already ended in a win or a draw.
You'll also update the current status of the game from
GameStatus.START to being
You'll re-evaluate the latest game state when a win or draw happens later.
For now, let's continue focusing on allowing a player to make a move that changes the game's state.
You will first create a method called
Now you need to create a copy of the current board that you can modify without changing the value of
To do this, you'll create a static method called
Now store the board copy in a variable called
The next thing you need to do is to actually perform the move on the board, to do this you'll create a method called
The method above checks the column in the board the player specified from the bottom to the top for an empty position then attempts to add the current player's token to the board position. Later it returns the result.
There is a static method here called
playerColorToBoardToken that was used, this sets the set's the value in the board position to a numeric value that is associated with the current player's colour.
Add it to the
FourInARowGame class too:
static static playerColor
Now you'll go back to the
performMove() method and set the current game board to the board in the object returned from the
If the value of the
MoveStatus.Invalid then you return a
MoveResult which has the same structure as the move data you returned in your fake
playMove() method implementation.
Lastly, you need create a method called
evaluateGame() which will be used to check if the status of the game has changed then returns a
For now, you'll just return the
MoveResult of a successful move, that also indicates that the game is still in progress.
Make sure that you return the result of this method in
MoveResult will show an updated board value based on the column the player placed their token in.
To complete your updates to the
playMove() method, you'll add a few more lines to it:
You perform a move, update the current turn to the opposing player's turn then return the results of the move.
Testing out your changes#
You added quite a few changes, let's test them out.
Assuming your have a local HTTP server running at the root of the project, navigate to the server's address in your web browser and open the browser console window again.
First, enter the following line in your browser's console:
Now call the
playMove method with the
columnIndex parameter set to
1 instead of
0 to add the token to the second column on the game board:
You should see a
MoveResult object returned. If you expand the object then expand the
board field, you'll see that the value
1 has been added to the bottom of the second column on the board.
If you do, congratulations!
If not, please go over this post carefully to check for mistakes you may have made.