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

「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 = []; // 清空历史记录}
}

// 文件名：Index.etsimport { GuessGameEnhancedPage } from './GuessGameEnhancedPage';@Entry
@Component
struct Index {build() {Column() {GuessGameEnhancedPage() // 调用增强版猜数字游戏页面}.padding(20)}
}