diff --git a/public/TicTacToe/index.html b/public/TicTacToe/index.html new file mode 100644 index 00000000..4b4f2d43 --- /dev/null +++ b/public/TicTacToe/index.html @@ -0,0 +1,40 @@ + + + + + + Tic Tac Toe + + + + + +
+

Tic Tac Toe

+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + + + + + + diff --git a/public/TicTacToe/script.js b/public/TicTacToe/script.js new file mode 100644 index 00000000..9c6745d4 --- /dev/null +++ b/public/TicTacToe/script.js @@ -0,0 +1,79 @@ +document.addEventListener('DOMContentLoaded', () => { + const board = document.getElementById('board'); + const cells = Array.from(document.querySelectorAll('.cell')); + const restartButton = document.getElementById('restart'); + const modal = document.getElementById('resultModal'); + const resultMessage = document.getElementById('resultMessage'); + const closeModal = document.getElementById('closeModal'); + const newGameButton = document.getElementById('newGame'); + let currentPlayer = 'X'; + let gameActive = true; + let boardState = Array(9).fill(''); + + const winningConditions = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6] + ]; + + function handleCellClick(e) { + const cell = e.target; + const index = cell.getAttribute('data-index'); + + if (boardState[index] !== '' || !gameActive) { + return; + } + + cell.textContent = currentPlayer; + boardState[index] = currentPlayer; + + if (checkWin()) { + gameActive = false; + showResult(`${currentPlayer} wins!`); + return; + } + + if (boardState.every(cell => cell !== '')) { + gameActive = false; + showResult('Draw!'); + return; + } + + currentPlayer = currentPlayer === 'X' ? 'O' : 'X'; + } + + function checkWin() { + return winningConditions.some(condition => { + return condition.every(index => boardState[index] === currentPlayer); + }); + } + + function showResult(message) { + resultMessage.textContent = message; + modal.style.display = 'block'; + } + + function restartGame() { + boardState = Array(9).fill(''); + cells.forEach(cell => cell.textContent = ''); + currentPlayer = 'X'; + gameActive = true; + modal.style.display = 'none'; + } + + cells.forEach(cell => cell.addEventListener('click', handleCellClick)); + restartButton.addEventListener('click', restartGame); + closeModal.addEventListener('click', () => { modal.style.display = 'none'; }); + newGameButton.addEventListener('click', restartGame); + + window.addEventListener('click', (event) => { + if (event.target == modal) { + modal.style.display = 'none'; + } + }); +}); diff --git a/public/TicTacToe/style.css b/public/TicTacToe/style.css new file mode 100644 index 00000000..5b779824 --- /dev/null +++ b/public/TicTacToe/style.css @@ -0,0 +1,85 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + font-family: Arial, sans-serif; +} + +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background: linear-gradient(135deg, rgb(46, 46, 46), rgb(60, 59, 59)); +} + +.container { + text-align: center; +} + +h1 { + margin-bottom: 20px; + color: white; +} + +.board { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3, 100px); + gap: 5px; + margin-bottom: 20px; +} + +.cell { + display: flex; + justify-content: center; + align-items: center; + background-color: #fff; + border: 1px solid #ccc; + font-size: 2em; + cursor: pointer; +} + +.cell:hover { + background-color: #e0e0e0; +} + +button { + padding: 10px 20px; + font-size: 1em; + cursor: pointer; +} + +.modal { + display: none; + position: fixed; + z-index: 1; + left: 0; + top: 0; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.5); +} + +.modal-content { + background-color: #fff; + margin: 15% auto; + padding: 20px; + border: 1px solid #888; + width: 80%; + max-width: 300px; + text-align: center; +} + +.close { + color: #aaa; + float: right; + font-size: 28px; + font-weight: bold; + cursor: pointer; +} + +.close:hover, +.close:focus { + color: black; +} diff --git a/public/index.html b/public/index.html index 386b8b31..efa89d11 100644 --- a/public/index.html +++ b/public/index.html @@ -37,9 +37,9 @@
DAY-21.] Video bg slider using react DEMO
DAY-22.] Page loader DEMO
DAY-24.] Chat Bot DEMO
-
DAY-25.] Maze game DEMO
+
DAY-25.] Tic-Tac-ToeDEMO
+
DAY-26.] Maze game DEMO
-