.jpg "Tic-Tac-Toe game using html css javascript") |
| Tic-Tac-Toe game using html css javascript |
In this article, we given a Tic-Tac-Toe game using html css javascript with source code as a project. Tic-Tac-Toe game is the unique project which is created for just practice of html, css and javascript. It's a popular game which is played by two persons. They have to choose the marks and fill them on the box. When the three marks of one person are joined in one horizontal, vertical or diagonal row then he becomes the winner of the game. In this project, we given a same structure as tic-tac-toe game to play the game using the html, css and javascript.
So, Must try this project for practice in your vs code to check how it works. We have given a complete source code of Tic-Tac-Toe game using html css javascript. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Tic-Tac-Toe game.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Add next file name as - script.js and copy the javascript code as given.
6) Then run the code or check the preview with code preview extension in vs code.
Tic-Tac-Toe game using html css javascript source code
Here we given a html, css and js source code of Tic-Tac-Toe game as given -
HTML
In HTML, we created a structure by adding the container for tic-tac-toe game. Linked files of css and javascript for styling and functionality. Added a small div tags to fill them at the time of playing game of tic-tac-toe. Also, Added a button to restart the game after completing the game for next. Copy the given html code and paste it into the index.html file.
<!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 Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Tic Tac Toe</h1>
<div id="board" class="board">
</div>
<div class="status" id="status">Player X's turn</div>
<button class="restart-btn" onclick="restartGame()">Restart Game</button>
</div>
<script src="script.js"></script>
</body>
</html>CSS
In CSS, we given a properties to design the Tic-tac-toe game container and boxes. Added a color and background color to the elements. Also, we added a media query to make a responsive design to the game of tic-tac-toe to use and play game on all screen. Copy the given css code and paste it into the style.css file.
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}
h1 {
font-size: 2em;
margin-bottom: 20px;
color: #333;
}
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
width: 100%;
max-width: 300px;
margin: 0 auto;
background-color: #444;
padding: 5px;
border-radius: 5px;
}
.cell {
display: flex;
justify-content: center;
align-items: center;
font-size: 2em;
color: #fff;
background-color: #666;
cursor: pointer;
transition: background-color 0.3s ease;
border-radius: 5px;
height: 60px;
}
.cell:hover {
background-color: #555;
}
.status {
font-size: 1.2em;
margin-top: 20px;
}
.restart-btn {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
font-size: 1em;
margin-top: 20px;
cursor: pointer;
border-radius: 5px;
transition: background-color 0.3s ease;
}
.restart-btn:hover {
background-color: #0056b3;
}
@media (max-width: 500px) {
.container {
padding: 10px;
}
.board {
padding: 2px;
}
.cell {
font-size: 1.5em;
height: 50px;
}
}Javascript
We given a functionality to the code for playing the tic-tac-toe game properly with javascript. In javascript, we used functions to give a statement for making the decisions. When users play and click on any box, it checks the if-else statements to make decision and show the output as per the statement. Copy the given javascript code and paste in into the script.js file.
let currentPlayer = 'X';
let board = ['', '', '', '', '', '', '', '', ''];
const winningCombinations = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
let gameActive = true;
function cellClicked(index) {
if (gameActive && board[index] === '') {
board[index] = currentPlayer;
document.getElementById(index).innerText = currentPlayer;
if (checkForWin()) {
document.getElementById('status').innerText = `Player ${currentPlayer} wins!`;
gameActive = false;
} else if (checkForDraw()) {
document.getElementById('status').innerText = `It's a draw!`;
gameActive = false;
} else {
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
document.getElementById('status').innerText = `Player ${currentPlayer}'s turn`;
}
}
}
function checkForWin() {
for (let combo of winningCombinations) {
if (board[combo[0]] !== '' && board[combo[0]] === board[combo[1]] && board[combo[1]] === board[combo[2]]) {
return true;
}
}
return false;
}
function checkForDraw() {
return board.every((cell) => cell !== '');
}
function restartGame() {
currentPlayer = 'X';
board = ['', '', '', '', '', '', '', '', ''];
gameActive = true;
document.getElementById('status').innerText = `Player ${currentPlayer}'s turn`;
for (let i = 0; i < 9; i++) {
document.getElementById(i).innerText = '';
}
}
const boardElement = document.getElementById('board');
for (let i = 0; i < 9; i++) {
const cell = document.createElement('div');
cell.classList.add('cell');
cell.id = i;
cell.addEventListener('click', () => cellClicked(i));
boardElement.appendChild(cell);
}Output
Check this output of Tic-Tac-Toe game -
Also see this -
Hope this helps you to know about Tic-Tac-Toe game using html css javascript. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects