好的，我可以为您提供一个简单的
井字棋的
实现，代码如下：
HTML：
```html
<div class="tic-tac-toe">
<div class="row">
<div class="cell" id="cell-0"></div>
<div class="cell" id="cell-1"></div>
<div class="cell" id="cell-2"></div>
</div>
<div class="row">
<div class="cell" id="cell-3"></div>
<div class="cell" id="cell-4"></div>
<div class="cell" id="cell-5"></div>
</div>
<div class="row">
<div class="cell" id="cell-6"></div>
<div class="cell" id="cell-7"></div>
<div class="cell" id="cell-8"></div>
</div>
</div>
```
CSS：
```css
.tic-tac-toe {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 50px;
}
.row {
display: flex;
}
.cell {
width: 100px;
height: 100px;
border: 2px solid black;
font-size: 50px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
}
.cell:hover {
background-color: #eee;
}
```
JS：
```javascript
const cells = document.querySelectorAll('.cell');
let currentPlayer = 'X';
let gameEnded = false;
function checkWinner() {
const winningCombinations = [
[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 i = 0; i < winningCombinations.length; i++) {
const [a, b, c] = winningCombinations[i];
if (cells[a].textContent === cells[b].textContent &&
cells[b].textContent === cells[c].textContent &&
cells[a].textContent !== '') {
return cells[a].textContent;
}
}
return '';
}
function resetGame() {
cells.forEach(cell => {
cell.textContent = '';
});
currentPlayer = 'X';
gameEnded = false;
}
cells.forEach(cell => {
cell.addEventListener('click', () => {
if (gameEnded || cell.textContent !== '') {
return;
}
cell.textContent = currentPlayer;
const winner = checkWinner();
if (winner !== '') {
alert(`Winner: ${winner}`);
gameEnded = true;
return;
}
if (currentPlayer === 'X') {
currentPlayer = 'O';
} else {
currentPlayer = 'X';
}
});
});
document.querySelector('#reset-button').addEventListener('click', resetGame);
```
上述代码通过 HTML 和 CSS 创建了一个
井字棋的
游戏界面，并通过 JavaScript
实现了
游戏的逻辑。在点击格子时会切换当前玩家并检查是否有获胜者，当
游戏结束时可以通过点击“重置”按钮重新开始
游戏。
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
