diff --git a/README.md b/README.md index 8e353ca..e0484ab 100644 --- a/README.md +++ b/README.md @@ -540,6 +540,17 @@ In order to run this project you need: +
  • +
    +Tic Tac Toe App +

    This is a simple Tic Tac Toe game built using HTML, CSS, and JavaScript. The game allows two players to alternate turns and try to win by getting three of their symbols (X or O) in a row, either horizontally, vertically, or diagonally. The game will automatically check for a winner or draw after each move, and players can restart the game at any time.

    + +
    +
    • +

    (back to top)

    diff --git a/Source-Code/TicTacToe/index.html b/Source-Code/TicTacToe/index.html new file mode 100644 index 0000000..37fccff --- /dev/null +++ b/Source-Code/TicTacToe/index.html @@ -0,0 +1,20 @@ + + + + + + Tic Tac Toe + + + +
    +

    Tic Tac Toe

    +
    + +
    + +
    +
    + + + diff --git a/Source-Code/TicTacToe/script.js b/Source-Code/TicTacToe/script.js new file mode 100644 index 0000000..6f297ce --- /dev/null +++ b/Source-Code/TicTacToe/script.js @@ -0,0 +1,72 @@ +/* eslint-disable no-use-before-define */ +// Get elements +const board = document.getElementById('board'); +const restartBtn = document.getElementById('restartBtn'); +const message = document.getElementById('message'); + +let currentPlayer = 'X'; +let gameBoard = Array(9).fill(null); // 3x3 grid, initialized to null (empty) + +const winPatterns = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], // Rows + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], // Columns + [0, 4, 8], + [2, 4, 6], // Diagonals +]; + +// Check for a winner or draw +const checkWinner = () => { + const winner = winPatterns.some(([a, b, c]) => { + if ( + gameBoard[a] + && gameBoard[a] === gameBoard[b] + && gameBoard[a] === gameBoard[c] + ) { + message.textContent = `${gameBoard[a]} wins!`; + board.style.pointerEvents = 'none'; // Disable clicks after game ends + return true; + } + return false; + }); + + if (!winner && !gameBoard.includes(null)) { + message.textContent = "It's a draw!"; + } +}; + +// Create the board cells +const createBoard = () => { + board.innerHTML = ''; // Clear any existing cells + gameBoard.forEach((cell, index) => { + const cellElement = document.createElement('div'); + cellElement.classList.add('cell'); + cellElement.textContent = cell; + cellElement.addEventListener('click', () => handleCellClick(index)); + board.appendChild(cellElement); + }); +}; + +// Handle cell click +const handleCellClick = (index) => { + if (gameBoard[index] !== null) return; // If cell is already filled, return + gameBoard[index] = currentPlayer; + currentPlayer = currentPlayer === 'X' ? 'O' : 'X'; // Switch player + createBoard(); + checkWinner(); +}; + +// Restart the game +restartBtn.addEventListener('click', () => { + gameBoard = Array(9).fill(null); // Reset the game board + currentPlayer = 'X'; // Reset to Player X + createBoard(); + message.textContent = ''; // Clear the message + board.style.pointerEvents = 'auto'; // Enable clicks again +}); + +// Initialize the game +createBoard(); diff --git a/Source-Code/TicTacToe/style.css b/Source-Code/TicTacToe/style.css new file mode 100644 index 0000000..ec93f6a --- /dev/null +++ b/Source-Code/TicTacToe/style.css @@ -0,0 +1,61 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + background-color: #f4f4f9; +} + +.container { + text-align: center; +} + +h1 { + margin-bottom: 20px; +} + +.board { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3, 100px); + gap: 5px; + justify-content: center; + margin-bottom: 20px; +} + +.cell { + width: 100px; + height: 100px; + display: flex; + align-items: center; + justify-content: center; + font-size: 32px; + background-color: #fff; + border: 2px solid #333; + cursor: pointer; + transition: background-color 0.2s ease; +} + +.cell:hover { + background-color: #f0f0f0; +} + +button { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; + margin-top: 10px; +} + +#message { + margin-top: 20px; + font-size: 18px; + font-weight: bold; +}