diff --git a/Games/Tic_Tac_Toe/index.html b/Games/Tic_Tac_Toe/index.html new file mode 100644 index 0000000..7691042 --- /dev/null +++ b/Games/Tic_Tac_Toe/index.html @@ -0,0 +1,28 @@ + + + + + + Tic Tac Toe + + + +
+

Tic Tac Toe

+
Player X's turn
+
+
+
+
+
+
+
+
+
+
+
+ +
+ + + \ No newline at end of file diff --git a/Games/Tic_Tac_Toe/script.js b/Games/Tic_Tac_Toe/script.js new file mode 100644 index 0000000..0c46e60 --- /dev/null +++ b/Games/Tic_Tac_Toe/script.js @@ -0,0 +1,82 @@ +document.addEventListener('DOMContentLoaded', () => { + const cells = document.querySelectorAll('.cell'); + const statusDisplay = document.querySelector('.status'); + const resetButton = document.querySelector('.reset-btn'); + + let gameActive = true; + let currentPlayer = 'X'; + let gameState = ['', '', '', '', '', '', '', '', '']; + + const winningConditions = [ + [0, 1, 2], + [3, 4, 5], + [6, 7, 8], + [0, 3, 6], + [1, 4, 7], + [2, 5, 8], + [0, 4, 8], + [2, 4, 6] + ]; + + function handleCellClick(e) { + const clickedCell = e.target; + const clickedCellIndex = parseInt(clickedCell.getAttribute('data-index')); + + if (gameState[clickedCellIndex] !== '' || !gameActive) { + return; + } + + gameState[clickedCellIndex] = currentPlayer; + clickedCell.textContent = currentPlayer; + clickedCell.classList.add(currentPlayer.toLowerCase()); + + checkResult(); + } + + function checkResult() { + let roundWon = false; + + for (let i = 0; i < winningConditions.length; i++) { + const [a, b, c] = winningConditions[i]; + + if (gameState[a] === '' || gameState[b] === '' || gameState[c] === '') { + continue; + } + + if (gameState[a] === gameState[b] && gameState[b] === gameState[c]) { + roundWon = true; + break; + } + } + + if (roundWon) { + statusDisplay.textContent = `Player ${currentPlayer} wins, Congrats!`; + gameActive = false; + return; + } + + if (!gameState.includes('')) { + statusDisplay.textContent = "Game ended in a draw!"; + gameActive = false; + return; + } + + currentPlayer = currentPlayer === 'X' ? 'O' : 'X'; + statusDisplay.textContent = `Player ${currentPlayer}'s turn`; + } + + function resetGame() { + gameActive = true; + currentPlayer = 'X'; + gameState = ['', '', '', '', '', '', '', '', '']; + statusDisplay.textContent = `Player ${currentPlayer}'s turn`; + + cells.forEach(cell => { + cell.textContent = ''; + cell.classList.remove('x', 'o'); + }); + } + + cells.forEach(cell => cell.addEventListener('click', handleCellClick)); + resetButton.addEventListener('click', resetGame); +}); \ No newline at end of file diff --git a/Games/Tic_Tac_Toe/style.css b/Games/Tic_Tac_Toe/style.css new file mode 100644 index 0000000..3b8201b --- /dev/null +++ b/Games/Tic_Tac_Toe/style.css @@ -0,0 +1,137 @@ + body { + font-family: 'Inter', sans-serif; + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; + margin: 0; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + overflow: hidden; +} + +.container { + text-align: center; + background-color: white; + padding: 40px; + border-radius: 20px; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15), 0 5px 15px rgba(0, 0, 0, 0.08); + transition: transform 0.3s ease-in-out; +} + +.container:hover { + transform: translateY(-5px); +} + +h1 { + color: #315f8d; + text-shadow: 2px 2px 4px rgba(0,0,0,0.3); + margin-bottom: 25px; + font-size: 2.5rem; + letter-spacing: 1px; +} + +.status { + font-size: 1.3rem; + margin-bottom: 25px; + color: #765fee; + text-shadow: 2px 2px 4px rgba(0,0,0,0.3); + font-weight: 600; +} + +.game-board { + display: grid; + grid-template-columns: repeat(3, 110px); + grid-template-rows: repeat(3, 110px); + gap: 8px; + margin-bottom: 30px; + justify-content: center; +} + +.cell { + width: 110px; + height: 110px; + background-color: #ecf0f1; + display: flex; + justify-content: center; + align-items: center; + font-size: 3rem; + font-weight: bold; + cursor: pointer; + border-radius: 10px; + transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease; + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); +} + +.cell:hover { + background-color: #dce0e1; + transform: scale(1.03); + box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); +} + +.cell.x { + color: #e74c3c; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); +} + +.cell.o { + color: #27ae60; + text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1); +} + +.reset-btn { + padding: 12px 25px; + font-size: 1.1rem; + background: linear-gradient(45deg, #3498db, #2980b9); + color: white; + border: none; + border-radius: 8px; + cursor: pointer; + box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); + transition: all 0.3s ease; + font-weight: 600; + letter-spacing: 0.5px; +} + +.reset-btn:hover { + background: linear-gradient(45deg, #2980b9, #3498db); + transform: translateY(-3px); + box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); +} + +.reset-btn:active { + transform: translateY(0); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15); +} + + +@media (max-width: 500px) { + .container { + padding: 20px; + margin: 15px; + } + + h1 { + font-size: 2rem; + } + + .status { + font-size: 1.1rem; + } + + .game-board { + grid-template-columns: repeat(3, 90px); + grid-template-rows: repeat(3, 90px); + gap: 6px; + } + + .cell { + width: 90px; + height: 90px; + font-size: 2.5rem; + } + + .reset-btn { + padding: 10px 20px; + font-size: 1rem; + } +} \ No newline at end of file diff --git a/assets/html_files/games.html b/assets/html_files/games.html index 10e60e7..3704286 100644 --- a/assets/html_files/games.html +++ b/assets/html_files/games.html @@ -135,6 +135,12 @@

CSS Math Duel

Play Now View Code +
+

Tic Tac Toe

+

A head-to-head strategy showdown where X battles O for grid domination

+ Play Now + View Code +