Dogs and Cats is a simple tic-tac-toe game that follows the standard rules of play.
Created by Faith Sylvia - General Assembly Class Project.
Click here to test on the demo site.
- HTML
- CSS
- JavaScript
- jQuery
- The game is played on a 3 x 3 game board.
- Players select their spirit animal as their token during game play
- The first player to get 3 of their tokens in a row (either down, across, or diagonally) wins the game.
- If the board fills and there is no winner, it is a draw, or "Cat's Game," and the game is over.
- Selection of token by button
- Automatic assignment of token for other player based on Player 1 Selection
- Current symbol follows cursor - serves as a mechanism of confirming whose turn it is
- Buttons and individual cells change color on hover - cell hover has a short transition applied to the change of color
- Animation on play again button
- Ability to detect a draw as well as a win where the final empty cell calls the win - reference code for a draw is below. Note the second if statement tests if the game is over, which prevents this code from running if there is a winner but the board is also full (last click win):
for ( let i = 1; i <= 9; i ++ ) {
if ( $( `#${ i }` ).text() === '') {
boardHasRemainingSpaces = true;
}
}
if (boardHasRemainingSpaces === false && gameOver === false) {
gameOver = true;
$(' #cats-game' ).removeClass( 'invisible' );
$( '#cats-game' ).addClass(' cats-game-over' );
$( '#play-again' ).removeClass( 'invisible' );
gameOver = true;
$( '.play-again' ).on( 'click' , clearBoard );
$( '#cursor-symbol' ).addClass( 'invisible' );
}
- Vertically align center of side boards to center of main play board
- Make key if-else statement in checkWinner DRYer / simpler
- Allow input of player names instead of using "Player 1" and "Player 2"
- Use of images as tokens instead of text / emojis