用JS写一个井字棋游戏
时间: 2023-07-01 18:15:07 浏览: 63
好的,以下是一个简单的井字棋游戏的实现,使用了HTML、CSS和JavaScript:
HTML部分:
``` html
<div id="board">
<div class="square" id="0"></div>
<div class="square" id="1"></div>
<div class="square" id="2"></div>
<div class="square" id="3"></div>
<div class="square" id="4"></div>
<div class="square" id="5"></div>
<div class="square" id="6"></div>
<div class="square" id="7"></div>
<div class="square" id="8"></div>
</div>
<button id="reset">Reset</button>
```
CSS部分:
``` css
#board {
display: flex;
flex-wrap: wrap;
width: 300px;
height: 300px;
margin: 20px auto;
border: 2px solid black;
}
.square {
width: 100px;
height: 100px;
border: 1px solid black;
font-size: 5rem;
text-align: center;
line-height: 100px;
cursor: pointer;
}
.square:hover {
background-color: lightgray;
}
#reset {
display: block;
margin: 20px auto;
padding: 10px 20px;
font-size: 1.5rem;
cursor: pointer;
}
```
JavaScript部分:
``` javascript
const squares = document.querySelectorAll('.square');
const resetButton = document.querySelector('#reset');
let currentPlayer = 'X';
squares.forEach(square => {
square.addEventListener('click', () => {
if (square.innerHTML === '') {
square.innerHTML = currentPlayer;
if (checkForWin()) {
alert(`${currentPlayer} wins!`);
resetGame();
} else if (checkForTie()) {
alert(`It's a tie!`);
resetGame();
} else {
currentPlayer = currentPlayer === 'X' ? 'O' : 'X';
}
}
});
});
resetButton.addEventListener('click', resetGame);
function checkForWin() {
const lines = [
[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 < lines.length; i++) {
const [a, b, c] = lines[i];
if (squares[a].innerHTML !== '' && squares[a].innerHTML === squares[b].innerHTML && squares[b].innerHTML === squares[c].innerHTML) {
return true;
}
}
return false;
}
function checkForTie() {
for (let i = 0; i < squares.length; i++) {
if (squares[i].innerHTML === '') {
return false;
}
}
return true;
}
function resetGame() {
squares.forEach(square => {
square.innerHTML = '';
});
currentPlayer = 'X';
}
```
这个实现中,将棋盘分成了9个小格子,每个小格子都可以被点击,每次点击后会将当前玩家的标记(X或O)显示在点击的格子上,然后判断是否出现了胜利或平局的情况,如果是,则弹出相应的提示并重置游戏。至于判断胜利和平局的方法,使用了一个叫做“lines”的数组,其中存储了所有可能的胜利情况的小格子的索引,然后遍历这个数组,检查每种情况是否出现了相同的标记。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)