Skip to content

Commit b8b35d0

Browse files
tajulafreentajulafreen
authored
Merge pull request #51 from tajulafreen/Tic_Tac_Toe
50Projects-HTML-CSS-JavaScript : Tic tac toe
2 parents 818dff2 + 803a715 commit b8b35d0

File tree

4 files changed

+164
-0
lines changed

4 files changed

+164
-0
lines changed

‎README.md

+11
Original file line numberDiff line numberDiff line change
@@ -540,6 +540,17 @@ In order to run this project you need:
540540
</details>
541541
</li>
542542

543+
<li>
544+
<details>
545+
<summary>Tic Tac Toe App</summary>
546+
<p>This is a simple Tic Tac Toe game built using HTML, CSS, and JavaScript. The game allows two players to alternate turns and try to win by getting three of their symbols (X or O) in a row, either horizontally, vertically, or diagonally. The game will automatically check for a winner or draw after each move, and players can restart the game at any time.</p>
547+
<ul>
548+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/TicTacToe/">Live Demo</a></li>
549+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/TicTacToe">Source</a></li>
550+
</ul>
551+
</details>
552+
</li>
553+
543554
</ol>
544555

545556
<p align="right">(<a href="#readme-top">back to top</a>)</p>

‎Source-Code/TicTacToe/index.html

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Tic Tac Toe</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h1>Tic Tac Toe</h1>
12+
<div class="board" id="board">
13+
<!-- Game Grid will be generated by JavaScript -->
14+
</div>
15+
<button id="restartBtn">Restart</button>
16+
<div id="message"></div>
17+
</div>
18+
<script src="script.js"></script>
19+
</body>
20+
</html>

‎Source-Code/TicTacToe/script.js

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/* eslint-disable no-use-before-define */
2+
// Get elements
3+
const board = document.getElementById('board');
4+
const restartBtn = document.getElementById('restartBtn');
5+
const message = document.getElementById('message');
6+
7+
let currentPlayer = 'X';
8+
let gameBoard = Array(9).fill(null); // 3x3 grid, initialized to null (empty)
9+
10+
const winPatterns = [
11+
[0, 1, 2],
12+
[3, 4, 5],
13+
[6, 7, 8], // Rows
14+
[0, 3, 6],
15+
[1, 4, 7],
16+
[2, 5, 8], // Columns
17+
[0, 4, 8],
18+
[2, 4, 6], // Diagonals
19+
];
20+
21+
// Check for a winner or draw
22+
const checkWinner = () => {
23+
const winner = winPatterns.some(([a, b, c]) => {
24+
if (
25+
gameBoard[a]
26+
&& gameBoard[a] === gameBoard[b]
27+
&& gameBoard[a] === gameBoard[c]
28+
) {
29+
message.textContent = `${gameBoard[a]} wins!`;
30+
board.style.pointerEvents = 'none'; // Disable clicks after game ends
31+
return true;
32+
}
33+
return false;
34+
});
35+
36+
if (!winner && !gameBoard.includes(null)) {
37+
message.textContent = "It's a draw!";
38+
}
39+
};
40+
41+
// Create the board cells
42+
const createBoard = () => {
43+
board.innerHTML = ''; // Clear any existing cells
44+
gameBoard.forEach((cell, index) => {
45+
const cellElement = document.createElement('div');
46+
cellElement.classList.add('cell');
47+
cellElement.textContent = cell;
48+
cellElement.addEventListener('click', () => handleCellClick(index));
49+
board.appendChild(cellElement);
50+
});
51+
};
52+
53+
// Handle cell click
54+
const handleCellClick = (index) => {
55+
if (gameBoard[index] !== null) return; // If cell is already filled, return
56+
gameBoard[index] = currentPlayer;
57+
currentPlayer = currentPlayer === 'X' ? 'O' : 'X'; // Switch player
58+
createBoard();
59+
checkWinner();
60+
};
61+
62+
// Restart the game
63+
restartBtn.addEventListener('click', () => {
64+
gameBoard = Array(9).fill(null); // Reset the game board
65+
currentPlayer = 'X'; // Reset to Player X
66+
createBoard();
67+
message.textContent = ''; // Clear the message
68+
board.style.pointerEvents = 'auto'; // Enable clicks again
69+
});
70+
71+
// Initialize the game
72+
createBoard();

‎Source-Code/TicTacToe/style.css

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
font-family: Arial, sans-serif;
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
min-height: 100vh;
13+
background-color: #f4f4f9;
14+
}
15+
16+
.container {
17+
text-align: center;
18+
}
19+
20+
h1 {
21+
margin-bottom: 20px;
22+
}
23+
24+
.board {
25+
display: grid;
26+
grid-template-columns: repeat(3, 100px);
27+
grid-template-rows: repeat(3, 100px);
28+
gap: 5px;
29+
justify-content: center;
30+
margin-bottom: 20px;
31+
}
32+
33+
.cell {
34+
width: 100px;
35+
height: 100px;
36+
display: flex;
37+
align-items: center;
38+
justify-content: center;
39+
font-size: 32px;
40+
background-color: #fff;
41+
border: 2px solid #333;
42+
cursor: pointer;
43+
transition: background-color 0.2s ease;
44+
}
45+
46+
.cell:hover {
47+
background-color: #f0f0f0;
48+
}
49+
50+
button {
51+
padding: 10px 20px;
52+
font-size: 16px;
53+
cursor: pointer;
54+
margin-top: 10px;
55+
}
56+
57+
#message {
58+
margin-top: 20px;
59+
font-size: 18px;
60+
font-weight: bold;
61+
}

0 commit comments

Comments
 (0)