PatrickOrg/ULTIMATE-JAVASCRIPT-PROJECT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add files via upload

Browse Source 
Tic Tac Toe game using HTML CSS and JavaScript
This commit is contained in:
Gavindu achintha
2025-02-22 10:46:47 +05:30
committed by GitHub
parent 29768874fd
commit 78f1253dc9
3 changed files with 217 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
Games/Tic Tac Toe/app.js Normal file
View File

@@ -0,0 +1,81 @@
const boardState = Array(9).fill(null); // Initialize board state with null values
const cells = document.querySelectorAll(".cell"); // Get all cell elements
let currentPlayer = "X"; // Start with player X
let message = document.getElementById("winner-message"); // Get the winner message element
let reset = document.getElementById("reset-button"); // Get the reset button element
// Define all possible winning combinations
const winningCombinations = [
[0, 1, 2], // Top row
[3, 4, 5], // Middle row
[6, 7, 8], // Bottom row
[0, 3, 6], // Left column
[1, 4, 7], // Middle column
[2, 5, 8], // Right column
[0, 4, 8], // Diagonal top-left to bottom-right
[2, 4, 6], // Diagonal top-right to bottom-left
];
// Add event listener to the reset button
reset.addEventListener("click", function () {
// Reset the board state
boardState.fill(null);
// Clear the text content of all cells
cells.forEach(function (cell) {
cell.textContent = "";
});
// Reset the current player to X
currentPlayer = "X";
// Clear the winner message
message.textContent = "";
// Re-enable pointer events for all cells
cells.forEach((cell) => (cell.style.pointerEvents = "auto"));
});
// Function to check if the current player has won
function checkWins(boardState, player) {
return winningCombinations.some((combination) => {
return combination.every((index) => boardState[index] === player);
});
}
// Add event listeners to all cells
cells.forEach(function (cell) {
cell.addEventListener("click", function () {
const cellId = parseInt(cell.id) - 1; // Get the cell index (0-8)
// Check if the cell is empty
if (!boardState[cellId]) {
// Update the board state and cell text
boardState[cellId] = currentPlayer;
cell.textContent = currentPlayer;
// Check if the current player has won
if (checkWins(boardState, currentPlayer)) {
message.textContent = `${currentPlayer} wins!`; // Display winner message
alert(`${currentPlayer} wins!`);
// Disable further moves after the game ends
cells.forEach((cell) => (cell.style.pointerEvents = "none"));
return;
}
// Check if the game is a draw
if (!boardState.includes(null)) {
message.textContent = "It's a draw!"; // Display draw message
alert("It's a draw!");
// Disable further moves after the game ends
cells.forEach((cell) => (cell.style.pointerEvents = "none"));
return;
}
// Switch to the other player
currentPlayer = currentPlayer === "X" ? "O" : "X";
}
});
});

30
Games/Tic Tac Toe/index.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tic Tac Toe</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="heading">
<p>Tic Tac Toe</p>
<p id="winner-message"></p>
</div>
<div class="main-box">
<div class="cell" id="1"><p></p></div>
<div class="cell" id="2"><p></p></div>
<div class="cell" id="3"><p></p></div>
<div class="cell" id="4"><p></p></div>
<div class="cell" id="5"><p></p></div>
<div class="cell" id="6"><p></p></div>
<div class="cell" id="7"><p></p></div>
<div class="cell" id="8"><p></p></div>
<div class="cell" id="9"><p></p></div>
</div>
<div class="reset-btn">
<button class="reset" id="reset-button">Reset</button>
</div>
</body>
<script src="app.js"></script>
</html>

106
Games/Tic Tac Toe/styles.css Normal file
View File

@@ -0,0 +1,106 @@
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;500&family=Roboto:wght@400;500&display=swap");
body {
font-family: "Kanit", sans-serif;
background-image: linear-gradient(
to right bottom,
#000b58,
#002960,
#05295f,
#161b59,
#240750
);
display: flex;
flex-direction: column;
font-size: 30px;
align-items: center;
justify-content: center;
height: 100vh;
margin: 0;
color: #ffffff;
}
.heading {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 0;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}
p {
font-size: 14px;
margin: 5px 0;
color: #ffffff;
}
.main-box {
display: grid;
justify-content: center;
align-items: center;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 10px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
border: 2px solid rgba(255, 255, 255, 0.2);
}
.cell {
display: flex;
justify-content: center;
align-items: center;
background-color: #a888b5;
color: #ffffff;
border: none;
height: 100%;
width: 100%;
border-radius: 10px;
font-size: 40px;
font-weight: 500;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;
box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.1);
}
.cell:hover {
background-color: #8174a0;
transform: scale(1.05);
box-shadow: 0px 8px 14px rgba(0, 0, 0, 0.15);
}
p {
font-size: 50px;
}
.reset-btn {
display: flex;
flex-direction: column;
align-items: center; /* Centers the button horizontally */
justify-content: center;
width: 100%; /* Ensures flexibility */
margin: 10px 0;
}
button.reset {
font-family: "Roboto", sans-serif;
padding: 10px 20px;
width: 100%; /* Makes button flexible */
max-width: 200px; /* Caps the maximum width */
border-radius: 15px;
font-size: 18px;
font-weight: 500;
text-align: center;
border: none;
color: #ffffff;
background-color: #8174a0;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s, box-shadow 0.3s;
}
button.reset:hover {
background-color: #a692d5;
box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
}