「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-50、1-100、1-500）的目标数字。
- 动画效果：为提示信息添加颜色渐变或动画效果，提高用户体验。
六、相关知识点
- 「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
來源：坚果派
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
相关文章：
「Mac畅玩鸿蒙与硬件33」UI互动应用篇10 - 数字猜谜游戏
本篇将带你实现一个简单的数字猜谜游戏。用户输入一个数字，应用会判断是否接近目标数字，并提供提示“高一点”或“低一点”，直到用户猜中目标数字。这个小游戏结合状态管理和用户交互，是一个入门级的互动应用示例。 关键词 UI互…...
自然语言处理期末试题汇总
建议自己做，写完再来对答案。答案可能存在极小部分错误，不保证一定正确。 一、选择题 1-10、C A D B D B C D A A 11-20、A A A C A B D B B A 21-30、B C C D D A C A C B 31-40、B B B C D A B B A A 41-50、B D B C A B B B B C 51-60、A D D …...
记录Threadlocal使用
编写ThreadLocal工具类 package com.jjking.jplan.context;public class BaseContext<T> {public static final ThreadLocal threadLocal new ThreadLocal();//存储用户public static void set(Object t) {threadLocal.set(t);}//获取用户public static <T> T ge…...
利用 SpringBoot 开发的新冠密接者跟踪系统：医疗机构疫情防控辅助方案
摘 要 信息数据从传统到当代，是一直在变革当中，突如其来的互联网让传统的信息管理看到了革命性的曙光，因为传统信息管理从时效性，还是安全性，还是可操作性等各个方面来讲，遇到了互联网时代才发现能补上自古…...
vue 2 父组件根据注册事件，控制相关按钮显隐
目标效果 我不注册事件，那么就不显示相关的按钮 注册了事件，才会显示相关内容 实现思路 组件在 mounted 的时候可以拿到父组件注册监听的方法 拿到这个就可以做事情了 mounted() {console.log(this.$listeners, this.$listeners);this.show.search !…...
【深度学习基础】一篇入门模型评估指标（分类篇）
🌈 个人主页：十二月的猫-CSDN博客 🔥 系列专栏： 🏀深度学习_十二月的猫的博客-CSDN博客 💪🏻 十二月的寒冬阻挡不了春天的脚步，十二点的黑夜遮蔽不住黎明的曙光 目录 1. 前言 2. 模…...
hls视频流学习
hls格式播放的依赖安装： <!-- 新增hls播放库 -->npm install hls.js 组件封装： <template><div class"hls-player-cls"><video ref" video" controls style"width: 100%; max-width: 800px;">…...
【electron-vite】搭建electron+vue3框架基础
一、拉取项目 electron-vite 中文文档地址： https://cn-evite.netlify.app/guide/ 官网网址：https://evite.netlify.app/ 版本 vue版本：vue3 构建工具：vite 框架类型：Electron JS语法：TypeScript &…...
第三方Express 路由和路由中间件
文章目录 1、Express 应用使用回调函数的参数： request 和 response 对象来处理请求和响应的数据。2、Express路由1.路由方法2.路由路径3.路由处理程序 3. 模块化路由4. Express中间件1.中间件简介2.中间件分类3.自定义中间件 1、Express 应用使用回调函数的参数&am…...
WPF 常用的5个布局容器控件介绍
1. Grid Grid 是最常用的布局容器之一，它允许开发者以表格的方式对控件进行组织和布局。Grid 使用行和列来划分区域，可以精确控制控件的位置和大小。 特点： 行列定义：Grid 使用 RowDefinitions 和 ColumnDefinitions 来定义行和…...
【JAVA] 杂谈： java中的拷贝（克隆方法）
这篇文章我们来介绍什么是拷贝，并且实现浅拷贝到深拷贝。 目录 一、浅拷贝 1.1 clone 方法 1.2 实现浅拷贝： 1.2.1 重写 clone方法 1.2.2 实现接口 Cloneable 1.2.3 调用克隆方法 1.2.4 原理图： 1.3 浅拷贝的不足 1.3.1 增加引用…...
同时多平台git配置：GitHub和Gitee生成不同的SSH Key
文章目录 GitHub和Gitee生成不同的SSH Key步骤1：生成SSH Key步骤2：配置SSH配置文件步骤3：查看SSH公钥步骤4：将SSH公钥添加到GitHub和Gitee步骤5：测试SSH连接步骤6：添加remote远程库 GitHub和Gitee生成不同的…...
flink1.6集成doris，并从mysql同步数据到doris
使用 Apache Flink 1.6 集成 Doris，并从 MySQL 同步数据到 Doris 是一个复杂的任务，但可以通过以下步骤实现。Doris 是一个现代化的 MPP（大规模并行处理）SQL 数据库，支持实时分析和交互式查询。Flink 可以作为实时数据…...
手搓一个不用中间件的分表策略
场景：针对一些特别的项目，不用中间件，以月为维度进行分表，代码详细设计方案 1. 定义分片策略 首先，定义一个分片策略类，用于决定数据存储在哪个分表中 import java.time.LocalDate; import java.time.fo…...
AI前景分析展望——GPTo1 SoraAI
引言 人工智能（AI）领域的飞速发展已不仅仅局限于学术研究，它已渗透到各个行业，影响着从生产制造到创意产业的方方面面。在这场技术革新的浪潮中，一些领先的AI模型，像Sora和OpenAI的O1，凭借其强大…...
损失函数Hinge Loss介绍
Hinge Loss 是一种损失函数，广泛用于 支持向量机（SVM, Support Vector Machine） 和一些分类问题中。它特别适合用于 二分类问题，主要目标是让模型的预测值（通常是经过线性变换的原始分数）与真实标签之间的间隔尽可能大，从而提高分类的鲁棒性。 Hinge Loss 的定义 Hinge…...
多维高斯分布（Multivariate Gaussian Distribution）以及协方差矩阵：解析与应用
多维高斯分布：全面解析及其应用 1. 什么是多维高斯分布？ 多维高斯分布（Multivariate Gaussian Distribution），也称多元正态分布，是高斯分布在高维空间中的推广。它描述了随机向量 ( x ( x 1 , x 2 , … ,…...
前端开发常用快捷键
浏览器 ctrl e 光标定位在搜索框ctrl r 刷新ctrl t 新打开tabctrl tab 向右切换tabctrl shift tab 向左切换tab vscode ctrl p 全局搜索文件ctrl f 当前文件搜索alt 光标左键向下拖动：竖向选中多行文本ctrl b 切换侧边栏显示隐藏ctrl shift p 显示命…...
用MATLAB符号工具建立机器人的动力学模型
目录 介绍代码功能演示拉格朗日方法回顾求解符号表达式数值求解 介绍 开发机器人过程中经常需要用牛顿-拉格朗日法建立机器人的动力学模型，表示为二阶微分方程组。本文以一个二杆系统为例，介绍如何用MATLAB符号工具得到微分方程表达式，只需要…...
全面解析 MySQL 常见问题的排查与解决方法
目录 前言1. 查看 MySQL 日志信息1.1 日志文件的种类与路径1.2 查看日志内容的方法1.3 日志分析的关键点 2. 查看 MySQL 服务状态2.1 查看服务状态2.2 检查进程运行情况2.3 常见启动失败问题与解决 3. 检查 MySQL 配置信息3.1 配置文件的路径与内容3.2 验证配置文件的正确性 4.…...
泷羽Sec-星河飞雪-BurpSuite之解码、日志、对比模块基础使用
免责声明 学习视频来自 B 站up主泷羽sec，如涉及侵权马上删除文章。 笔记的只是方便各位师傅学习知识，以下代码、网站只涉及学习内容，其他的都与本人无关，切莫逾越法律红线，否则后果自负。 泷羽sec官网：http…...
.mean()等进行统计，pd.DataFrame.groupby() 分组统计)
【小白学机器学习34】基础统计2种方法：用numpy的方法np().mean()等进行统计，pd.DataFrame.groupby() 分组统计
目录 1 用 numpy 快速求数组的各种统计量：mean, var, std 1.1 数据准备 1.2 直接用np的公式求解 1.3 注意问题 1.4 用print() 输出内容，显示效果 2 为了验证公式的背后的理解，下面是详细的展开公式的求法 2.1 均值mean的详细 2.2 方差…...
【C++】stack和queue
目录 1. stack的介绍和使用 1.1 stack的介绍 1.2 stack的使用 2. queue的介绍和使用 2.1 queue的介绍 2.2 queue的使用 3. 容器适配器 3.1 什么是适配器 3.2 STL标准库中stack和queue的底层结构 3.3 deque的简单介绍(了解) 3.3.1 deque的原理介绍 3.3.2 deque优势与…...
向量的内积和外积 为什么这样定义
向量的内积和外积 为什么这样定义 flyfish 定义、公理与证明的区别 定义： 定义是人为规定的，用于描述概念的含义。例如，内积和外积是根据实际需求定义的，目的是描述几何和代数性质。定义不需要证明。 公理： 公理是数…...
简述循环神经网络RNN
1.why RNN CNN：处理图像之间没有时间/先后关系 RNN：对于录像，图像之间也许有时间/先后顺序，此时使用CNN效果不会很好，同理和人类的语言相关的方面时间顺序就更为重要了 2.RNN和CNN之间的关联 RNN和CNN本质上其实一…...
【Electron学习笔记（四）】进程通信（IPC）
进程通信（IPC） 进程通信（IPC）前言正文1、渲染进程→主进程（单向）2、渲染进程⇌主进程（双向）3、主进程→渲染进程 进程通信（IPC） 前言 在Electron框架中&…...
APP自动化测试框架的开发
基于appium的APP自动化测试框架的开发流程概览 1. 环境搭建 安装Appium Server 下载与安装：可以从Appium官方网站（Redirecting）下载安装包。对于Windows系统，下载.exe文件后双击安装；对于Mac系统，下载.dmg…...
【深度学习】各种卷积—卷积、反卷积、空洞卷积、可分离卷积、分组卷积
在全连接神经网络中，每个神经元都和上一层的所有神经元彼此连接，这会导致网络的参数量非常大，难以实现复杂数据的处理。为了改善这种情况，卷积神经网络应运而生。 一、卷积 在信号处理中，卷积被定义为一个函数经过翻转…...
pytorch 融合 fuse 学习笔记
目录 fuse_lora 作用是什么 fuse_modules源码解读 fuse_lora 作用是什么 在深度学习模型微调场景下（与 LoRA 相关） 参数融合功能 在使用 LoRA（Low - Rank Adaptation）对预训练模型进行微调后，fuse_lora函数的主要作…...
41 基于单片机的小车行走加温湿度检测系统
目录 一、主要功能 二、硬件资源 三、程序编程 四、实现现象 一、主要功能 基于51单片机，采样DHT11温湿度传感器检测温湿度，滑动变阻器连接数码转换器模拟电量采集传感器， 电机采样L298N驱动，各项参数通过LCD1602显示&#x…...
GitLab: You cannot create a branch with a SHA-1 or SHA-256 branch name
最近在迁移git库，把代码从gerrit迁移到gitlab，有几个库报错如下： GitLab: You cannot create a branch with a SHA-1 or SHA-256 branch name ! [remote rejected] refs/users/73/373/edit-95276/1 -> refs/users/73/373/edit-95276/1 (p…...
YOLOv9改进，YOLOv9引入TransNeXt中的ConvolutionalGLU模块，CVPR2024，二次创新RepNCSPELAN4结构
摘要 由于残差连接中的深度退化效应，许多依赖堆叠层进行信息交换的高效视觉Transformer模型往往无法形成足够的信息混合，导致视觉感知不自然。为了解决这个问题，作者提出了一种聚合注意力（Aggregated Attention），这是一种基于仿生设计的token混合器，模拟了生物的中央凹…...
TorchMoji使用教程/环境配置（2024）
TorchMoji使用教程/环境配置（2024） TorchMoji简介 这是一个基于pytorch库，用于将文本分类成不同的多种emoji表情的库，适用于文本的情感分析 配置流程 从Anaconda官网根据提示安装conda git拉取TorchMoji git clone https://gi…...
uniapp运行时，同步资源失败，未得到同步资源的授权，请停止运行后重新运行，并注意手机上的授权提示。
遇到自定义基座调试时安装无效或无反应？本文教你用 ADB 工具快速解决：打开 USB 调试，连接设备，找到应用包名，一键卸载问题包，清理干净后重新运行调试基座，轻松搞定！ 问题场景&#…...
uniapp中父组件调用子组件方法
实现过程（setup语法糖形式下） 在子组件完成方法逻辑，并封装。在子组件中使用defineExpose暴露子组件的该方法。在父组件完成子组件ref的绑定。通过ref调用子组件暴露的方法。 子组件示例 <template> </template><script se…...
腾讯云 AI 代码助手：单元测试应用实践
引言 在软件开发这一充满创造性的领域中，开发人员不仅要构建功能强大的软件，还要确保这些软件的稳定性和可靠性。然而，开发过程中并非所有任务都能激发创造力，有些甚至是重复且乏味的。其中，编写单元测试无疑是最令人…...
ArcGIS栅格影像裁剪工具
1、前言 在最近的栅格转矢量处理过程中，发现二值化栅格规模太大，3601*3601，并且其中的面元太过细碎，通过arcgis直接栅格转面有将近几十万的要素，拿这样的栅格数据直接运行代码，发现速度很慢还难以执行出来结…...
VueWordCloud标签云初实现
文章目录 VueWordCloud学习总结安装初使用在组件中注册该组件简单使用项目中实现最终实现效果 VueWordCloud学习总结 本次小组官网的项目中自己要负责标签模块，想要实现一个标签云的效果，搜索了很多，发现vue有一个VueWordCloud库，…...
AI数据分析工具（二）
豆包-免费 优点 强大的数据处理能力： 豆包能够与Excel无缝集成，支持多种数据类型的导入，包括文本、数字、日期等，使得数据整理和分析变得更加便捷。豆包提供了丰富的数据处理功能，如数据去重、填充缺失值、转换格式等…...
sizeof和strlen区分，（好多例子）
sizeof算字节大小 带\0 strlen算字符串长度 \0之前...
求100之内的素数-多语言
目录 C 语言实现 方法 1: 使用 for 循环 方法 2: 使用埃拉托斯特尼筛法 方法 3: 使用自定义判断素数 Python 实现 方法 1: 使用自定义函数判断素数 方法 2: 使用埃拉托斯特尼筛法（Sieve of Eratosthenes） 方法 3: 使用递归方法 Java 实现 方法…...
0.shell 脚本执行方式
1.脚本格式要求 🥑脚本以 #!/bin/bash 开头 🥦 脚本要有可执行权限 2.执行脚本的两种方式 🥬 方式1：赋予x执行权限 🥒 方式2： sh执行 ...
Web实时通信@microsoft/signalr
概要说明 signalr 是微软对 websocket技术的封装; build() 与后端signalR服务建立链接；使用 on 方法监听后端定义的函数；ps：由后端发起，后端向前端发送数据使用 invoke 主动触发后端的函数；ps：由前端发起&a…...
智截违规，稳保安全 | 聚铭视频专网违规外联治理系统新品正式发布
“千里之堤，毁于蚁穴”。 违规外联作为网络安全的一大隐患， 加强防护已刻不容缓。 这一次， 我们带着全新的解决方案来了 ——聚铭视频专网违规外联治理系统， 重磅登场！...
博弈论算法详解与Python实现
目录 博弈论算法详解与Python实现第一部分：博弈论简介与算法概述1.1 博弈论概述1.2 博弈论算法概述第二部分：纳什均衡算法2.1 纳什均衡的定义2.2 纳什均衡算法的实现2.2.1 算法思路2.2.2 Python实现2.2.3 设计模式分析第三部分：囚徒困境问题的博弈论算法3.1 囚徒困境的定义3…...
Python学习笔记之IP监控及告警
一、需求说明 作为一名运维工程师，监控系统必不可少。不过我们的监控系统往往都是部署在内网的，如果互联网出口故障，监控系统即使发现了问题，也会告警不出来，这个时候我们就需要补充监控措施，增加从外到内的…...
2024/11/30 RocketMQ本机安装与SpringBoot整合
目录 一、RocketMQ简介 1.1、核心概念 1.2、应用场景 1.3、架构设计 2、RocketMQ Server安装 3、RocketMQ可视化控制台安装与使用 4、SpringBoot整合RocketMQ实现消息发送和接收 4.1、添加maven依赖 4.2、yaml配置 4.3、生产者 4.4、消费者 4.5、接口 4.6、接口测试 一、R…...
解决“磁盘已插上,但Windows系统无法识别“问题
电脑上有2块硬盘，一块是500GB的固态硬盘，另一块是1000GB的机械硬盘，按下开机键，发现500G的固态硬盘识别了，但1000GB的机械硬盘却无法识别。后面为了描述方便，将"500GB的固态硬盘"称为X盘…...
解决vue3，动态添加路由，刷新页面出现白屏或者404
解决vue3，动态添加路由，刷新页面出现白屏或者404 1.解决出现刷新页面，出现404的情况 1.问题的出现 在做毕设的时候，在权限路由得到时候，我问通过router**.**addRoute(item)的方式，在路由守卫动态添加路由…...
大数据新视界 -- 大数据大厂之 Hive 数据质量监控：实时监测异常数据（下）（18/ 30）
💖💖💖亲爱的朋友们，热烈欢迎你们来到 青云交的博客！能与你们在此邂逅，我满心欢喜，深感无比荣幸。在这个瞬息万变的时代，我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…...