用html+js实现回合制游戏复杂点的
时间: 2024-04-12 18:33:15 浏览: 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;
}
.log {
margin-top: 20px;
width: 400px;
height: 200px;
border: 1px solid black;
overflow-y: scroll;
padding: 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 class="log" id="log"></div>
</div>
<script>
const player1 = document.getElementById('player1');
const player2 = document.getElementById('player2');
const button = document.querySelector('.btn');
const log = document.getElementById('log');
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;
}
log.innerHTML += `回合 ${turnCount}: 玩家 ${currentPlayer} 的回合\n`;
log.scrollTop = log.scrollHeight;
}
</script>
</body>
</html>
```
这个示例中,有两个玩家(玩家1和玩家2),每次点击 "下一回合" 按钮,当前玩家会切换,并且按钮会在每个回合之间进行启用和禁用。此外,还增加了一个日志框,记录每个回合的信息。
希望这个示例对您有帮助!如果您有其他问题,请随时提问。