diff --git a/Chatbox-Website/Tic/index.html b/Chatbox-Website/Tic/index.html new file mode 100644 index 0000000..5d62eab --- /dev/null +++ b/Chatbox-Website/Tic/index.html @@ -0,0 +1,27 @@ + + + + + + + Tic Tac Toe + +
+
+
+
+
+
+
+
+
+
+
+
+

Player Score: 0

+

AI Score: 0

+
+
+ + + diff --git a/Chatbox-Website/Tic/script.js b/Chatbox-Website/Tic/script.js new file mode 100644 index 0000000..a3af450 --- /dev/null +++ b/Chatbox-Website/Tic/script.js @@ -0,0 +1,95 @@ +const cells = document.querySelectorAll('.cell'); +let currentPlayer = 'X'; +let gameActive = true; +let playerScore = 0; +let aiScore = 0; + +function checkWinner() { + const winningCombos = [ + [0, 1, 2], [3, 4, 5], [6, 7, 8], + [0, 3, 6], [1, 4, 7], [2, 5, 8], + [0, 4, 8], [2, 4, 6] + ]; + + for (const combo of winningCombos) { + const [a, b, c] = combo; + if (cells[a].innerText && cells[a].innerText === cells[b].innerText && cells[a].innerText === cells[c].innerText) { + cells[a].classList.add('winner'); + cells[b].classList.add('winner'); + cells[c].classList.add('winner'); + gameActive = false; + return true; + } + } + return false; +} + +function checkTie() { + return Array.from(cells).every(cell => cell.innerText); +} + +function handleClick(cellIndex) { + if (!gameActive || cells[cellIndex].innerText) { + return; + } + + cells[cellIndex].innerText = currentPlayer; + cells[cellIndex].classList.add(currentPlayer); + + if (checkWinner()) { + if (currentPlayer === 'X') { + playerScore++; + } else { + aiScore++; + } + updateScore(); + alert(currentPlayer + ' wins!'); + setTimeout(resetGame, 1000); + return; + } + + if (checkTie()) { + alert("It's a tie!"); + setTimeout(resetGame, 1000); + return; + } + + if (currentPlayer === 'X') { + currentPlayer = 'O'; + makeAiMove(); + } else { + currentPlayer = 'X'; + } +} + +function updateScore() { + document.querySelector('.player-score').textContent = playerScore; + document.querySelector('.ai-score').textContent = aiScore; +} + +function makeAiMove() { + const emptyCells = Array.from(cells).filter(cell => !cell.innerText); + if (emptyCells.length > 0) { + const randomIndex = Math.floor(Math.random() * emptyCells.length); + const randomCell = emptyCells[randomIndex]; + setTimeout(() => handleClick(Array.from(cells).indexOf(randomCell)), 500); + } +} + +function resetGame() { + currentPlayer = 'X'; + gameActive = true; + + cells.forEach(cell => { + cell.innerText = ''; + cell.classList.remove('winner', 'X', 'O'); + }); + + updateScore(); + if (currentPlayer === 'O') { + makeAiMove(); + } +} + +updateScore(); +cells.forEach(cell => cell.addEventListener('click', () => handleClick(Array.from(cells).indexOf(cell)))); \ No newline at end of file diff --git a/Chatbox-Website/Tic/styles.css b/Chatbox-Website/Tic/styles.css new file mode 100644 index 0000000..8c3d03f --- /dev/null +++ b/Chatbox-Website/Tic/styles.css @@ -0,0 +1,34 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: black; +} + +.game-container { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-gap: 2px; + background-color: #333; +} + +.cell { + width: 100px; + height: 100px; + display: flex; + justify-content: center; + align-items: center; + font-size: 24px; + color: #fff; + background-color: #444; + cursor: pointer; + user-select: none; +} + +.scoreboard { + margin-top: 20px; + text-align: center; + font-size: 18px; +}