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

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

关键词

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

一、功能说明

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

二、所需组件

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

项目结构

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

三、代码实现

typescript 复制代码

// 文件名：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;
  }
}

typescript 复制代码

// 文件名：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-50、1-100、1-500）的目标数字。
动画效果：为提示信息添加颜色渐变或动画效果，提高用户体验。

六、相关知识点

小结

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

下一篇预告

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

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

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

作者：SoraLuna

链接：https://www.nutpi.net/thread?topicId=293

來源：坚果派

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。