Play Tic Tac Toe Online - Free HTML Game
<!DOCTYPE html>
<html>
<head>
<title>Tic-Tac-Toe</title>
<style>
body {
font-family: sans-serif;
}
.TTT {
width: 300px;
margin: 0 auto;
border: 3px solid #000;
}
.TTT td {
text-align: center;
font-size: 60px;
padding: 0;
}
.grid {
border-style: outset;
}
.X {
color: #00f;
}
.O {
color: #f00;
}
</style>
</head>
<body>
<h1>Tic Tac Toe</h1>
<div class='TTT'>
<table>
<tr>
<td class='grid' id='1'> </td>
<td class='grid' id='2'> </td>
<td class='grid' id='3'> </td>
</tr>
<tr>
<td class='grid' id='4'> </td>
<td class='grid' id='5'> </td>
<td class='grid' id='6'> </td>
</tr>
<tr>
<td class='grid' id='7'> </td>
<td class='grid' id='8'> </td>
<td class='grid' id='9'> </td>
</tr>
</table>
</div>
<script>
let turn = 'X';
const grids = document.querySelectorAll('.grid');
grids.forEach(grid => {
grid.addEventListener('click', e => {
if (e.target.innerHTML == '') {
e.target.innerHTML = turn;
if (turn == 'X') {
turn = 'O';
} else {
turn = 'X';
}
}
});
});
</script>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/losp 著作权归作者所有。请勿转载和采集!