html入门简单小游戏
时间: 2023-08-02 15:30:32 浏览: 49
好的,我可以为您介绍一个简单的 HTML 游戏。这个游戏叫做“石头、剪子、布”。游戏规则是,玩家和电脑分别出一种手势,如果两者出的手势相同,则平局;如果不同,则石头胜剪子、剪子胜布、布胜石头。
下面是这个游戏的 HTML 代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>石头剪子布</title>
<meta charset="UTF-8">
<style>
button {
font-size: 20px;
margin: 10px;
}
</style>
</head>
<body>
<h1>石头、剪子、布</h1>
<p>请选择一种手势:</p>
<button id="rock">石头</button>
<button id="scissors">剪子</button>
<button id="paper">布</button>
<p id="result"></p>
<script>
var buttons = document.getElementsByTagName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
var player = this.id;
var computer = Math.random();
if (computer < 0.33) {
computer = "rock";
} else if (computer < 0.66) {
computer = "scissors";
} else {
computer = "paper";
}
var result = "";
if (player == computer) {
result = "平局";
} else if ((player == "rock" && computer == "scissors") || (player == "scissors" && computer == "paper") || (player == "paper" && computer == "rock")) {
result = "你赢了";
} else {
result = "你输了";
}
document.getElementById("result").innerHTML = "你出了" + player + ",电脑出了" + computer + "," + result;
});
}
</script>
</body>
</html>
```
这个游戏使用了 HTML、CSS 和 JavaScript 技术。HTML 代码定义了游戏页面的结构,CSS 代码定义了页面元素的样式,JavaScript 代码则实现了游戏的逻辑。当玩家点击“石头”、“剪子”或“布”按钮时,JavaScript 代码会根据玩家和电脑出的手势计算出比赛结果,并将结果显示在页面上。