用vscode写一个石头剪刀布游戏网页代码
时间: 2025-01-21 11:33:16 浏览: 56
好的,我可以为您提供一个使用VSCode编写石头剪刀布游戏网页的示例代码。以下是一个简单的实现:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>石头剪刀布游戏</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; }
#result { margin-top: 20px; font-size: 24px; }
button { font-size: 18px; margin: 10px; padding: 10px 20px; }
</style>
</head>
<body>
<h1>石头剪刀布游戏</h1>
<button onclick="play('rock')">石头</button>
<button onclick="play('scissors')">剪刀</button>
<button onclick="play('paper')">布</button>
<div id="result"></div>
<script>
function play(userChoice) {
const choices = ['rock', 'scissors', 'paper'];
const computerChoice = choices[Math.floor(Math.random() * 3)];
let result = '';
if (userChoice === computerChoice) {
result = '平局!';
} else if (
(userChoice === 'rock' && computerChoice === 'scissors') ||
(userChoice === 'scissors' && computerChoice === 'paper') ||
(userChoice === 'paper' && computerChoice === 'rock')
) {
result = '你赢了!';
} else {
result = '你输了!';
}
document.getElementById('result').innerHTML = `你选择了 ${userChoice}, 电脑选择了 ${computerChoice}。<br>结果: ${result}`;
}
</script>
</body>
</html>
```
这个代码实现了一个基本的石头剪刀布游戏网页,包括以下特点:
1. 使用HTML结构创建页面布局。
2. 使用简单的CSS样式美化页面。
3. 使用JavaScript实现游戏逻辑。
4. 包含三个按钮供玩家选择。
5. 计算机随机选择一种手势。
6. 比较玩家和计算机的选择,确定结果。
7. 显示结果和双方的选择。
这个示例提供了一个简单而完整的实现,您可以在此基础上进行进一步的修改和扩展,比如添加计分功能、改进界面设计等。
阅读全文
相关推荐















