本篇将带你实现一个简单的数字猜谜游戏。用户输入一个数字，应用会判断是否接近目标数字，并提供提示“高一点”或“低一点”，直到用户猜中目标数字。这个小游戏结合状态管理和用户交互，是一个入门级的互动应用示例。
关键词
- 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)
}
}
效果示例：用户输入数字后，应用会实时提示，帮助用户逐步接近目标数字。
四、代码解读
- 随机目标数字生成：通过
Math.random生成 1-100 的随机整数，作为目标数字。 @State guess和feedback：分别存储用户输入和提示信息，实现游戏状态的动态更新。checkGuess()方法：判断用户输入的数字是否与目标数字匹配，并提供反馈信息。resetGame()方法：重置游戏状态，为用户提供重新开始的机会。
五、优化建议
- 添加计数器：记录用户的猜测次数，并在游戏结束时显示。
- 难度选择：允许用户选择不同范围（如 1-50、1-100、1-500）的目标数字。
- 动画效果：为提示信息添加颜色渐变或动画效果，提高用户体验。
六、相关知识点
小结
通过数字猜谜小游戏，用户能够体验状态管理和随机数生成的应用，同时熟悉用户交互和简单逻辑判断的实现方法。该游戏适合初学者练习基本的组件使用和事件处理。
下一篇预告
在下一篇「UI互动应用篇11 - 颜色选择器」中，我们将探索如何实现一个颜色选择器，用户可以通过点击预设颜色或输入颜色代码动态改变界面背景。
上一篇： 「Mac畅玩鸿蒙与硬件32」UI互动应用篇9 - 番茄钟倒计时应用
下一篇： 「Mac畅玩鸿蒙与硬件34」UI互动应用篇11 - 颜色选择器
作者：SoraLuna
链接：https://www.nutpi.net/thread?topicId=293
來源：坚果派
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
