From cd7c06f608e15e99c8e2a565c0d589f1904de454 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Wed, 25 Dec 2024 02:16:21 +0530 Subject: [PATCH 1/2] Add the project --- Source-Code/TicTacToe/index.html | 20 +++++++++ Source-Code/TicTacToe/script.js | 72 ++++++++++++++++++++++++++++++++ Source-Code/TicTacToe/style.css | 61 +++++++++++++++++++++++++++ 3 files changed, 153 insertions(+) create mode 100644 Source-Code/TicTacToe/index.html create mode 100644 Source-Code/TicTacToe/script.js create mode 100644 Source-Code/TicTacToe/style.css 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; +} From 803a7159ba11ff4d9d3be3d0a9f4afacadd5d066 Mon Sep 17 00:00:00 2001 From: afreen shaik Date: Wed, 25 Dec 2024 02:16:56 +0530 Subject: [PATCH 2/2] Update the readme file with the description --- README.md | 11 +++++++++++ 1 file changed, 11 insertions(+) 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)