diff --git a/Games/Tic-tac-toe/README.md b/Games/Tic-tac-toe/README.md new file mode 100644 index 0000000000..ba1ceba839 --- /dev/null +++ b/Games/Tic-tac-toe/README.md @@ -0,0 +1,31 @@ +# **Tic Tac Toe** + +--- + +
+ +## **Description 📃** + +- Tic Tac Toe is a classic two-player game where players take turns marking the spaces in a 3×3 grid. The player who succeeds in placing three of their marks in a horizontal, vertical, or diagonal row wins the game. + +## **Functionalities 🎮** + +- Two-player game mode. +- Visual representation of the game board. +- Real-time updates of the game state. +- Winning condition check and message display. +- Winning animation with music. + +
+ +## **How to play? 🕹ī¸** + +1. Open the `index.html` file in your browser. +2. The first player (X) clicks on an empty cell to mark it. +3. The second player (O) takes their turn by clicking on another empty cell. +4. The game alternates turns between players X and O. +5. The game checks for a winner after each turn. If a player has three marks in a row (horizontally, vertically, or diagonally), a winning message is displayed, and a winning animation is played. +6. If all cells are filled without any player winning, the game ends in a draw. + +
+ diff --git a/Games/Tic-tac-toe/index.html b/Games/Tic-tac-toe/index.html new file mode 100644 index 0000000000..6797c039a1 --- /dev/null +++ b/Games/Tic-tac-toe/index.html @@ -0,0 +1,29 @@ + + + + + + Tic Tac Toe + + + +

Tic Tac Toe

+
+
+
+
+
+
+
+
+
+
+
+
+ + + + diff --git a/Games/Tic-tac-toe/panda.avif b/Games/Tic-tac-toe/panda.avif new file mode 100644 index 0000000000..d42877377b Binary files /dev/null and b/Games/Tic-tac-toe/panda.avif differ diff --git a/Games/Tic-tac-toe/script.js b/Games/Tic-tac-toe/script.js new file mode 100644 index 0000000000..ed331eab4c --- /dev/null +++ b/Games/Tic-tac-toe/script.js @@ -0,0 +1,71 @@ +const cells = document.querySelectorAll('.cell'); +const message = document.getElementById('message'); +const winnerAnimation = document.getElementById('winner-animation'); +const winMusic = document.getElementById('win-music'); +let currentPlayer = 'X'; +let board = ['', '', '', '', '', '', '', '', '']; +let gameActive = true; + +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(event) { + const clickedCell = event.target; + const clickedCellIndex = parseInt(clickedCell.getAttribute('data-index')); + + if (board[clickedCellIndex] !== '' || !gameActive) { + return; + } + + board[clickedCellIndex] = currentPlayer; + clickedCell.innerText = currentPlayer; + checkResult(); +} + +function checkResult() { + let roundWon = false; + for (let i = 0; i < winningConditions.length; i++) { + const winCondition = winningConditions[i]; + let a = board[winCondition[0]]; + let b = board[winCondition[1]]; + let c = board[winCondition[2]]; + if (a === '' || b === '' || c === '') { + continue; + } + if (a === b && b === c) { + roundWon = true; + break; + } + } + + if (roundWon) { + message.innerText = `${currentPlayer} wins!`; + gameActive = false; + displayWinnerAnimation(); + return; + } + + let roundDraw = !board.includes(''); + if (roundDraw) { + message.innerText = 'Draw!'; + gameActive = false; + return; + } + + currentPlayer = currentPlayer === 'X' ? 'O' : 'X'; +} + +function displayWinnerAnimation() { + winnerAnimation.classList.remove('hidden'); + winMusic.play(); +} + +cells.forEach(cell => cell.addEventListener('click', handleCellClick)); diff --git a/Games/Tic-tac-toe/styles.css b/Games/Tic-tac-toe/styles.css new file mode 100644 index 0000000000..af084f2441 --- /dev/null +++ b/Games/Tic-tac-toe/styles.css @@ -0,0 +1,46 @@ +body { + display: flex; + flex-direction: column; + align-items: center; + font-family: Arial, sans-serif; +} + +h1 { + margin-top: 20px; +} + +.game-board { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3, 100px); + gap: 5px; + margin-top: 20px; +} + +.cell { + display: flex; + align-items: center; + justify-content: center; + width: 100px; + height: 100px; + background-color: #f0f0f0; + border: 2px solid #333; + font-size: 2em; + cursor: pointer; +} + +.hidden { + display: none; +} + +#winner-animation { + display: flex; + flex-direction: column; + align-items: center; + margin-top: 20px; +} + +#winner-animation img { + width: 200px; + height: auto; +} diff --git a/Games/Tic-tac-toe/win-music.mp3 b/Games/Tic-tac-toe/win-music.mp3 new file mode 100644 index 0000000000..50fa4824a3 Binary files /dev/null and b/Games/Tic-tac-toe/win-music.mp3 differ diff --git a/README.md b/README.md index a64d16537e..8d667388a9 100644 --- a/README.md +++ b/README.md @@ -798,6 +798,7 @@ This repository also provides one such platforms where contributers come over an |[Wheel_of_Fortunes](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Wheel_of_Fortunes)| +|[Tic-tac-toe](https://github.com/Saipradyumnagoud/GameZone/tree/main/Games/Tic-tac-toe)|
diff --git a/assets/images/Tic-tac-toe.png b/assets/images/Tic-tac-toe.png new file mode 100644 index 0000000000..1cb5ce4ba2 Binary files /dev/null and b/assets/images/Tic-tac-toe.png differ