「Mac畅玩鸿蒙与硬件38」UI互动应用篇15 - 猜数字增强版原创

SoraLuna

发布于 2024-12-23 22:39

浏览

1收藏

本篇将带你实现一个升级版的数字猜谜游戏。相比基础版，新增了计分和历史记录功能，用户可以在每次猜测后查看自己的得分和猜测历史。此功能展示了状态管理的进阶用法以及如何保存和显示历史数据。

「Mac畅玩鸿蒙与硬件38」UI互动应用篇15 - 猜数字增强版-鸿蒙开发者社区

关键词

UI互动应用
数字猜谜
状态管理
历史记录
用户交互

一、功能说明

在猜数字增强版中，应用会随机生成一个目标数字，用户可以反复猜测，直到猜中目标数字。应用会记录每次猜测的历史信息，包括猜测的数字和提示信息，同时为每次猜对目标数字的用户加分。

二、所需组件

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

三、项目结构

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

四、代码实现

// 文件名：GuessGameEnhancedPage.ets

@Component
export struct GuessGameEnhancedPage {
  @State targetNumber: number = this.generateRandomNumber(); // 随机目标数字
  @State guess: string = ''; // 用户当前输入
  @State feedback: string = '输入一个数字开始猜谜'; // 提示信息
  @State score: number = 0; // 用户得分
  @State history: 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);

      // 显示当前得分
      Text(`当前得分: ${this.score}`)
        .fontSize(18)
        .fontColor(Color.Blue)
        .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);

      // 显示猜测历史记录
      Column({ space: 10 }) {
        ForEach(this.history, (entry: string) => {
          Text(entry)
            .fontSize(16)
            .fontColor(Color.Gray);
        });
      }
      .alignSelf(ItemAlign.Start);
    }
    .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;
      this.score += 1; // 猜对加分
    }
    this.history.push(`你猜的是 ${guessNumber}，提示: ${this.feedback}`);
  }

  private resetGame() {
    this.targetNumber = this.generateRandomNumber();
    this.guess = '';
    this.feedback = '输入一个数字开始猜谜';
    this.isGameOver = false;
    this.history = []; // 清空历史记录
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.

// 文件名：Index.ets

import { GuessGameEnhancedPage } from './GuessGameEnhancedPage';

@Entry
@Component
struct Index {
  build() {
    Column() {
      GuessGameEnhancedPage() // 调用增强版猜数字游戏页面
    }
    .padding(20)
  }
}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.