Using an object-orieneted approach, create a tic-tac-toe game to practice JavaScript/jQuery, OOP, and unit testing with Jasmine.
- Create a
Game()
class that creates instances of theBoard()
class,Players()
class (you need two players) and has aturnCounter
property to indicate whose turn it is and determine the winner in case of a draw.
nextPlayer()
- sets the turn based on theturnCounter
, checks the winner from theBoard()
class, and updates the DOM.updateScore()
- updates the scroreboard based on theplayerScore
from thePlayer()
class. Updates the DOM.init()
- initializes a new game with a board and two players. Make sure to add a click event handler for each of the board's cells on the DOM. This should in turn call themakeMove()
method on theBoard()
class.
- Create a
Player()
class that has ateam
,cellID
, andplayerScore
property.
- Create a
Board()
class that has a 'moveArr' property with anull
array to hold the moves along with a$cells
property to assign each cell to a box in the DOM. Finally, add an event handler on the reset button to call theresetBoard()
method.
makeMove()
- sets a box to a player/team and updates themoveArr
array. Make sure to prevent occupied boxes from being used (alert the user).winCondition()
- array which holds the winining conditions for the boardcheckWinner()
- checks the board for winning combinations against the values of each player/team and alerts the players which player won or if it's a tieresetBoard()
- resets the board to its initial state and resets themoveArr
holding the player values (via thenullArray()
method) and turn counternullArray()
- resets themoveArr
- Test!
- Start the game:
var game = new Game();
game.init();