用html+js实现回合制游戏
时间: 2024-04-12 15:33:16 浏览: 20
当然!以下是一个使用 HTML 和 JavaScript 实现的简单回合制游戏的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>回合制游戏</title>
<style>
.game-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
.player {
font-size: 24px;
margin-bottom: 10px;
}
.btn {
padding: 10px 20px;
font-size: 18px;
margin-top: 10px;
}
</style>
</head>
<body>
<div class="game-container">
<h1>回合制游戏</h1>
<div class="player" id="player1">玩家1</div>
<div class="player" id="player2">玩家2</div>
<button class="btn" onclick="nextTurn()">下一回合</button>
</div>
<script>
const player1 = document.getElementById('player1');
const player2 = document.getElementById('player2');
const button = document.querySelector('.btn');
let currentPlayer = 1;
let turnCount = 0;
function nextTurn() {
turnCount++;
if (currentPlayer === 1) {
currentPlayer = 2;
player1.style.color = 'black';
player2.style.color = 'red';
} else {
currentPlayer = 1;
player1.style.color = 'red';
player2.style.color = 'black';
}
if (turnCount % 2 === 0) {
button.disabled = true;
} else {
button.disabled = false;
}
}
</script>
</body>
</html>
```
这个示例中,有两个玩家(玩家1和玩家2),每次点击 "下一回合" 按钮,当前玩家会切换,并且按钮会在每个回合之间进行启用和禁用。
希望这个示例对您有帮助!如果您有其他问题,请随时提问。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)
![](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)