From 44d9d8dd47ce8b39d24c42bf300e268243f33634 Mon Sep 17 00:00:00 2001 From: sri-vishnu-r1431 Date: Thu, 22 Jun 2023 21:07:33 +0530 Subject: [PATCH] Added Tic Tac Toe Project --- index.html | 208 +++++++++++++++++--------------- projects/Tic-Tac-Toe/index.html | 31 +++++ projects/Tic-Tac-Toe/index.js | 89 ++++++++++++++ projects/Tic-Tac-Toe/sample.jpg | Bin 0 -> 33884 bytes projects/Tic-Tac-Toe/style.css | 146 ++++++++++++++++++++++ 5 files changed, 376 insertions(+), 98 deletions(-) create mode 100644 projects/Tic-Tac-Toe/index.html create mode 100644 projects/Tic-Tac-Toe/index.js create mode 100644 projects/Tic-Tac-Toe/sample.jpg create mode 100644 projects/Tic-Tac-Toe/style.css diff --git a/index.html b/index.html index 51219921..ed7d20c0 100644 --- a/index.html +++ b/index.html @@ -290,118 +290,130 @@

Clothing Shop

- - + +

Game

Tic Tac Toe

- -
-
-
-

Bing

-

Top 10 rated Netflix Series of 2023

-
-
- -
-
-

Game

-

Candy Crush

-
-
- + +
+
+

Bing

+

Top 10 rated Netflix Series of 2023

+
+
+ +
+
+

Game

+

Candy Crush

+
+
+ + + + +
+
+

Game

+

Memory Game

+
+
+ + +
+
+

Website

+

University Website

+
+
+ + +
+
+

Expense_Tracker/p> +

Expense Tracker

+
+
+ + +
+
+

Clone/p> +

Spotify Clone

+
+
+ + +
+
+
+

Website

+

Solar System Model

+
+
+ + + + +
+
+
+

Game

+

Bingo Game

+ +
+
+ +
+
+

Game

+

Bingo Game

+ +
+
+ +
+ - -
-
-

Game

-

Memory Game

-
-
- - -
-
-

Website

-

University Website

-
-
- - -
-
-

Expense_Tracker/p> -

Expense Tracker

-
+ +
+

CONTACT US

+
+ - - -
-
-

Clone/p> -

Spotify Clone

-
+
- - -
-
-

Website

-

Solar System Model

-
+
+
Instagram
+
- - - - -
-
-

Game

-

Bingo Game

- -
+
+
Github
+
- -
- - - -

CONTACT US

- -
-
- + +
Linkedin
+ +
+
+
+
+
+
- + \ No newline at end of file diff --git a/projects/Tic-Tac-Toe/index.html b/projects/Tic-Tac-Toe/index.html new file mode 100644 index 00000000..48175814 --- /dev/null +++ b/projects/Tic-Tac-Toe/index.html @@ -0,0 +1,31 @@ + + + + + + + + + Document + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + + \ No newline at end of file diff --git a/projects/Tic-Tac-Toe/index.js b/projects/Tic-Tac-Toe/index.js new file mode 100644 index 00000000..c6fd64bb --- /dev/null +++ b/projects/Tic-Tac-Toe/index.js @@ -0,0 +1,89 @@ +const X_CLASS = 'x' +const CIRCLE_CLASS = 'circle' +const WINNING_COMBINATIONS = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6] +] +const cellElements = document.querySelectorAll('[data-cell]') +const board = document.getElementById('board') +const winningMessageElement = document.getElementById('winningMessage') +const restartButton = document.getElementById('restartButton') +const winningMessageTextElement = document.querySelector('[data-winning-message-text]') +let circleTurn + +startGame() + +restartButton.addEventListener('click', startGame) + +function startGame() { + circleTurn = false + cellElements.forEach(cell => { + cell.classList.remove(X_CLASS) + cell.classList.remove(CIRCLE_CLASS) + cell.removeEventListener('click', handleClick) + cell.addEventListener('click', handleClick, { once: true }) + }) + setBoardHoverClass() + winningMessageElement.classList.remove('show') +} + +function handleClick(e) { + const cell = e.target + const currentClass = circleTurn ? CIRCLE_CLASS : X_CLASS + placeMark(cell, currentClass) + if (checkWin(currentClass)) { + endGame(false) + } else if (isDraw()) { + endGame(true) + } else { + swapTurns() + setBoardHoverClass() + } +} + +function endGame(draw) { + if (draw) { + winningMessageTextElement.innerText = 'Draw!' + } else { + winningMessageTextElement.innerText = `${circleTurn ? "O's" : "X's"} Wins!` + } + winningMessageElement.classList.add('show') +} + +function isDraw() { + return [...cellElements].every(cell => { + return cell.classList.contains(X_CLASS) || cell.classList.contains(CIRCLE_CLASS) + }) +} + +function placeMark(cell, currentClass) { + cell.classList.add(currentClass) +} + +function swapTurns() { + circleTurn = !circleTurn +} + +function setBoardHoverClass() { + board.classList.remove(X_CLASS) + board.classList.remove(CIRCLE_CLASS) + if (circleTurn) { + board.classList.add(CIRCLE_CLASS) + } else { + board.classList.add(X_CLASS) + } +} + +function checkWin(currentClass) { + return WINNING_COMBINATIONS.some(combination => { + return combination.every(index => { + return cellElements[index].classList.contains(currentClass) + }) + }) +} \ No newline at end of file diff --git a/projects/Tic-Tac-Toe/sample.jpg b/projects/Tic-Tac-Toe/sample.jpg new file mode 100644 index 0000000000000000000000000000000000000000..989425873e4b89100b934d84db5ca4c161e3db1e GIT binary patch literal 33884 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 B?k)fT literal 0 HcmV?d00001 diff --git a/projects/Tic-Tac-Toe/style.css b/projects/Tic-Tac-Toe/style.css new file mode 100644 index 00000000..1a3a2316 --- /dev/null +++ b/projects/Tic-Tac-Toe/style.css @@ -0,0 +1,146 @@ +*, *::after, *::before { + box-sizing: border-box; + } + + :root { + --cell-size: 100px; + --mark-size: calc(var(--cell-size) * .9); + } + + body { + margin: 0; + } + + .board { + width: 100vw; + height: 100vh; + display: grid; + justify-content: center; + align-content: center; + justify-items: center; + align-items: center; + grid-template-columns: repeat(3, auto) + } + + .cell { + width: var(--cell-size); + height: var(--cell-size); + border: 1px solid black; + display: flex; + justify-content: center; + align-items: center; + position: relative; + cursor: pointer; + } + + .cell:first-child, + .cell:nth-child(2), + .cell:nth-child(3) { + border-top: none; + } + + .cell:nth-child(3n + 1) { + border-left: none; + } + + .cell:nth-child(3n + 3) { + border-right: none; + } + + .cell:last-child, + .cell:nth-child(8), + .cell:nth-child(7) { + border-bottom: none; + } + + .cell.x, + .cell.circle { + cursor: not-allowed; + } + + .cell.x::before, + .cell.x::after, + .cell.circle::before { + background-color: black; + } + + .board.x .cell:not(.x):not(.circle):hover::before, + .board.x .cell:not(.x):not(.circle):hover::after, + .board.circle .cell:not(.x):not(.circle):hover::before { + background-color: lightgrey; + } + + .cell.x::before, + .cell.x::after, + .board.x .cell:not(.x):not(.circle):hover::before, + .board.x .cell:not(.x):not(.circle):hover::after { + content: ''; + position: absolute; + width: calc(var(--mark-size) * .15); + height: var(--mark-size); + } + + .cell.x::before, + .board.x .cell:not(.x):not(.circle):hover::before { + transform: rotate(45deg); + } + + .cell.x::after, + .board.x .cell:not(.x):not(.circle):hover::after { + transform: rotate(-45deg); + } + + .cell.circle::before, + .cell.circle::after, + .board.circle .cell:not(.x):not(.circle):hover::before, + .board.circle .cell:not(.x):not(.circle):hover::after { + content: ''; + position: absolute; + border-radius: 50%; + } + + .cell.circle::before, + .board.circle .cell:not(.x):not(.circle):hover::before { + width: var(--mark-size); + height: var(--mark-size); + } + + .cell.circle::after, + .board.circle .cell:not(.x):not(.circle):hover::after { + width: calc(var(--mark-size) * .7); + height: calc(var(--mark-size) * .7); + background-color: white; + } + + .winning-message { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, .9); + justify-content: center; + align-items: center; + color: white; + font-size: 5rem; + flex-direction: column; + } + + .winning-message button { + font-size: 3rem; + background-color: white; + border: 1px solid black; + padding: .25em .5em; + cursor: pointer; + } + + .winning-message button:hover { + background-color: black; + color: white; + border-color: white; + } + + .winning-message.show { + display: flex; + } \ No newline at end of file