diff --git a/Games/Tic_tac_toe_responsive/README.md b/Games/Tic_tac_toe_responsive/README.md new file mode 100644 index 0000000000..cee5495f23 --- /dev/null +++ b/Games/Tic_tac_toe_responsive/README.md @@ -0,0 +1,28 @@ +# **Game_Name** + +Tic Tac Toe + +
+ +## **Description 📃** +- Tic Tac Toe is a traditional 2 player game. Where players take turn one by one to mark a cell out of 9 + + +## **functionalities 🎮** +- If a player is able to mark 3 consecutive cells (horizontally/vertically/diagonally) then that player wins the game. +- If no player is able to mark 3 consecutive cells, then the game is a draw + +
+ +## **How to play? 🕹ī¸** +- Firstly player X takes turn and clicks on a cell of their choice +- The cell is filled with an X +- Now player O will mark a cell and fills it by a O + +
+ +## **Screenshots 📸** + +
+[image](/Games/Tic_tac_toe_responsive/assets/images/Tic_tac_toe_responsive.png) + diff --git a/Games/Tic_tac_toe_responsive/assets/images/PointerBody.png b/Games/Tic_tac_toe_responsive/assets/images/PointerBody.png new file mode 100644 index 0000000000..f1ae84d5d5 Binary files /dev/null and b/Games/Tic_tac_toe_responsive/assets/images/PointerBody.png differ diff --git a/Games/Tic_tac_toe_responsive/assets/images/PointerHover.png b/Games/Tic_tac_toe_responsive/assets/images/PointerHover.png new file mode 100644 index 0000000000..0f63672839 Binary files /dev/null and b/Games/Tic_tac_toe_responsive/assets/images/PointerHover.png differ diff --git a/Games/Tic_tac_toe_responsive/assets/images/PointerText.png b/Games/Tic_tac_toe_responsive/assets/images/PointerText.png new file mode 100644 index 0000000000..b6545bf4f0 Binary files /dev/null and b/Games/Tic_tac_toe_responsive/assets/images/PointerText.png differ diff --git a/Games/Tic_tac_toe_responsive/assets/images/Tic_tac_toe_responsive.png b/Games/Tic_tac_toe_responsive/assets/images/Tic_tac_toe_responsive.png new file mode 100644 index 0000000000..c002f0e872 Binary files /dev/null and b/Games/Tic_tac_toe_responsive/assets/images/Tic_tac_toe_responsive.png differ diff --git a/Games/Tic_tac_toe_responsive/index.html b/Games/Tic_tac_toe_responsive/index.html new file mode 100644 index 0000000000..a610682d2d --- /dev/null +++ b/Games/Tic_tac_toe_responsive/index.html @@ -0,0 +1,63 @@ + + + + + + + Tic Tac Toe + + + + + + + +
+ +
+

Tic Tac Toe

+

The easiest one

+
+ +
+
+
+ +
+ +
+ + + +
+ +
+ +
+

+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ +
+ + + + \ No newline at end of file diff --git a/Games/Tic_tac_toe_responsive/script.js b/Games/Tic_tac_toe_responsive/script.js new file mode 100644 index 0000000000..87b81b32c2 --- /dev/null +++ b/Games/Tic_tac_toe_responsive/script.js @@ -0,0 +1,101 @@ +const cells = document.querySelectorAll('.cell'); +const display = document.querySelector('.display'); +let restart = document.querySelector('#restart'); + +display.innerText = "X's turn" +let count = 0; +let xTurn; + +const winCombinations = [ + [0, 1, 2], + [0, 3, 6], + [0, 4, 8], + [1, 4, 7], + [2, 5, 8], + [2, 4, 6], + [3, 4, 5], + [6, 7, 8], +]; + +const handleClick = (cell) => { + let curCell = cell.target; + count++; + + if (xTurn) { + curCell.innerText = 'X'; + display.innerText = "O's turn" + xTurn = false; + } + else { + curCell.innerText = 'O'; + display.innerText = "X's turn" + xTurn = true; + } + + if (count == 9) { + console.log(count); + checkDraw(); + return; + } + getWinner(); +} + +const startGame = () => { + xTurn = true; + + cells.forEach((element) => { + element.removeEventListener('click', handleClick); + element.addEventListener('click', handleClick, { once: true } // so that a cell can be clicked only once + ) + }) +} +startGame(); + + + +const showWinner = (winner) => { + display.innerText = `${winner} won 🍾`; +} + + +const getWinner = () => { + + for (let combinations of winCombinations) { + + const pos1 = cells[combinations[0]].innerText; + const pos2 = cells[combinations[1]].innerText; + const pos3 = cells[combinations[2]].innerText; + + if (pos1 != "", pos2 != "", pos3 != "") { + + if (pos1 === pos2 && pos2 === pos3) { + showWinner(pos1); + return true; + } + } + + } + return false; +} + + +const checkDraw = () => { + cells.forEach(cell => { + if (cell.innerText !== "" && !getWinner()) { + display.innerText = "Draw!🤝"; + } + }) +} + +const restartGame = () => { + cells.forEach(cell => { + cell.innerText = ""; + count = 0; + display.innerText = "X's turn" + startGame(); + + + }) +} + +restart.addEventListener('click', restartGame) \ No newline at end of file diff --git a/Games/Tic_tac_toe_responsive/style.css b/Games/Tic_tac_toe_responsive/style.css new file mode 100644 index 0000000000..ff11ccf393 --- /dev/null +++ b/Games/Tic_tac_toe_responsive/style.css @@ -0,0 +1,241 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + outline: none; + font-family: 'whyte', Arial, Helvetica, sans-serif; +} + +body{ + background-color: #FFC700; + background-color: #C8B8FF; + display: flex; + flex-wrap: wrap; +} + + + +/* CURSORS */ +html{ + cursor: url('/Games/Tic_tac_toe_responsive/assets/images/PointerBody.png'), auto; +} + + i, .cell, footer a { + cursor: url('/Games/Tic_tac_toe_responsive/assets/images/PointerHover.png'), auto; +} + +.notch p, h3, input { + cursor: url('/Games/Tic_tac_toe_responsive/assets/images/PointerText.png'), auto; + +} + + + +/* PHONE UI */ +.phoneUi{ + border: 4px solid black; + width: 580px; + height: 80%; + border-radius: 30px; + background-color: white; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + text-align: center; +} + +.notch{ + width: 100%; + height: 10%; + color: black; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 22px; + gap: 8px; +} + +.notch p { + color: grey; + font-size: 12px; +} + +/* SCREEN */ +.screen{ + width: 90%; + height: 80%; + padding: 0px 35px; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + background-color: #2DD998; + border: 4px solid black; + color: black; + border-radius: 12px; + font-weight: bold; +} + + +.screenHeader { + display: flex; + justify-content: space-between; + align-items: center; + height: 20%; +} + + +.greenBars{ + width: 40%; + display: flex; + justify-content: start; + gap: 10px; +} + +.greenBars span { + border-radius: 12px; + border: 3px solid black; + width: 50%; + height: 22px; + } + +.circleDiv { + display: flex; + justify-content: space-around; + width: 100px; +} + +.circleDiv span { + width: 20px; + height: 20px; + border-radius: 12px; + border: 3px solid black; +} + +/* Display FIELD */ + +.displayDiv{ + height: 14%; + background-color: #699CF8; + border-radius: 15px; + border: 4px solid black; + display: flex; + justify-content: space-around; + align-items: center; + + +} + +.display{ + color: black; + width: 100%; + height: 100%; + padding: 20px; + font-size: 30px; + display: flex; + justify-content: center; + align-items: center; +} + +.displayDiv i { + position: absolute; + right: 100px; +} + + +/* MAIN CONTENT */ +.content{ + width: 100%; + overflow: auto; + height: 66%; + padding: 0px 10px; +} + +.gameBox{ + width: 100%; + height: 100%; + padding: 10px; + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap; + gap: 8px; + +} +.cell{ + width: 30%; + height: 30%; + border: 4px solid black; + background-color: white; + border-radius: 10px; + font-size: 90px; + display: flex; + justify-content: center; + align-items: center; + font-family: cursive ,'whyte', Arial, Helvetica, sans-serif; +} + +footer{ + margin-top: 20px; +} + +footer a { + text-decoration: none; + cursor: pointer; +} + + +/* RESPONSIVE */ + + +@media (max-width: 648px) +{ + .phoneUi{ + width: 440px; + } + .cell{ + width: 80px; + height: 80px; + font-size: 70px; + } + + +} + + +@media (max-width: 475px) +{ + .screen{ + padding: 0px 10px; + } + .phoneUi{ + width: 340px; + } + .notch{ + font-size: 18px; + } + .notch p { + color: grey; + font-size: 10px; + } + .cell{ + width: 70px; + height: 70px; + font-size: 50px; + } + .displayDiv i { + right: 40px; + } + + +} + +@media (max-height: 500px) +{ + .notch h3 { + font-size: 14px; + } +} + diff --git a/README.md b/README.md index 4a00d7f5f5..bdffdb35d5 100644 --- a/README.md +++ b/README.md @@ -201,7 +201,7 @@ This repository also provides one such platforms where contributers come over an | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [CatchTheBall](https://github.com/kunjgit/GameZone/tree/main/Games/CatchTheBall) | | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [DoraemonRun ](https://github.com/kunjgit/GameZone/tree/main/Games/DoraemonRun) | | [Memory_Cards_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Memory_Cards_Game) | -| [Typing_Speed_Test2](https://github.com/kunjgit/GameZone/tree/main/Games/Typing_Speed_Test2) | +| [Typing_Speed_Test2](https://github.com/kunjgit/GameZone/tree/main/Games/Typing_Speed_Test2) | [Tic Tac Toe Responsive ](https://github.com/kunjgit/GameZone/tree/main/Games/Tic_tac_toe_responsive) | | [Technical_Mind_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Technical_Mind_Game) | [Slide_Master_Puzzle](https://github.com/kunjgit/GameZone/tree/Main/Games/Slide_Master_Puzz)| | | [Ball_Shooting_Game](https://github.com/kunjgit/GameZone/tree/main/Games/Ball_Shooting_Game) | [Letter_Sleuth](https://github.com/swetha5157/GameZone/tree/main/Games/Letter_Sleuth) diff --git a/assets/images/Tic_tac_toe_responsive.png b/assets/images/Tic_tac_toe_responsive.png new file mode 100644 index 0000000000..c002f0e872 Binary files /dev/null and b/assets/images/Tic_tac_toe_responsive.png differ