用html+jss完成pk小游戏
时间: 2024-04-12 20:33:20 浏览: 13
当然!以下是一个使用 HTML 和 JavaScript 实现的 PK 小游戏的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>PK 小游戏</title>
<style>
.player {
width: 200px;
height: 200px;
background-color: #eee;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin: 20px;
}
.btn {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="player" id="player1">
<h2>玩家1</h2>
<p>得分:<span id="score1">0</span></p>
<button class="btn" onclick="increaseScore(1)">增加得分</button>
</div>
<div class="player" id="player2">
<h2>玩家2</h2>
<p>得分:<span id="score2">0</span></p>
<button class="btn" onclick="increaseScore(2)">增加得分</button>
</div>
<script>
function increaseScore(player) {
const scoreElement = document.querySelector(`#score${player}`);
const currentScore = parseInt(scoreElement.innerHTML);
scoreElement.innerHTML = currentScore + 1;
}
</script>
</body>
</html>
```
这个示例中,有两个玩家,每个玩家有一个得分。点击对应的按钮可以增加相应玩家的得分。
希望这个示例对您有帮助!如果您有其他问题,请随时提问。