请帮我用DW里面的JS写一份小游戏,谢谢
时间: 2024-03-26 07:42:21 浏览: 15
好的,我可以为你提供一个简单的小游戏示例代码。这个游戏是一个猜数字的游戏,玩家需要在10次机会内猜出一个随机数。以下是代码:
HTML:
```
<!DOCTYPE html>
<html>
<head>
<title>猜数字游戏</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>猜数字游戏</h1>
<p>在10次机会内猜出1-100之间的一个随机数。</p>
<label for="guess">输入数字:</label>
<input type="text" id="guess">
<button id="submit">提交</button>
<p id="message"></p>
<script src="game.js"></script>
</body>
</html>
```
CSS:
```
body {
text-align: center;
font-family: Arial, sans-serif;
}
h1 {
margin-top: 50px;
}
p {
margin-top: 30px;
}
label {
font-size: 1.2em;
}
input[type="text"] {
width: 50px;
margin: 0 10px;
font-size: 1.2em;
}
button {
font-size: 1.2em;
padding: 5px 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
#message {
font-size: 1.5em;
font-weight: bold;
color: red;
margin-top: 30px;
}
```
JS:
```
// 生成1-100之间的随机数
var randomNumber = Math.floor(Math.random() * 100) + 1;
// 获取输入框和按钮元素
var guessInput = document.getElementById("guess");
var guessButton = document.getElementById("submit");
// 初始化剩余机会和猜测次数
var guessesRemaining = 10;
var guessCount = 1;
// 设置按钮点击事件
guessButton.addEventListener("click", function() {
// 获取玩家猜测的数字
var guess = Number(guessInput.value);
// 如果玩家没有输入数字,给出提示
if (isNaN(guess)) {
setMessage("请输入一个数字");
}
// 如果玩家猜对了,游戏结束
else if (guess === randomNumber) {
setMessage("恭喜你,猜对了!");
endGame();
}
// 如果玩家猜测次数用完了,游戏结束
else if (guessCount === guessesRemaining) {
setMessage("很遗憾,游戏结束。正确答案是 " + randomNumber);
endGame();
}
// 如果玩家猜测的数字比答案大,给出提示
else if (guess > randomNumber) {
setMessage("猜测的数字比答案大。你还有 " + (guessesRemaining - guessCount) + " 次机会。");
guessCount++;
}
// 如果玩家猜测的数字比答案小,给出提示
else {
setMessage("猜测的数字比答案小。你还有 " + (guessesRemaining - guessCount) + " 次机会。");
guessCount++;
}
});
// 设置消息提示
function setMessage(message) {
document.getElementById("message").textContent = message;
}
// 游戏结束
function endGame() {
guessInput.disabled = true;
guessButton.disabled = true;
}
```
这个示例游戏比较简单,你可以根据自己的需求修改代码或添加其他功能。希望能帮助到你!