diff --git a/TicTacToeGame/Abhii-07/Index.css b/TicTacToeGame/Abhii-07/Index.css new file mode 100644 index 000000000..fe0062d8a --- /dev/null +++ b/TicTacToeGame/Abhii-07/Index.css @@ -0,0 +1,130 @@ +*, +*::after, +*::before { + box-sizing: border-box; + font-family: sans-serif; +} + +:root { + --cell-size: 100px; + --mark-size: calc(var(--cell-size) * 0.5); +} + +body { + margin: 0; + text-align: center; +} + +.board { + width: 100vw; + margin: 20px; + display: grid; + justify-content: center; + align-content: center; + justify-items: center; + align-items: center; + grid-template-columns: repeat(3, auto); +} + +.board.game-ended, .board.disabled { + pointer-events: none; +} + +.load-btn { + background: lightskyblue; + padding: 10px; + border: none; + border-radius: 5px; + margin: 0 15px; + box-shadow: rgb(16 24 28 / 50%) -1px 5px 8px 0px; +} + +.cell { + width: var(--cell-size); + height: var(--cell-size); + border: 1px solid blue; + display: flex; + justify-content: center; + align-items: center; + position: relative; + cursor: pointer; +} + +#game-box { + display: none; +} + +.cell.x, +.cell.circle { + pointer-events: none; +} + +.cell.x::before, +.cell.x::after, +.cell.circle::before { + background-color: blue; +} + +.cell.x::before, +.cell.x::after { + content: ''; + position: absolute; + width: calc(var(--mark-size) * 0.15); + height: var(--mark-size); +} + +.cell.x::before { + transform: rotate(45deg); +} + +.cell.x::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) * 0.7); + height: calc(var(--mark-size) * 0.7); + background-color: white; +} + +.winning-message { + display: none; + justify-content: center; + align-items: center; + font-size: 3rem; + flex-direction: column; +} + +.winning-message button { + font-size: 3rem; + background-color: white; + border: 1px solid blue; + padding: 0.25em 0.5em; + cursor: pointer; +} + +.winning-message button:hover { + background-color: blue; + color: white; + border-color: white; +} + +.winning-message.show { + display: flex; +} \ No newline at end of file diff --git a/TicTacToeGame/Abhii-07/Index.html b/TicTacToeGame/Abhii-07/Index.html new file mode 100644 index 000000000..c75bfe2de --- /dev/null +++ b/TicTacToeGame/Abhii-07/Index.html @@ -0,0 +1,37 @@ + + + + + + + + + + Tic Tac Toe + + +
+

Play VS

+ + or + +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + \ No newline at end of file diff --git a/TicTacToeGame/Abhii-07/Index.js b/TicTacToeGame/Abhii-07/Index.js new file mode 100644 index 000000000..2b78db1f6 --- /dev/null +++ b/TicTacToeGame/Abhii-07/Index.js @@ -0,0 +1,139 @@ +const cellElements = document.querySelectorAll('[data-cell]'); +const undoBtn = document.getElementById('undo-btn'); +const board = document.getElementById('board'); +const wMessageElement = document.getElementById('wMessage'); +const wMessageTextElement = document.getElementById('text'); +const xClass = 'x'; +const circClass = 'circle'; +const combo = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6], +]; +let circleTurn; +let lastSelectedCell; +let rival; +load(); + +function load() { + circleTurn = false; + cellElements.forEach((cell) => { + cell.classList.remove(xClass); + cell.classList.remove(circClass); + cell.removeEventListener('click', handleClick); + cell.addEventListener('click', handleClick); + }); + setBoardHoverClass(); + undoBtn.addEventListener('click', undo); + wMessageElement.classList.remove('show'); +} + +function undo() { + undoBtn.disabled = true; + swap(); + lastSelectedCell.classList.remove('x'); + lastSelectedCell.classList.remove('circle'); + lastSelectedCell.childNodes.forEach(function (child) { + lastSelectedCell.removeChild(child); + }); +} + +function handleClick(e, el) { + const cell = e.target || el; + const currentClass = circleTurn ? circClass : xClass; + placeMark(cell, currentClass); + if (checkWin(currentClass)) { + isEnd(false); + return; + } else if (isDraw()) { + isEnd(true); + return; + } else { + swap(); + setBoardHoverClass(); + } + if (rival === 'computer' && e) { + board.classList.add('disabled'); + setTimeout(function () { + computerMove(); + }, 500); + } +} + +function computerMove() { + let pick = Math.round(Math.random() * 8); + let selectedCell = cellElements[pick]; + + while ( + selectedCell.classList.value.indexOf('x') > -1 || + selectedCell.classList.value.indexOf('circle') > -1 + ) { + console.log('yes'); + pick = Math.round(Math.random() * 8); + selectedCell = cellElements[pick]; + } + board.classList.remove('disabled'); + handleClick(false, selectedCell); + +} + +function setRival(_rival) { + rival = _rival; + document.getElementById('loading-screen').style.display = 'none'; + document.getElementById('game-box').style.display = 'block'; + if (rival === 'computer') { + undoBtn.style.display = 'none'; + } +} + +function isEnd(draw) { + if (draw) { + wMessageTextElement.innerText = 'Draw'; + } else { + wMessageTextElement.innerText = `Winner is: ${circleTurn ? 'O' : 'X'}`; + } + wMessageElement.classList.add('show'); + board.classList.add('game-ended'); + undoBtn.disabled = true; +} + +function isDraw() { + return [...cellElements].every((cell) => { + return ( + cell.classList.contains(xClass) || cell.classList.contains(circClass) + ); + }); +} + +function placeMark(cell, currentClass) { + lastSelectedCell = cell; + undoBtn.disabled = false; + cell.classList.add(currentClass); +} + +function swap() { + circleTurn = !circleTurn; +} + +function checkWin(currentClass) { + return combo.some((combination) => { + return combination.every((index) => { + return cellElements[index].classList.contains(currentClass); + }); + }); +} + +function setBoardHoverClass() { + board.classList.remove(xClass); + board.classList.remove(circClass); + if (circleTurn) { + board.classList.add(circClass); + } else { + board.classList.add(xClass); + } +} \ No newline at end of file diff --git a/TicTacToeGame/Abhii-07/README.md b/TicTacToeGame/Abhii-07/README.md new file mode 100644 index 000000000..ff3dab009 --- /dev/null +++ b/TicTacToeGame/Abhii-07/README.md @@ -0,0 +1,10 @@ + +# Tic - Tac - Toe + +A simple Tic-Tac-Toe web app made with HTML5, CSS3 and JavaScript. + + +## Demo + +https://relaxed-gingersnap-ff29ef.netlify.app + diff --git a/TicTacToeGame/Abhii-07/TicTac.png b/TicTacToeGame/Abhii-07/TicTac.png new file mode 100644 index 000000000..0d4c44de4 Binary files /dev/null and b/TicTacToeGame/Abhii-07/TicTac.png differ