nix
47 lines
1.3 KiB
HTML
Executable File
47 lines
1.3 KiB
HTML
Executable 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</title>
|
|
<style>
|
|
body { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100vh; font-family:sans-serif; }
|
|
table { border-collapse: collapse; }
|
|
td { width:80px; height:80px; text-align:center; vertical-align:middle; font-size:50px; border:2px solid black; cursor:pointer; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>Tic-Tac-Toe</h2>
|
|
<table id="board">
|
|
<tr><td></td><td></td><td></td></tr>
|
|
<tr><td></td><td></td><td></td></tr>
|
|
<tr><td></td><td></td><td></td></tr>
|
|
</table>
|
|
<button onclick="reset()">Reset</button>
|
|
<script>
|
|
let turn = 'X';
|
|
const cells = document.querySelectorAll('td');
|
|
|
|
cells.forEach(cell => cell.addEventListener('click', () => {
|
|
if(cell.textContent === '') {
|
|
cell.textContent = turn;
|
|
if(checkWin(turn)) alert(turn + ' wins!');
|
|
turn = turn === 'X' ? 'O' : 'X';
|
|
}
|
|
}));
|
|
|
|
function checkWin(p) {
|
|
const b = [...cells].map(c=>c.textContent);
|
|
const wins = [
|
|
[0,1,2],[3,4,5],[6,7,8],
|
|
[0,3,6],[1,4,7],[2,5,8],
|
|
[0,4,8],[2,4,6]
|
|
];
|
|
return wins.some(w => w.every(i => b[i]===p));
|
|
}
|
|
|
|
function reset() { cells.forEach(c=>c.textContent=''); turn='X'; }
|
|
</script>
|
|
</body>
|
|
</html>
|