first commit
This commit is contained in:
Executable
+46
@@ -0,0 +1,46 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user