sudo-parnab · SoumikGhosh9 · Oct 15, 2024
diff --git a/Tic-Tac-Toe_Game/0Won.png b/Tic-Tac-Toe_Game/0Won.png
diff --git a/Tic-Tac-Toe_Game/Main.png b/Tic-Tac-Toe_Game/Main.png
diff --git a/Tic-Tac-Toe_Game/Tie.png b/Tic-Tac-Toe_Game/Tie.png
diff --git a/Tic-Tac-Toe_Game/XWon.png b/Tic-Tac-Toe_Game/XWon.png
diff --git a/Tic-Tac-Toe_Game/index.html b/Tic-Tac-Toe_Game/index.html
@@ -0,0 +1,39 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Itim&display=swap" rel="stylesheet">
+    <script src="./script.js"></script>
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="shortcut icon" type="x-icon" href="tic_tac_toe.png">
+    <title>Tic-Tac-Toe</title>
+</head>
+<body>
+    <main class="background">
+        <section class="title">
+            <h1>Tic Tac Toe</h1>
+        </section>
+        <section class="display">
+            Player <span class="display-player playerX">X</span>'s turn
+        </section>
+        <section class="container">
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+            <div class="tile"></div>
+        </section>
+        <section class="display announcer hide"></section>
+        <section class="controls">
+            <button id="reset">Reset</button>
+        </section>
+    </main>
+</body>
+</html>
diff --git a/Tic-Tac-Toe_Game/readme.md b/Tic-Tac-Toe_Game/readme.md
@@ -0,0 +1,62 @@
+Tic Tac Toe Game
+
+A simple yet fun Tic Tac Toe game built using HTML, CSS, and JavaScript. This game allows two players to play Tic Tac Toe on a 3x3 grid, with alternating turns, and provides instant feedback on game outcomes (win, draw).
+Table of Contents
+
+    Features
+    Technologies
+    How to Play
+    Installation
+    Contributing
+    Screenshots
+
+
+Features
+
+    Player vs Player: Two players can play against each other.
+    Responsive Design: Adapts to different screen sizes.
+    Win Detection: The game automatically detects when a player wins.
+    Draw Detection: If all spots are filled and no one wins, the game declares a draw.
+    Reset Option: Players can reset the game at any time and start fresh.
+
+Technologies
+
+    HTML5: For the game structure and layout.
+    CSS3: For styling and designing a responsive UI.
+    JavaScript: For game logic and interactivity.
+
+How to Play
+
+    The game starts with Player 1 (X) making the first move.
+    Players take turns by clicking on the available spaces in the grid.
+    The game checks for a win or draw after every move.
+    A player wins by placing three of their marks in a horizontal, vertical, or diagonal row.
+    If all spaces are filled and there is no winner, the game results in a draw.
+    Click the reset button to start a new game.
+
+Installation
+
+   To view this project, all you need is a web browser. If you're running this locally, a code editor like VS Code and a basic understanding of HTML/CSS/JavaScript will be useful.
+
+    Download or clone the project repository from GitHub.
+    Open the project folder.
+    You can directly open the index.html file in your browser to view the project.
+
+Contributing
+
+If you wish to contribute, feel free to fork the repository and submit a pull request.
+
+    Fork it.
+    Create your feature branch (git checkout -b feature/AmazingFeature).
+    Commit your changes (git commit -m 'Add some AmazingFeature').
+    Push to the branch (git push origin feature/AmazingFeature).
+    Open a pull request.
+
+Screenshots
+
+Here are some screenshots of the Tic Tac Toe game:
+
+![Homepage](Main.png)
+![XWon](XWon.png)
+![0Won](0Won.png)
+![Tie](Tie.png)
diff --git a/Tic-Tac-Toe_Game/script.js b/Tic-Tac-Toe_Game/script.js
@@ -0,0 +1,116 @@
+window.addEventListener('DOMContentLoaded', () => {
+    const tiles = Array.from(document.querySelectorAll('.tile'));
+    const playerDisplay = document.querySelector('.display-player');
+    const resetButton = document.querySelector('#reset');
+    const announcer = document.querySelector('.announcer');
+
+    let board = ['', '', '', '', '', '', '', '', ''];
+    let currentPlayer = 'X';
+    let isGameActive = true;
+
+    const PLAYERX_WON = 'PLAYERX_WON';
+    const PLAYERO_WON = 'PLAYERO_WON';
+    const TIE = 'TIE';
+
+    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 handleResultValidation() {
+        let roundWon = false;
+        for (let i = 0; i <= 7; i++) {
+            const winCondition = winningConditions[i];
+            const a = board[winCondition[0]];
+            const b = board[winCondition[1]];
+            const c = board[winCondition[2]];
+            if (a === '' || b === '' || c === '') {
+                continue;
+            }
+            if (a === b && b === c) {
+                roundWon = true;
+                break;
+            }
+        }
+
+    if (roundWon) {
+            announce(currentPlayer === 'X' ? PLAYERX_WON : PLAYERO_WON);
+            isGameActive = false;
+            return;
+        }
+
+    if (!board.includes(''))
+        announce(TIE);
+    }
+
+    const announce = (type) => {
+        switch(type){
+            case PLAYERO_WON:
+                announcer.innerHTML = 'Player <span class="playerO">O</span> Won';
+                break;
+            case PLAYERX_WON:
+                announcer.innerHTML = 'Player <span class="playerX">X</span> Won';
+                break;
+            case TIE:
+                announcer.innerText = 'Tie';
+        }
+        announcer.classList.remove('hide');
+    };
+
+    const isValidAction = (tile) => {
+        if (tile.innerText === 'X' || tile.innerText === 'O'){
+            return false;
+        }
+
+        return true;
+    };
+
+    const updateBoard =  (index) => {
+        board[index] = currentPlayer;
+    }
+
+    const changePlayer = () => {
+        playerDisplay.classList.remove(`player${currentPlayer}`);
+        currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
+        playerDisplay.innerText = currentPlayer;
+        playerDisplay.classList.add(`player${currentPlayer}`);
+    }
+
+    const userAction = (tile, index) => {
+        if(isValidAction(tile) && isGameActive) {
+            tile.innerText = currentPlayer;
+            tile.classList.add(`player${currentPlayer}`);
+            updateBoard(index);
+            handleResultValidation();
+            changePlayer();
+        }
+    }
+
+    const resetBoard = () => {
+        board = ['', '', '', '', '', '', '', '', ''];
+        isGameActive = true;
+        announcer.classList.add('hide');
+
+        if (currentPlayer === 'O') {
+            changePlayer();
+        }
+
+        tiles.forEach(tile => {
+            tile.innerText = '';
+            tile.classList.remove('playerX');
+            tile.classList.remove('playerO');
+        });
+    }
+
+    tiles.forEach( (tile, index) => {
+        tile.addEventListener('click', () => userAction(tile, index));
+    });
+
+    resetButton.addEventListener('click', resetBoard);
+});
diff --git a/Tic-Tac-Toe_Game/style.css b/Tic-Tac-Toe_Game/style.css
@@ -0,0 +1,86 @@
+* {
+    padding: 0;
+    margin: 0;
+    font-family: 'Roboto', sans-serif;
+}
+
+.background {
+    /* background-color: #12181B;
+     */
+    background-image: linear-gradient(135deg, #24e9f3, #095a90);
+    height: 150vh;
+    padding-top: 1px;
+}
+
+.title {
+    color: white;
+    text-align: center;
+    font-size: 40px;
+    margin-top: 10%;
+}
+
+.display {
+    color: white;
+    font-size: 20px;
+    text-align: center;
+    margin-top: 1em;
+    margin-bottom: 1em;
+}
+
+.hide {
+    display: none;
+}
+
+.container {
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 33% 33% 33%;
+    grid-template-rows: 33% 33% 33%;
+    max-width: 300px;
+
+}
+
+.tile {
+    border: 1px solid white;
+    min-width: 100px;
+    min-height: 100px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 50px;
+    cursor: pointer;
+}
+
+.playerX {
+    color: #ee120a;
+}
+
+.playerO {
+    color: #cc0fa9;
+}
+
+.controls {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin-top: 1em;
+}
+
+.controls button {
+    color: white;
+    padding: 8px;
+    border-radius: 8px;
+    border: none;
+    font-size: 20px;
+    margin-left: 1em;
+    cursor: pointer;
+}
+
+.restart {
+    background-color: #498AFB;
+}
+
+#reset {
+    background-color: #f71810;
+}