how to create game using html, css and javascript || html, css and javascript से Tic tac toe game कैसे बनाये
how to create game using html, css and javascript || html, css and javascript से Tic tac toe game कैसे बनाये
HTML CODE
<body>
<div class="container">
<h1>Tic Tac Toe</h1>
<div class="board">
<div class="cell" id="0"></div>
<div class="cell" id="1"></div>
<div class="cell" id="2"></div>
<div class="cell" id="3"></div>
<div class="cell" id="4"></div>
<div class="cell" id="5"></div>
<div class="cell" id="6"></div>
<div class="cell" id="7"></div>
<div class="cell" id="8"></div>
</div>
<div id="message"></div>
<button id="reset">New Game</button>
</div>
CSS CODE
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background: linear-gradient(45deg, #ff9a9e, #fad0c4, #fad0c4, #a18cd1, #fbc2eb);
background-size: 400% 400%;
animation: gradientBG 10s ease infinite;
}
@keyframes gradientBG {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.container {
margin: 0 auto;
max-width: 400px;
padding: 20px;
}
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 5px;
margin-bottom: 20px;
}
.cell {
background-color: #eee;
border: 1px solid #ccc;
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
}
#message {
margin-bottom: 20px;
font-size: 18px;
}
#reset {
background-color: #4caf50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-top: 10px;
cursor: pointer;
}
#reset:hover {
background-color: #45a049;
}
#result-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 9999;
}
#result-message {
color: white;
font-size: 24px;
margin-top: 30%;
}
#result-buttons {
margin-top: 20px;
}
.result-button {
background-color: #4caf50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin-right: 10px;
cursor: pointer;
}
.result-button:hover {
background-color: #45a049;
}
</style>
Javascript CODE
<script>
document.addEventListener('DOMContentLoaded', () => {
const cells = document.querySelectorAll('.cell');
const message = document.getElementById('message');
const resetButton = document.getElementById('reset');
let currentPlayer = 'X';
let board = ['', '', '', '', '', '', '', '', ''];
let gameEnded = false;
const checkWinner = () => {
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]
];
for (let condition of winningConditions) {
const [a, b, c] = condition;
if (board[a] && board[a] === board[b] && board[a] === board[c]) {
return board[a];
}
}
if (!board.includes('')) {
return 'draw';
}
return null;
};
const updateMessage = () => {
const winner = checkWinner();
if (winner) {
if (winner === 'draw') {
message.textContent = "It's a draw!";
} else {
message.textContent = `${winner} wins!`;
}
gameEnded = true;
} else {
message.textContent = `Player ${currentPlayer}'s turn`;
}
};
const handleClick = (index) => {
if (!gameEnded && board[index] === '') {
board[index] = currentPlayer;
cells[index].textContent = currentPlayer;
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
updateMessage();
}
};
const resetGame = () => {
board = ['', '', '', '', '', '', '', '', ''];
cells.forEach(cell => cell.textContent = '');
gameEnded = false;
currentPlayer = 'X';
updateMessage();
};
cells.forEach((cell, index) => {
cell.addEventListener('click', () => handleClick(index));
});
resetButton.addEventListener('click', resetGame);
updateMessage();
});
</script>
Comments
Post a Comment