project:guess

guess-game/src/components/GuessComposition.vue

@@ -0,0 +1,160 @@
+<template>
+  <div class="guess-container">
+    <h2>猜数游戏</h2>
+    <strong>请输入一个 0-100 之间的随机整数:</strong>
+    <br /><br />
+
+    <form @submit.prevent>
+      <input
+        v-model="guessInput"
+        type="text"
+        placeholder="输入你的猜测"
+        :disabled="!isGameActive"
+      />
+      <button type="button" @click="handleGuess" :disabled="!isGameActive">
+        提交
+      </button>
+      <button type="button" @click="restartGame">开始</button>
+      <br />
+
+      <label>
+        结果:
+        <input v-model="feedback" type="text" readonly />
+      </label>
+
+      <label>
+        当前还可以猜测的次数:
+        <input v-model="remainingCount" type="text" readonly />
+      </label>
+    </form>
+  </div>
+</template>
+
+<script setup>
+import { ref } from "vue";
+
+// 响应式变量定义
+const guessInput = ref(""); // 用户输入的猜测值
+const feedback = ref(""); // 反馈信息
+const remainingCount = ref(10); // 剩余猜测次数
+const targetNumber = ref(0); // 目标随机数
+const isGameActive = ref(false); // 游戏是否进行中
+
+// 重启游戏方法
+const restartGame = () => {
+  isGameActive.value = true;
+  guessInput.value = "";
+  feedback.value = "";
+  remainingCount.value = 10;
+  targetNumber.value = Math.floor(Math.random() * 101); // 生成 0-100 的随机数
+  console.log("目标数字:", targetNumber.value); // 调试用
+};
+
+// 处理猜测逻辑
+const handleGuess = () => {
+  if (!isGameActive.value) {
+    return;
+  }
+
+  const guess = parseInt(guessInput.value);
+
+  // 验证输入是否有效
+  if (isNaN(guess) || guess < 0 || guess > 100) {
+    feedback.value = "请输入一个 0-100 之间的有效数字!";
+    return;
+  }
+
+  // 判断猜测结果
+  if (guess > targetNumber.value) {
+    feedback.value = "猜的有点大!";
+  } else if (guess < targetNumber.value) {
+    feedback.value = "猜的有点小!";
+  } else {
+    feedback.value = `猜对啦！答案是 ${guess}`;
+    isGameActive.value = false; // 猜对后结束游戏
+    return;
+  }
+
+  // 更新剩余次数
+  remainingCount.value -= 1;
+
+  // 检查游戏是否结束
+  if (remainingCount.value === 0) {
+    feedback.value = `游戏结束！次数已用完，正确答案是 ${targetNumber.value}`;
+    isGameActive.value = false;
+  }
+};
+</script>
+
+<style scoped>
+.guess-container {
+  text-align: center;
+  font-family: Arial, sans-serif;
+  background-color: #f0f8ff;
+  padding: 40px;
+  border-radius: 10px;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+h2 {
+  color: #333;
+  margin-bottom: 20px;
+}
+
+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: 8px;
+  margin-bottom: 10px;
+  width: 150px;
+  text-align: center;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+  font-size: 14px;
+}
+
+input[type="text"]:disabled {
+  background-color: #f5f5f5;
+  cursor: not-allowed;
+}
+
+button {
+  padding: 8px 15px;
+  margin: 5px;
+  border-radius: 5px;
+  border: 1px solid #007bff;
+  background-color: #007bff;
+  color: white;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background-color 0.3s;
+}
+
+button:hover:not(:disabled) {
+  background-color: #0056b3;
+}
+
+button:disabled {
+  background-color: #ccc;
+  border-color: #ccc;
+  cursor: not-allowed;
+}
+
+label {
+  display: block;
+  margin: 15px 0;
+  font-size: 14px;
+  color: #555;
+}
+
+label input {
+  margin-left: 10px;
+}
+</style>