Tic Tac Toe Game
Tic Tac Toe, a classic game that has stood the test of time, is not only fun to play but also a great project for learning web development. In this tutorial, we will walk through the process of creating a stylish and interactive Tic Tac Toe game using HTML, CSS, and JavaScript.
Author
- TechieBundle
- December 15, 2023
Live Demo
Setting Up the HTML Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div id="container">
<div id="playerSelect">
<label for="player">Select Player:</label>
<select id="player">
<option value="X">X</option>
<option value="O">O</option>
</select>
</div>
<div id="board"></div>
<button id="restartBtn">Restart Game</button>
</div>
<!-- Outcome Modal -->
<div id="outcomeModal">
<div class="modal-content" id="modalContent">
<p id="outcomeMessage"></p>
<button class="close-btn" onclick="closeModal()">Close</button>
</div>
</div>
</body>
</html>
This simple HTML structure includes a container for the game board and a modal for displaying the game outcome. The JavaScript code will be added at the end to handle the game logic.
Styling with CSS
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
}
#container {
text-align: center;
}
#board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-gap: 5px;
margin-top: 20px;
}
.cell {
width: 100px;
height: 100px;
font-size: 2em;
text-align: center;
line-height: 100px;
cursor: pointer;
border: 1px solid #ccc;
background-color: #fff;
color: #333;
}
.cell:hover {
background-color: #e0e0e0;
}
#playerSelect {
margin-top: 20px;
font-size: 1.2em;
}
#restartBtn {
margin-top: 20px;
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 5px;
}
#restartBtn:hover {
background-color: #45a049;
}
/* Stylish Modal */
#outcomeModal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.modal-content {
background-color: #fff;
padding: 20px;
border-radius: 5px;
text-align: center;
}
.close-btn {
margin-top: 20px;
padding: 10px 20px;
font-size: 1em;
cursor: pointer;
background-color: #4caf50;
color: #fff;
border: none;
border-radius: 5px;
}
.close-btn:hover {
background-color: #45a049;
}
The CSS styles define the look and feel of the game, including the game board, cells, player selection, restart button, and a stylish modal for displaying the game outcome.
Handling the Game Logic with JavaScript
const board = document.getElementById('board');
const playerSelect = document.getElementById('player');
const restartBtn = document.getElementById('restartBtn');
const outcomeModal = document.getElementById('outcomeModal');
const modalContent = document.getElementById('modalContent');
const outcomeMessage = document.getElementById('outcomeMessage');
let currentPlayer = playerSelect.value;
let gameBoard = ['', '', '', '', '', '', '', '', ''];
let gameActive = true;
function checkWinner() {
const winPatterns = [
[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
];
for (const pattern of winPatterns) {
const [a, b, c] = pattern;
if (gameBoard[a] && gameBoard[a] === gameBoard[b] && gameBoard[a] === gameBoard[c]) {
return gameBoard[a];
}
}
return null;
}
function checkTie() {
return !gameBoard.includes('');
}
function openModal(message) {
outcomeMessage.textContent = message;
outcomeModal.style.display = 'flex';
}
function closeModal() {
outcomeModal.style.display = 'none';
restartGame();
}
function handleClick(index) {
if (!gameActive || gameBoard[index] !== '') {
return;
}
gameBoard[index] = currentPlayer;
renderBoard();
const winner = checkWinner();
if (winner) {
openModal(`Player ${winner} wins!`);
gameActive = false;
} else if (checkTie()) {
openModal("It's a tie!");
gameActive = false;
} else {
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
}
}
function restartGame() {
gameBoard = ['', '', '', '', '', '', '', '', ''];
gameActive = true;
currentPlayer = playerSelect.value;
renderBoard();
}
function renderBoard() {
board.innerHTML = '';
gameBoard.forEach((value, index) => {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.textContent = value;
cell.addEventListener('click', () => handleClick(index));
board.appendChild(cell);
});
}
renderBoard();
playerSelect.addEventListener('change', () => {
currentPlayer = playerSelect.value;
restartGame();
});
restartBtn.addEventListener('click', restartGame);
The JavaScript code includes functions for checking the winner and tie, handling cell clicks, restarting the game, and rendering the game board. Event listeners are set up for player selection changes and the restart button.
Conclusion
By combining HTML, CSS, and JavaScript, we’ve created a stylish and interactive Tic Tac Toe game. This project is not only a great introduction to web development but also serves as a foundation for expanding and enhancing your coding skills. Feel free to customize the styles and add more features to make the game even more engaging! Additionally, if you’re interested in exploring another fascinating project, consider Creating an Attractive Analog Clock with HTML, CSS, and JavaScript. This hands-on experience will further deepen your understanding of front-end development and provide you with valuable insights into crafting visually appealing user interfaces.
Happy coding!
