https://alexmaunder.github.io/Project0/
To improve skills in DOM manipulation using jQuery and develop scalable code.
Written in HTML/ CSS/ Javascript/ jQuery
Images have been generated using Scalable Vector Graphics
Keep player score
Change Characters
Detect Win/Draw and display appropriate graphic
Multiple files to seperate DOM manipulation from project logic.
JS
checkWinOrDraw: function (indexClick, selector) {
let winner = null;
currentMoves[indexClick] = selector; // add index as object key and circle or x as value.
if (Object.keys(currentMoves).length < 3) { // checks how many objects in currentMoves
return
// check horizontal winners
} else if (game.equals(currentMoves[0], currentMoves[1], currentMoves[2]) || game.equals(currentMoves[3], currentMoves[4], currentMoves[5]) || game.equals(currentMoves[6], currentMoves[7], currentMoves[8])) {
console.log('a true case matched - horizontal')
jQuery (nested functions)
$('.board').delay(300).fadeOut(300, function () {
$('.space2').delay(50).fadeIn(100, function () {
$('.space2').addClass('draw').text("It's a Draw!")
}).show()}).hide(0);
The game is played on a grid that's 3 squares by 3 squares. Player 1 is X, Player 2 is O. Players take turns putting their marks in empty squares.
The first player to get 3 of her marks in a row (up, down, across, or diagonally) is the winner.
When all 9 squares are full, the game is over.