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

效果示例：用户输入数字后，应用会实时提示，帮助用户逐步接近目标数字。

---

四、代码解读

• 随机目标数字生成：通过 Math.random 生成 1-100 的随机整数，作为目标数字。
• @State guess 和 feedback：分别存储用户输入和提示信息，实现游戏状态的动态更新。
• checkGuess() 方法：判断用户输入的数字是否与目标数字匹配，并提供反馈信息。
• resetGame() 方法：重置游戏状态，为用户提供重新开始的机会。

---

五、优化建议

1. 添加计数器：记录用户的猜测次数，并在游戏结束时显示。
2. 难度选择：允许用户选择不同范围（如 1-50、1-100、1-500）的目标数字。
3. 动画效果：为提示信息添加颜色渐变或动画效果，提高用户体验。

---

六、相关知识点

• 「Mac畅玩鸿蒙与硬件11」鸿蒙 UI 组件篇1 - Text 和 Button 组件详解
• 「Mac畅玩鸿蒙与硬件26」UI互动应用篇3 - 倒计时和提醒功能实现

---

小结

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

---

下一篇预告

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

---

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

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

---

作者：SoraLuna
链接：https://www.nutpi.net/thread?topicId=293
來源：坚果派
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

---