「Mac畅玩鸿蒙与硬件33」UI互动应用篇10

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

news2024/12/1 13:17:31

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

关键词

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