Background game
<!DOCTYPE html>
<html lang="ne">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>back round game</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f0f0f0;
margin: 0;
}
.game-container {
text-align: center;
}
h1 {
margin-bottom: 20px;
}
.board {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
justify-content: center;
margin-bottom: 20px;
}
.cell {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
border: 1px solid #ccc;
font-size: 2rem;
cursor: pointer;
}
.cell.taken {
pointer-events: none;
}
.cell.x {
color: black;
}
.cell.o {
color: white;
}
.status {
margin-bottom: 20px;
font-size: 1.2rem;
}
.reset-btn {
padding: 10px 20px;
font-size: 1rem;
cursor: pointer;
}
</style>
</head>
<body>
<div class="game-container">
<h1>back round game</h1>
<div class="status" id="status">खेल सुरु गर्नको लागि पहिलो खेलाडीको टर्न</div>
<div class="board">
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
<div class="cell" data-cell></div>
</div>
<button class="reset-btn" id="resetBtn">पुनः सुरु गर्नुहोस्</button>
</div>
<script>
const cells = document.querySelectorAll('[data-cell]');
const statusText = document.getElementById('status');
const resetBtn = document.getElementById('resetBtn');
const X_CLASS = 'x';
const O_CLASS = 'o';
let turn = X_CLASS;
const winPatterns = [
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6]
];
const checkWin = (currentClass) => {
return winPatterns.some(pattern => {
return pattern.every(index => {
return cells[index].classList.contains(currentClass);
});
});
};
const endGame = (draw) => {
if (draw) {
statusText.innerText = 'समान्य खेल!';
} else {
statusText.innerText = `${turn === X_CLASS ? 'X' : 'O'} को जित!`;
}
cells.forEach(cell => {
cell.removeEventListener('click', handleClick);
});
};
const handleClick = (e) => {
const cell = e.target;
cell.classList.add(turn);
cell.classList.add('taken');
// पृष्ठभूमि रंग परिवर्तन
if (turn === X_CLASS) {
cell.style.backgroundColor = 'yellow';
} else {
cell.style.backgroundColor = 'red';
}
if (checkWin(turn)) {
endGame(false);
} else if ([...cells].every(cell => cell.classList.contains(X_CLASS) || cell.classList.contains(O_CLASS))) {
endGame(true);
} else {
turn = turn === X_CLASS ? O_CLASS : X_CLASS;
statusText.innerText = `अर्को खेलाडी (${turn === X_CLASS ? 'X' : 'O'}) को टर्न`;
}
};
const startGame = () => {
cells.forEach(cell => {
cell.classList.remove(X_CLASS, O_CLASS, 'taken');
cell.style.backgroundColor = ''; // पृष्ठभूमि रंग रिसेट
cell.addEventListener('click', handleClick, { once: true });
});
statusText.innerText = `खेल सुरु गर्नको लागि पहिलो खेलाडीको टर्न`;
turn = X_CLASS;
};
resetBtn.addEventListener('click', startGame);
startGame();
</script>