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

「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.etsimport { GuessGamePage } from './GuessGamePage';@Entry
@Component
struct Index {build() {Column() {GuessGamePage() // 调用数字猜谜游戏页面}.padding(20)}
}