vscode石头剪刀布网页游戏代码
时间: 2024-06-11 17:03:34 浏览: 141
创建一个简单的VS Code项目来实现石头、剪刀、布(Rock, Paper, Scissors)网页游戏,通常涉及HTML、CSS和JavaScript的结合使用。以下是一个简化的步骤和代码示例:
1. **创建HTML结构**:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock, Paper, Scissors</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Rock, Paper, Scissors</h1>
<button id="rock">Rock</button>
<button id="paper">Paper</button>
<button id="scissors">Scissors</button>
<p id="result"></p>
<script src="script.js"></script>
</body>
</html>
```
2. **CSS样式** (styles.css):
```css
body {
text-align: center;
font-family: Arial, sans-serif;
}
button {
margin: 10px;
padding: 10px;
cursor: pointer;
}
#result {
margin-top: 20px;
}
```
3. **JavaScript逻辑** (script.js):
```javascript
document.addEventListener('DOMContentLoaded', function () {
const buttons = document.querySelectorAll('button');
const resultElement = document.getElementById('result');
buttons.forEach(function (button) {
button.addEventListener('click', function (event) {
event.preventDefault();
const userChoice = event.target.textContent;
const choices = ['rock', 'paper', 'scissors'];
// 假设电脑随机选择
const computerChoice = choices[Math.floor(Math.random() * choices.length)];
if (userChoice === computerChoice) {
resultElement.textContent = `It's a tie! Both chose ${userChoice}.`;
} else if (
(userChoice === 'rock' && computerChoice === 'scissors') ||
(userChoice === 'paper' && computerChoice === 'rock') ||
(userChoice === 'scissors' && computerChoice === 'paper')
) {
resultElement.textContent = `You win! ${userChoice} beats ${computerChoice}.`;
} else {
resultElement.textContent = `You lose! ${computerChoice} beats ${userChoice}.`;
}
});
});
});
```
阅读全文
相关推荐









