「Mac畅玩鸿蒙与硬件33」UI互动应用篇10 - 数字猜谜游戏

本篇将带你实现一个简单的数字猜谜游戏。用户输入一个数字，应用会判断是否接近目标数字，并提供提示“高一点”或“低一点”，直到用户猜中目标数字。这个小游戏结合状态管理和用户交互，是一个入门级的互动应用示例。

---

关键词

• UI互动应用
• 数字猜谜
• 状态管理
• 用户交互
• 随机数生成

---

一、功能说明

数字猜谜游戏随机生成一个目标数字，用户通过输入数字猜测目标数字的大小，并根据提示逐步调整。猜中目标数字后，游戏会显示胜利提示，并提供重新开始的按钮。

---

二、所需组件

• @Entry 和 @Component 装饰器
• Column 布局组件
• TextInput 组件用于用户输入
• Text 组件用于显示提示信息
• Button 组件用于提交答案和重新开始
• @State 修饰符用于状态管理

项目结构

• 项目名称：GuessGameApp
• 自定义组件名称：GuessGamePage
• 代码文件：GuessGamePage.ets、Index.ets

---

三、代码实现

// 文件名：GuessGamePage.ets

@Component
export struct GuessGamePage {
  @State targetNumber: number = this.generateRandomNumber(); // 随机目标数字
  @State guess: string = ''; // 用户当前的输入
  @State feedback: string = '输入一个数字开始猜谜'; // 提示信息
  @State isGameOver: boolean = false; // 游戏是否结束

  private generateRandomNumber(): number {
    return Math.floor(Math.random() * 100) + 1; // 生成 1-100 的随机整数
  }

  build() {
    Column({ space: 20 }) { // 创建垂直布局
      // 显示提示信息
      Text(this.feedback)
        .fontSize(20)
        .alignSelf(ItemAlign.Center);

      // 输入数字
      TextInput({ placeholder: '输入你的猜测数字' })
        .type(InputType.Number)
        .onChange((value: string) => this.guess = value)
        .enabled(!this.isGameOver)
        .width('80%')
        .alignSelf(ItemAlign.Center);

      // 提交按钮
      Button(this.isGameOver ? '重新开始' : '提交猜测')
        .onClick(() => {
          if (this.isGameOver) {
            this.resetGame();
          } else {
            this.checkGuess();
          }
        })
        .fontSize(18)
        .backgroundColor(this.isGameOver ? Color.Green : Color.Blue)
        .fontColor(Color.White)
        .width('50%')
        .alignSelf(ItemAlign.Center);
    }
    .padding(20)
    .width('100%')
    .height('100%')
    .alignItems(HorizontalAlign.Center);
  }

  private checkGuess() {
    const guessNumber = parseInt(this.guess);
    if (isNaN(guessNumber)) {
      this.feedback = '请输入一个有效的数字！';
      return;
    }

    if (guessNumber < this.targetNumber) {
      this.feedback = '高一点！';
    } else if (guessNumber > this.targetNumber) {
      this.feedback = '低一点！';
    } else {
      this.feedback = '恭喜你，猜对了！';
      this.isGameOver = true;
    }
  }

  private resetGame() {
    this.targetNumber = this.generateRandomNumber();
    this.guess = '';
    this.feedback = '输入一个数字开始猜谜';
    this.isGameOver = false;
  }
}

// 文件名：Index.ets

import { GuessGamePage } from './GuessGamePage';

@Entry
@Component
struct Index {
  build() {
    Column() {
      GuessGamePage() // 调用数字猜谜游戏页面
    }
    .padding(20)
  }
}

效果示例：用户输入数字后，应用会实时提示，帮助用户逐步接近目标数字。

---

四、代码解读

• 随机目标数字生成：通过 Math.random 生成 1-100 的随机整数，作为目标数字。
• @State guess 和 feedback：分别存储用户输入和提示信息，实现游戏状态的动态更新。
• checkGuess() 方法：判断用户输入的数字是否与目标数字匹配，并提供反馈信息。
• resetGame() 方法：重置游戏状态，为用户提供重新开始的机会。

---

五、优化建议

1. 添加计数器：记录用户的猜测次数，并在游戏结束时显示。
2. 难度选择：允许用户选择不同范围（如 1-50、1-100、1-500）的目标数字。
3. 动画效果：为提示信息添加颜色渐变或动画效果，提高用户体验。

---

六、相关知识点

• 「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text和Button组件详解
• 「Mac畅玩鸿蒙与硬件26」UI互动应用篇3 - 倒计时和提醒功能实现

---

小结

通过数字猜谜小游戏，用户能够体验状态管理和随机数生成的应用，同时熟悉用户交互和简单逻辑判断的实现方法。该游戏适合初学者练习基本的组件使用和事件处理。

---

下一篇预告

在下一篇「UI互动应用篇11 - 颜色选择器」中，我们将探索如何实现一个颜色选择器，用户可以通过点击预设颜色或输入颜色代码动态改变界面背景。

---

上一篇： 「Mac畅玩鸿蒙与硬件32」UI互动应用篇9 - 番茄钟倒计时应用

下一篇： 「Mac畅玩鸿蒙与硬件34」UI互动应用篇11 - 颜色选择器

---

作者：SoraLuna 链接：https://www.nutpi.net/thread?topicId=293 來源：坚果派 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

---