commit 28dfac6b957864c90f19d74d300859b26c73290d Author: dbowerman Date: Sat Aug 1 12:05:23 2026 -0400 Upload files to "/" diff --git a/index.html b/index.html new file mode 100644 index 0000000..3d9744b --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ + + + + + + Tic Tac Toe Game + + + +

Tic Tac Toe

Player X's turn

+ +

+ + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..38f2760 --- /dev/null +++ b/script.js @@ -0,0 +1,76 @@ +const board = Array.from(document.querySelectorAll('.cell')); +const status = document.getElementById('status'); +const resetBtn = document.getElementById('resetBtn'); + +let currentPlayer = 'X'; +let gameActive = true; +let gameState = ['', '', '', '', '', '', '', '', '']; + +const winningConditions = [ + [0, 1, 2], [3, 4, 5], [6, 7, 8], // rows + [0, 3, 6], [1, 4, 7], [2, 5, 8], // columns + [0, 4, 8], [2, 4, 6] // diagonals +]; + +const winningMessage = () => `Player ${currentPlayer} wins!`; +const drawMessage = () => `Game ended in a draw!`; +const currentPlayerTurn = () => `Player ${currentPlayer}'s turn`; + +status.innerHTML = currentPlayerTurn(); + +function handleCellClick(e) { + const cell = e.target; + const cellIndex = parseInt(cell.getAttribute('data-index')); + + if (gameState[cellIndex] !== '' || !gameActive) { + return; + } + + gameState[cellIndex] = currentPlayer; + cell.innerHTML = currentPlayer; + cell.classList.add(currentPlayer.toLowerCase()); + + if (checkWin()) { + status.innerHTML = winningMessage(); + gameActive = false; + return; + } + + if (checkDraw()) { + status.innerHTML = drawMessage(); + gameActive = false; + return; + } + + currentPlayer = currentPlayer === 'X' ? 'O' : 'X'; + status.innerHTML = currentPlayerTurn(); +} + +function checkWin() { + for (let i = 0; i < winningConditions.length; i++) { + const [a, b, c] = winningConditions[i]; + if (gameState[a] && gameState[a] === gameState[b] && gameState[a] === gameState[c]) { + return true; + } + } + return false; +} + +function checkDraw() { + return !gameState.includes(''); +} + +function resetGame() { + currentPlayer = 'X'; + gameActive = true; + gameState = ['', '', '', '', '', '', '', '', '']; + status.innerHTML = currentPlayerTurn(); + + board.forEach(cell => { + cell.innerHTML = ''; + cell.classList.remove('x', 'o'); + }); +} + +board.forEach(cell => cell.addEventListener('click', handleCellClick)); +resetBtn.addEventListener('click', resetGame); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..b67b64c --- /dev/null +++ b/style.css @@ -0,0 +1,75 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f0f0f0; +} + +.container { + text-align: center; + background-color: white; + padding: 20px; + border-radius: 10px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +h1 { + margin-top: 0; +} + +#status { + font-size: 1.2em; + margin-bottom: 20px; + font-weight: bold; +} + +.board { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-gap: 5px; + margin-bottom: 20px; +} + +.cell { + width: 100px; + height: 100px; + background-color: #e0e0e0; + display: flex; + justify-content: center; + align-items: center; + font-size: 3em; + font-weight: bold; + cursor: pointer; + border-radius: 5px; + transition: background-color 0.3s; +} + +.cell:hover { + background-color: #d0d0d0; +} + +.cell.x { + color: #ff4444; +} + +.cell.o { + color: #4444ff; +} + +#resetBtn { + padding: 10px 20px; + font-size: 1em; + background-color: #4CAF50; + color: white; + border: none; + border-radius: 5px; + cursor: pointer; + transition: background-color 0.3s; +} + +#resetBtn:hover { + background-color: #45a049; +} \ No newline at end of file