From 3769b7670871b32e44ad20cc24fa137c1724571c Mon Sep 17 00:00:00 2001 From: Mazhar Hussain Date: Thu, 20 May 2021 20:27:39 +0500 Subject: [PATCH] JavaScript Work done --- Tic-Toc-Toe/script.js | 92 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 Tic-Toc-Toe/script.js diff --git a/Tic-Toc-Toe/script.js b/Tic-Toc-Toe/script.js new file mode 100644 index 0000000..b0d652f --- /dev/null +++ b/Tic-Toc-Toe/script.js @@ -0,0 +1,92 @@ +const X_Class = 'x' +const CIRCLE_CLASS = 'circle' +const WINNING_COMBINATIONS = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6] +] +const cellElements = document.querySelectorAll('[data-cell]') +const winningMessageTextElement = document.querySelector('[data-winning-message-text]') +const winningMessageElement = document.getElementById('winningMessage') +const restartButton = document.getElementById('restartButton') +const board = document.getElementById('board') +let circleTurn + +startGame() + +restartButton.addEventListener('click', startGame) + +function startGame(params) { + circleTurn = false + + cellElements.forEach(cell => { + cell.classList.remove(X_Class) + cell.classList.remove(CIRCLE_CLASS) + cell.removeEventListener('click', handleClick) + cell.addEventListener('click', handleClick, { once: true }) + }) + setBoardHoverClass() + winningMessageElement.classList.remove('show') +} + + +function handleClick(e) { + const cell = e.target + const currentClass = circleTurn ? CIRCLE_CLASS : X_Class + placeMark(cell, currentClass) + if (checkWin(currentClass)) { + endGame(false) + } else if (isDraw()) { + endGame(true) + } else { + swapTurns() + setBoardHoverClass() + } + +} + +function endGame(draw) { + if (draw) { + winningMessageTextElement.innerText = 'Draw!' + } else { + winningMessageTextElement.innerText = `${circleTurn ? "O's Wins" :"X's Wins" }` + } + winningMessageElement.classList.add('show') +} + +function placeMark(cell, currentClass) { + cell.classList.add(currentClass) +} + +function swapTurns() { + circleTurn = !circleTurn +} + +function isDraw() { + return [...cellElements].every(cell => { + return cell.classList.contains(X_Class) || cell.classList.contains(CIRCLE_CLASS) + }) +} + +function setBoardHoverClass() { + board.classList.remove(X_Class) + board.classList.remove(CIRCLE_CLASS) + if (circleTurn) { + board.classList.add(CIRCLE_CLASS) + } else { + board.classList.add(X_Class) + } +} + +function checkWin(currentClass) { + return WINNING_COMBINATIONS.some(combinations => { + return combinations.every(index => { + return cellElements[index].classList.contains(currentClass) + }) + }) +} \ No newline at end of file