From afd4cf601d4105f5a46ffb6763e1d91ae354567d Mon Sep 17 00:00:00 2001 From: RohanSingh0208 Date: Sun, 13 Oct 2024 15:59:01 +0530 Subject: [PATCH 1/2] Create index.html --- tic-tac-toe/index.html | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 tic-tac-toe/index.html diff --git a/tic-tac-toe/index.html b/tic-tac-toe/index.html new file mode 100644 index 0000000..e5df095 --- /dev/null +++ b/tic-tac-toe/index.html @@ -0,0 +1,28 @@ + + + + + + Tic Tac Toe + + + +
+

Tic Tac Toe

+
+
+
+
+
+
+
+
+
+
+
+ +

+
+ + + From 03f749abff37607ac05d0d8702d9c120162c5f42 Mon Sep 17 00:00:00 2001 From: RohanSingh0208 Date: Sun, 13 Oct 2024 16:00:33 +0530 Subject: [PATCH 2/2] Add files via upload --- tic-tac-toe/script.js | 89 ++++++++++++++++++++++++++++++++++++++++++ tic-tac-toe/styles.css | 56 ++++++++++++++++++++++++++ 2 files changed, 145 insertions(+) create mode 100644 tic-tac-toe/script.js create mode 100644 tic-tac-toe/styles.css diff --git a/tic-tac-toe/script.js b/tic-tac-toe/script.js new file mode 100644 index 0000000..bca580c --- /dev/null +++ b/tic-tac-toe/script.js @@ -0,0 +1,89 @@ +const board = document.getElementById('board'); +const cells = document.querySelectorAll('.cell'); +const statusDisplay = document.getElementById('status'); +const resetButton = document.getElementById('reset'); + +let currentPlayer = 'X'; +let gameActive = true; +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(event) { + const clickedCell = event.target; + const clickedCellIndex = parseInt(clickedCell.getAttribute('data-index')); + + if (gameState[clickedCellIndex] !== '' || !gameActive) { + return; + } + + gameState[clickedCellIndex] = currentPlayer; + clickedCell.classList.add(currentPlayer.toLowerCase()); + clickedCell.innerHTML = currentPlayer; + checkResult(); +} + +function checkResult() { + let roundWon = false; + for (const condition of winningConditions) { + const [a, b, c] = condition; + if (gameState[a] === '' || gameState[b] === '' || gameState[c] === '') { + continue; + } + if (gameState[a] === gameState[b] && gameState[a] === gameState[c]) { + roundWon = true; + break; + } + } + + if (roundWon) { + statusDisplay.innerHTML = `Player ${currentPlayer} has won!`; + gameActive = false; + return; + } + + if (!gameState.includes('')) { + statusDisplay.innerHTML = 'It\'s a draw!'; + gameActive = false; + return; + } + + currentPlayer = currentPlayer === 'X' ? 'O' : 'X'; + statusDisplay.innerHTML = `It's ${currentPlayer}'s turn.`; +} + +function handleCellHover(event) { + const clickedCell = event.target; + if (clickedCell.classList.contains('x') || clickedCell.classList.contains('o')) { + return; + } + clickedCell.style.cursor = 'pointer'; +} + +function resetGame() { + gameActive = true; + currentPlayer = 'X'; + gameState = ['', '', '', '', '', '', '', '', '']; + statusDisplay.innerHTML = `It's ${currentPlayer}'s turn.`; + cells.forEach(cell => { + cell.classList.remove('x', 'o'); + cell.innerHTML = ''; + }); +} + +cells.forEach(cell => { + cell.addEventListener('click', handleCellClick); + cell.addEventListener('mouseover', handleCellHover); +}); + +resetButton.addEventListener('click', resetGame); +statusDisplay.innerHTML = `It's ${currentPlayer}'s turn.`; diff --git a/tic-tac-toe/styles.css b/tic-tac-toe/styles.css new file mode 100644 index 0000000..13fb29c --- /dev/null +++ b/tic-tac-toe/styles.css @@ -0,0 +1,56 @@ +body { + font-family: Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f4f4f4; + margin: 0; +} + +.container { + text-align: center; +} + +.board { + display: grid; + grid-template-columns: repeat(3, 100px); + grid-template-rows: repeat(3, 100px); + gap: 5px; + margin: 20px auto; +} + +.cell { + width: 100px; + height: 100px; + background-color: #fff; + display: flex; + align-items: center; + justify-content: center; + font-size: 36px; + cursor: pointer; + border: 2px solid #ccc; +} + +.cell:hover { + background-color: #f0f0f0; +} + +.cell.x { + color: #ff5722; +} + +.cell.o { + color: #2196f3; +} + +button { + padding: 10px 20px; + font-size: 16px; + cursor: pointer; +} + +#status { + font-size: 20px; + margin-top: 20px; +}