-
Notifications
You must be signed in to change notification settings - Fork 839
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #3182 from RazaAli313/main
Tic Tac Toe Game
- Loading branch information
Showing
12 changed files
with
259 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| # Tic Tac Toe | ||
|
|
||
| ## Description 📃 | ||
| This is a classic Tic Tac Toe game implemented with additional functionalities such as success music on winning, music on game drawn, and sound on each click of turn. The game features a user-friendly interface and supports both single-player and two-player modes. | ||
|
|
||
| ## Functionalities 🎮 | ||
| - Play against the another player | ||
| - Success music on winning | ||
| - Music on game drawn | ||
| - Sound on each click of turn | ||
| - Recognizes winning combinations horizontally, vertically, and diagonally | ||
| - Attractive UI | ||
|
|
||
| ## How to Play? 🕹️ | ||
| 1. Launch the game. | ||
| 2. Click on the desired cell to place your symbol (X or O). | ||
| 3. Alternate turns with your opponent. | ||
| 4. The first player to achieve three of their symbols in a row wins. | ||
| 5. If all cells are filled and no player has three symbols in a row, the game is drawn. | ||
|
|
||
| ## Screenshots 📸 | ||
|
|
||
|  | ||
|
|
||
|
|
||
| ## Working Video 📹 | ||
| Uploading Tic Tac Toe Game.mp4… | ||
|
|
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <link href="style.css" rel="stylesheet"> | ||
| <link rel="shortcut icon" href="tic-tac-toe.png" type="image/x-icon"> | ||
| <title>Tic Tac Toe Game</title> | ||
| </head> | ||
| <body> | ||
| <nav> | ||
| <ul> | ||
| <li>My Tic Tac Toe Game</li> | ||
| </ul> | ||
| </nav> | ||
| <div class="gamecontainer"> | ||
| <div class="container"> | ||
| <div class="line"></div> | ||
| <div class="box"><span class="boxtext"></span></div> | ||
| <div class="box"><span class="boxtext"></span></div> | ||
| <div class="box"><span class="boxtext"></span></div> | ||
| <div class="box"><span class="boxtext"></span></div> | ||
| <div class="box"><span class="boxtext"></span></div> | ||
| <div class="box"><span class="boxtext"></span></div> | ||
| <div class="box"><span class="boxtext"></span></div> | ||
| <div class="box"><span class="boxtext"></span></div> | ||
| <div class="box"><span class="boxtext"></span></div> | ||
| </div> | ||
| <div class="gameinfo"> | ||
| <h1>Welcome to Tic Tac Toe</h1> | ||
| <div class="info"> | ||
| <span id="turn">Turn for X</span> | ||
| <button id="reset"onclick="func()">Play Again</button> | ||
| </div> | ||
| <div class="imgbox"> | ||
| <img src="excited.gif"alt="Congratulations Gif"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <script src="index.js"> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| console.log("Welcome To Tic Tac Toe Game"); | ||
|
|
||
| let gameover = false; | ||
| let turn_music = new Audio('ding.mp3'); | ||
| open_game = new Audio('music.mp3'); | ||
| open_game.play(); | ||
| let gamesuccess = new Audio('success.mp3'); | ||
| let gameover_music = new Audio('gameover.mp3'); | ||
|
|
||
| let turn = 'X'; | ||
|
|
||
| const changeTurn = () => { | ||
| return turn === 'X' ? 'O' : 'X'; | ||
| } | ||
|
|
||
| const checkWin = () => { | ||
| box = document.getElementsByClassName("boxtext"); | ||
| win = [ | ||
| [0, 1, 2, 5, 5, 0], | ||
| [3, 4, 5, 5, 15, 0], | ||
| [6, 7, 8, 5, 25, 0], | ||
| [0, 3, 6, -5, 15, 90], | ||
| [1, 4, 7, 5, 15, 90], | ||
| [2, 5, 8, 15, 15, 90], | ||
| [0, 4, 8, 5, 15, 45], | ||
| [2, 4, 6, 5, 15, 135] | ||
| ] | ||
| win.forEach(e => { | ||
| if (box[e[0]].innerText === box[e[1]].innerText && box[e[1]].innerText === box[e[2]].innerText && box[e[0]].innerText !== '') { | ||
| document.getElementById("turn").innerText = box[e[0]].innerText + " Won"; | ||
| gameover = true; | ||
| document.querySelector('.imgbox').getElementsByTagName('img')[0].style.display = "block"; | ||
| gamesuccess.play(); | ||
| document.querySelector('.line').style.transform = `translate(${e[3]}vw,${e[4]}vw) rotate(${e[5]}deg)`; | ||
| document.querySelector('.line').style.display = 'block'; | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| let boxes = document.getElementsByClassName("box"); | ||
| Array.from(boxes).forEach(element => { | ||
| let boxtext = element.querySelector(".boxtext"); | ||
| element.addEventListener('click', () => { | ||
| open_game.pause(); | ||
| if (boxtext.innerText === '') { | ||
| boxtext.innerText = turn; | ||
| turn = changeTurn(); | ||
| turn_music.play(); | ||
| checkWin(); | ||
| if (!gameover) { | ||
| let isFilled = Array.from(box).every(element => element.innerText !== ''); | ||
| if (isFilled) { | ||
| document.getElementById("turn").innerText = "Game is Over!!!"; | ||
| gameover_music.play(); | ||
| } | ||
| else { | ||
| document.getElementById("turn").innerText = "Turn For " + turn; | ||
| } | ||
| } | ||
| } | ||
| }); | ||
| }) | ||
|
|
||
| function func() { | ||
| let boxes = document.getElementsByClassName("box"); | ||
| Array.from(boxes).forEach(element => { | ||
| element.querySelector(".boxtext").innerText = ""; | ||
| document.querySelector('.imgbox').getElementsByTagName('img')[0].style.display = "none"; | ||
| document.getElementById("turn").innerText = "Turn For " + 'X'; | ||
| open_game.play(); | ||
| turn = 'X'; | ||
| document.querySelector('.line').style.display = "none"; | ||
| gameover = false; | ||
| }) | ||
| } |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaina+2:wght@400;500&family=Roboto&display=swap'); | ||
|
|
||
| *{ | ||
| margin: 0; | ||
| padding: 0; | ||
| } | ||
| body{ | ||
| height: 100vh; | ||
| width: 100vw; | ||
| border-right:7px solid skyblue; | ||
| border-left:7px solid skyblue; | ||
| border-bottom:7px solid skyblue; | ||
| } | ||
| nav{ | ||
| border:7px solid skyblue; | ||
| background-color: blueviolet; | ||
| color:white; | ||
| height: 50px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| } | ||
| nav ul li{ | ||
| font-size: 27px; | ||
| font-family:'Roboto', sans-serif; | ||
| list-style: none; | ||
| } | ||
| .gamecontainer{ | ||
| display: flex; | ||
| justify-content: center; | ||
| margin-top: 50px; | ||
| position: relative; | ||
| } | ||
| .line{ | ||
| background-color: rgb(0, 140, 255); | ||
| width:20vw; | ||
| height: 3px; | ||
| position: absolute; | ||
| display: none; | ||
| } | ||
| .imgbox{ | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
| .imgbox img{ | ||
| height: 30vh; | ||
| display: none; | ||
| margin-top: 20px; | ||
|
|
||
|
|
||
| } | ||
| .container{ | ||
| display: grid; | ||
| grid-template-columns:repeat(3,10vw); | ||
| grid-template-rows:repeat(3,10vw); | ||
| font-family: 'Roboto', sans-serif; | ||
| position: relative; | ||
| } | ||
| .box{ | ||
| border: 2px solid blueviolet; | ||
| font-size: 8vw; | ||
| } | ||
| .box:hover{ | ||
| background-color: rgb(234, 221, 246); | ||
| cursor: pointer; | ||
| } | ||
| .boxtext{ | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
| .gameinfo{ | ||
| padding:0 34px; | ||
| font-family:'Baloo Bhaina 2', cursive; | ||
| } | ||
| .info{ | ||
| text-align: center; | ||
| font-size: 2vh; | ||
| } | ||
| #reset{ | ||
| background-color:rgb(156, 96, 212); | ||
|
|
||
|
|
||
| font-weight: bold; | ||
| color: white; | ||
| width: auto; | ||
| padding:1vh; | ||
| border-radius: 10px; | ||
| cursor: pointer; | ||
| margin-left: 10px; | ||
| } | ||
| #turn{ | ||
| color: gray; | ||
| font-size: 2.5vh; | ||
| } | ||
| @media screen and (max-width:800px) { | ||
| .gamecontainer{ | ||
| flex-wrap: wrap; | ||
| } | ||
| .gameinfo{ | ||
| margin-top: 34px; | ||
| } | ||
| .gameinfo h1{ | ||
| font-size: 1.5rem; | ||
| } | ||
| .container{ | ||
| grid-template-columns:repeat(3,20vw); | ||
| grid-template-rows:repeat(3,20vw); | ||
| } | ||
| } |
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.