Skip to content

Instantly share code, notes, and snippets.

@rcoh
Last active April 11, 2018 22:56
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rcoh/c9e775df165da717489389b9b5349e93 to your computer and use it in GitHub Desktop.
Save rcoh/c9e775df165da717489389b9b5349e93 to your computer and use it in GitHub Desktop.

Assesment 1: (~4-6h)

Tic-Tac-Toe: The goal is to implement a basic tic-tac-toe game. We will build it in the terminal using Node. The game will support 2 players, X and O, that make alternating moves. You're free to google anything you want! Develop this like you would work on any other project but please work on it indepdently. This project is tough! It's meant to be hard and to stretch your skills.

  1. Use ES6 classes to create a board class. The class should be able to store a 3x3 grid of tic-tac-toe pieces.

  2. Add a method to the class to print the board to the terminal (console.log) The format is up to you, but it should be clear to the user which pieces are where. Here's a possibility:

X|-|O
O|X|-
-|-|X

Make sure to use a loop!

  1. Add a function to the class makeMove(row, col, piece). The function should add a piece (X or O) to the board. Make sure to handle errors!
  • Don't allow the user to insert a piece outside of the board
  • Don't allow the user to insert a piece where another piece exists
  • Don't allow the user to insert a token that isn't X or O

If the user does any of these things, throw an exception:

throw new Error('Put a helpful message here')
  1. Use jasmine (or your testing framework of choice) to write tests for the board class. The test cases are up to you but make sure to test the error conditions! You may find this stack overflow answer helpful for jasmine.

  2. Create a game loop that gets input from the X player and input from O player. Before each turn, print the current state of the board to the console. Use try { } catch { } to handle catch the exceptions from your makeMove function. Here's some more documentation about try catch. If the move is invalid, request another move from the same user. Don't worry about handling win conditions yet! The game should end when the board is full. Use the https://www.npmjs.com/package/readline-sync npm package to read the users input. Question: Why is it helpful to use readalineSync instead of the builtin Readline? Put the answer as a comment in your code.

Test out the game loop. Copy and paste an example game loop into the code. Make sure it includes an invalid move.

Challenge: Complete at least two of the following objectives:

  • Port your game to the browser. Create react component that displays the board class. Use onClick handlers to allow users to click on the game squares to move. Reimplement the game loop to work in the browser.
  • Implement win checks on the board class by writing a isWinner(player) function that returns true if the given player has 3 in a row, up, across, or diagonally. Add tests for this method. Integrate it into the game loop.
  • Create an computer player. The player doesn't have to be good! It just needs to pick a square at random. If there is already a piece in the square, it should keep guessing until it finds an empty one. Integrate the AI player into the game loop.
@Karla-Isabel-Sandoval
Copy link

@rcoh this looks great! Let's use it. What do you think about putting into a topic outline or should we keep it as a private gist?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment