Vue/guess-game/src/components/GuessComposition.vue

<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>