mirror of
https://github.com/Dichgrem/Vue.git
synced 2025-12-16 13:41:59 -05:00
135 lines
4.6 KiB
HTML
135 lines
4.6 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
<meta
|
|
name="viewport"
|
|
content="width=device-width, initial-
|
|
scale=1.0"
|
|
/>
|
|
<title>猜数游戏</title>
|
|
|
|
<script>
|
|
let count = 10; // 猜测次数
|
|
let target; // 随机目标数字
|
|
let flag = false; // 用于控制游戏是否进行
|
|
</script>
|
|
|
|
<style>
|
|
body {
|
|
text-align: center;
|
|
font-family: Arial, sans-serif;
|
|
background-color: #f0f8ff;
|
|
margin: 0;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
}
|
|
h2 {
|
|
color: #333;
|
|
}
|
|
form {
|
|
display: inline-block;
|
|
padding: 20px;
|
|
background-color: #fff;
|
|
border-radius: 10px;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
}
|
|
input[type="text"] {
|
|
padding: 5px;
|
|
margin-bottom: 10px;
|
|
width: 100px;
|
|
text-align: center;
|
|
border-radius: 5px;
|
|
border: 1px solid #ccc;
|
|
}
|
|
input[type="button"] {
|
|
padding: 5px 10px;
|
|
margin: 5px;
|
|
border-radius: 5px;
|
|
border: 1px solid #007bff;
|
|
background-color: #007bff;
|
|
color: white;
|
|
cursor: pointer;
|
|
}
|
|
input[type="button"]:hover {
|
|
background-color: #0056b3;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin: 10px 0;思考如何使用 Vue3 实现该游戏?
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div>
|
|
<h2>猜数游戏</h2>
|
|
<strong>请输入一个 0-100 之间的随机整数:</strong>
|
|
<br /><br />
|
|
<form>
|
|
<input type="text" id="guess" placeholder="输入你的猜测" />
|
|
<input type="button" id="button" value="提交" onclick="run()" />
|
|
<input type="button" value="开始" onclick="restart()" />
|
|
<br />
|
|
<label
|
|
>结果: <input type="text" id="feedback" readonly
|
|
/></label>
|
|
<label
|
|
>当前还可以猜测的次数:
|
|
<input type="text" value="10" id="count" readonly
|
|
/></label>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
|
|
<script>
|
|
function restart() {
|
|
flag = true; // 标记游戏开始
|
|
let guess = document.getElementById("guess");
|
|
guess.value = ""; // 清空输入框
|
|
let result = document.getElementById("feedback");
|
|
result.value = ""; // 清空反馈框
|
|
count = 10; // 重置猜测次数
|
|
let nn = document.getElementById("count");
|
|
nn.value = count;
|
|
target = Math.floor(Math.random() * 101); // 生成随机数
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
function run() {
|
|
if (flag) {
|
|
let guess = parseInt(document.getElementById("guess").value);
|
|
// 将用户输入转换为整数
|
|
let result = document.getElementById("feedback");
|
|
let nn = document.getElementById("count");
|
|
// 判断用户输入是否有效
|
|
if (isNaN(guess) || guess < 0 || guess > 100) {
|
|
result.value = "请输入一个 0-100 之间的有效数字!";
|
|
return;
|
|
}
|
|
// 根据猜测结果给出反馈
|
|
if (guess > target) {
|
|
result.value = "猜的有点大!";
|
|
} else if (guess < target) {
|
|
result.value = "猜的有点小!";
|
|
} else if (guess == target) {
|
|
result.value = "猜对啦！答案是" + guess;
|
|
flag = false; // 猜对后结束游戏
|
|
}
|
|
// 更新剩余猜测次数
|
|
count -= 1;
|
|
nn.value = count;
|
|
// 如果猜测次数用完，结束游戏
|
|
if (count == 0 && guess != target) {
|
|
result.value = "游戏结束！次数已用完，正确答案是" + target;
|
|
flag = false;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</html>
|