当前位置：首页 > news >正文

「Mac畅玩鸿蒙与硬件50」UI互动应用篇27 - 水果掉落小游戏

news 来源：原创 2025/7/19 5:02:43

本篇教程将带你实现一个水果掉落小游戏，掌握基本的动态交互逻辑和鸿蒙组件的使用，进一步了解事件处理与状态管理。

在这里插入图片描述

关键词

UI互动应用
水果掉落
状态管理
动态交互
游戏开发

一、功能说明

水果掉落小游戏包含以下交互功能：

随机生成水果：屏幕顶部随机生成水果，并动态下落。
接收水果：通过左右移动篮子接住水果。
实时分数统计：成功接住水果增加得分，未接住则无分。
游戏重置：支持一键重置游戏状态。

二、所需组件

@Entry 和 @Component 装饰器
Canvas 组件用于绘制水果和篮子
Button 组件用于移动篮子和重置游戏
@State 修饰符用于状态管理
setInterval 和 clearInterval 实现定时功能

三、项目结构

项目名称：FruitDropGame
自定义组件名称：FruitDropPage
代码文件：FruitDropPage.ets、Index.ets

四、代码实现

1. 水果掉落页面

// 文件名：FruitDropPage.ets// 定义水果接口
interface Fruit {x: number;y: number;
}@Component
export struct FruitDropPage {@State basketPosition: number = 400; // 篮子初始位置@State fruits: Fruit[] = []; // 水果列表@State score: number = 0; // 游戏得分private intervalId: number | null = null; // 定时器IDprivate context: CanvasRenderingContext2D = new CanvasRenderingContext2D();// 初始化游戏initGame(): void {this.score = 0;this.fruits = [];this.startDroppingFruits();}// 启动水果掉落startDroppingFruits(): void {if (this.intervalId !== null) {return; // 如果定时器已存在，则不重复启动}this.intervalId = setInterval(() => {this.fruits.push({ x: Math.random() * 700, y: 0 }); // 随机生成水果this.updateFruits();}, 1000); // 每秒生成一个水果}// 更新水果位置updateFruits(): void {const updatedFruits: Fruit[] = [];this.fruits.forEach(fruit => {const updatedY = fruit.y + 10; // 调整水果下落速度if (updatedY >= 580 && Math.abs(fruit.x - this.basketPosition) < 100) {this.score += 1; // 接住水果，得分} else if (updatedY < 600) {updatedFruits.push({ x: fruit.x, y: updatedY }); // 更新位置}});this.fruits = updatedFruits; // 更新水果数组this.redrawCanvas();}// 绘制游戏画布redrawCanvas(): void {this.context.clearRect(0, 0, 700, 600); // 清空画布this.fruits.forEach(fruit => {this.context.fillStyle = '#FFA500'; // 水果颜色this.context.beginPath();this.context.arc(fruit.x, fruit.y, 15, 0, 2 * Math.PI); // 绘制水果this.context.fill();});// 绘制篮子this.context.fillStyle = '#0000FF';this.context.fillRect(this.basketPosition - 100, 570, 200, 20); // 调整篮子位置和大小}// 移动篮子moveBasket(direction: string): void {if (direction === 'left' && this.basketPosition > 100) {this.basketPosition -= 40; // 调整移动距离} else if (direction === 'right' && this.basketPosition < 600) {this.basketPosition += 40; // 调整移动距离}this.redrawCanvas();}// 停止游戏stopGame(): void {if (this.intervalId !== null) {clearInterval(this.intervalId); // 清除定时器this.intervalId = null;}this.fruits = [];this.redrawCanvas();}build() {Column({ space: 20 }) {// 游戏标题和分数Row({ space: 20 }) {Text('水果掉落小游戏').fontSize(30).fontWeight(FontWeight.Bold).alignSelf(ItemAlign.Start).margin({ left: 20 });Text(`得分：${this.score}`).fontSize(24).alignSelf(ItemAlign.End).margin({ right: 20 });}.width('100%');Row() {// 左侧画布Canvas(this.context).width(700) // 调整画布宽度.height(600) // 调整画布高度.border({ width: 2, color: '#CCCCCC' }) // 添加边框，方便观察.onReady(() => {this.initGame();});// 右侧操作区Column({ space: 40 }) {Button('左移').onClick(() => this.moveBasket('left')).width(150).height(70).backgroundColor('#00AAFF').fontSize(24).fontColor(Color.White);Button('右移').onClick(() => this.moveBasket('right')).width(150).height(70).backgroundColor('#00AAFF').fontSize(24).fontColor(Color.White);Button('重置游戏').onClick(() => {this.stopGame();this.initGame();}).width(150).height(70).backgroundColor('#FF5555').fontSize(24).fontColor(Color.White);}.width(200).alignSelf(ItemAlign.Center);}.padding(20).width('100%').height('80%').alignSelf(ItemAlign.Center);}.padding(20).width('100%').height('100%').alignSelf(ItemAlign.Center);}
}

2. 主入口文件

// 文件名：Index.etsimport { FruitDropPage } from './FruitDropPage';@Entry
@Component
struct Index {build() {Column() {FruitDropPage() // 调用水果掉落页面}.padding(20);}
}

效果示例：水果随机从顶部掉落，玩家通过移动篮子接住水果，实时更新分数。

效果展示：

五、代码解读

水果随机生成与移动
- 使用 setInterval 定时生成水果，并动态更新位置。
状态管理与分数更新
- 使用 @State 管理水果位置、篮子位置和分数状态，实现实时更新。
画布绘制逻辑
- Canvas 组件结合 CanvasRenderingContext2D 绘制水果和篮子。
用户交互逻辑
- 通过按钮控制篮子左右移动，实时更新画布内容。

六、优化建议

随分数增加逐步加快水果掉落速度，增加游戏挑战性。
提供多种水果类型，并设定不同的分值。
增加暂停和继续功能，提升用户体验。

七、效果展示

随机水果生成与掉落：水果从顶部随机生成，并不断下落。
实时分数统计：成功接住水果实时更新分数。
灵活操作：通过按钮灵活控制篮子左右移动，接住水果。

八、相关知识点

「Mac畅玩鸿蒙与硬件20」鸿蒙UI组件篇10 - Canvas组件自定义绘图
「Mac畅玩鸿蒙与硬件11」鸿蒙UI组件篇1 - Text和Button组件详解

小结

本篇教程通过动态生成水果、实时分数统计以及用户交互逻辑，实现了一个水果掉落小游戏。用户可以掌握鸿蒙组件和状态管理的实际应用，为开发更复杂的游戏提供基础。

下一篇预告

在下一篇「UI互动应用篇28 - 模拟记账应用」中，我们将实现一个实用的记账功能，学习数据输入和动态展示的开发技巧。

上一篇：「Mac畅玩鸿蒙与硬件49」UI互动应用篇26 - 数字填色游戏

下一篇：「Mac畅玩鸿蒙与硬件51」UI互动应用篇28 - 模拟记账应用

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

「Mac畅玩鸿蒙与硬件50」UI互动应用篇27 - 水果掉落小游戏

本篇教程将带你实现一个水果掉落小游戏，掌握基本的动态交互逻辑和鸿蒙组件的使用，进一步了解事件处理与状态管理。关键词 UI互动应用水果掉落状态管理动态交互游戏开发一、功能说明水果掉落小游戏包含以下交互功能： 随机生成水果&#…...

编程日记 2025/7/19 5:02:43

Java [后端] 开发日常记录（1）

目录 1、常用的注解 2、对字符串的处理 3、对JSON串的处理 -- The End -- 详细如下： 1、常用的注解若返回的字段中有NUll，则不返回 JsonInclude(value JsonInclude.Include.NON_NULL) //在实体类中添加这个注解 JsonInclude(JsonInclude.Include.NON…...

编程日记 2025/7/19 4:41:27

【Spring】Spring DI(依赖注入)详解——自动装配——手动装配与自动装配的区别

在spring开发中，依赖注入（Dependency Injection，DI）是实现松耦合和高内聚设计的重要模式。它使得对象的创建和管理与其依赖关系分离，从而提高了代码的可维护性、可测试性和灵活性。Spring框架通过IoC（控制反…...

编程日记 2025/7/19 4:40:26

科普时刻 | 3D-IC设计：芯片集成的创新方法

技术的进步推动了日益复杂和密集的集成电路（IC）不断发展。为了满足对高性能和节能设备不断增长的需求，行业已转向3D-IC设计。3D-IC在消费类电子产品、电信、计算和汽车等众多行业都有广泛的应用。什么是3D-IC技术？ 3D-IC技术是…...

编程日记 2025/7/18 15:53:28

自研国产零依赖前端UI框架实战009 数组相关方法和新增修改功能实现

前言我们已经实现了用户管理相关的页面,为此也封装了很多的组件. 按照原本的计划, 我们还要封装一些常用的操作数组的方法. 将元素插入数组的任意位置 // 将元素插入数组的指定位置 const insert (arr, // 数组element, // 元素index, // 指定索引 ) > {if (index &l…...

编程日记 2025/7/15 21:53:04

DBeaver连接OceanBase数据库

OceanBase分Oracle租户模式和mysql租户模式，一般企业常用的是Oracle住户模式，下面介绍下DBeaver连接OceanBase Oracle租户模式下的数据库 DBeaver 标签栏 - 数据库 - 驱动管理器新建 OB 驱动填写如下参数一般拿到的ob连接信息如下 Oceanbase数据库服…...

编程日记 2025/7/13 1:16:37

活动预告 |【Part1】Microsoft Azure 在线技术公开课：基础知识

课程介绍参加“Azure 在线技术公开课：基础知识”活动，培养有助于创造新的技术可能性的技能并探索基础云概念。参加我们举办的本次免费培训活动，扩充自身的云模型和云服务类型知识。你还可以查看以计算、网络和存储为核心的 Azure 服务。活…...

编程日记 2025/7/13 8:06:40

傲雷亮相2024中国时尚体育季（珠海站），展现户外移动照明风采

2024年12月28-29日，2024中国时尚体育季（珠海站）国家级轮滑比赛在珠海金山体育公园成功举办。作为户外创新型移动照明领域的领导品牌，傲雷受邀参加了本次珠海金湾运动生活嘉年华的展览单元，与众多户外运动品牌同台展示。…...

编程日记 2025/7/18 4:28:34

LangChain4j与Elasticsearch：构建高效的语义嵌入存储

LangChain4j与Elasticsearch：构建高效的语义嵌入存储一、LangChain4j与Elasticsearch集成概述 1.1 LangChain4j简介 LangChain4j是一个为Java开发者设计的开源库，旨在简化大型语言模型（LLM）在Java应用程序中的集成。它提供了与…...

编程日记 2025/7/16 5:55:28

IO Virtualization with Virtio.part 1 [十二]

久等了各位！ 本篇开始讲解 IO 虚拟化中的 virtio，我会以 Linux 的 IIC 驱动为例，从 IIC 驱动的非虚拟化实现，到 IIC 驱动的半虚拟化实现，再到最后 X-Hyper 中如何通过 virtio 来实现前后端联系，一步步把 v…...

编程日记 2025/7/19 4:57:37

单元测试4.0+思路总结

Jmockit使用笔记_增加代码覆盖率_覆盖try catch_使用new MockUp私有方法-CSDN博客一般使用new MockUp模拟被测试代码中的私有方法(常用） 使用new Expetations模拟被测试代码中的方法?...

编程日记 2025/7/2 13:04:16

微信小程序中遇到过的问题

记录微信小程序中遇到的问题（持续更新ing） 问题描述：1. WXML中无法直接调用JavaScript方法。2. css中无法直接引用背景图片。3. 关于右上角胶囊按钮。4. 数据绑定问题。5. 事件处理问题。6. 关于movable-view组件的问题7. 关于设置宽度后设置…...

编程日记 2025/7/15 19:35:18

气象数据Grib及Python绘图

文章较长，却将所有常见的气象数据类型进行了详细的介绍，对各种方法的优劣势进行了详细分析，相信对于阅读者来说会有一定程度的帮助目录 GRIB 数据格式简介使用Python处理Grib文件法1：使用pygrib库法2：使用cf…...

编程日记 2025/7/14 19:07:10

Vue el-data-picker选中开始时间，结束时间自动加半小时

效果思路查阅elemnet plus官网，日期时间选择器type"datetimerange"这个选中开始时间并没有对应事件会被触发，因此思路更换成type"datetime"的两个组成一起可以通过监听开始时间v-model的值变化更新结束时间的值。代码日期时间…...

编程日记 2025/7/19 4:52:53

通过Homebrew安装 - 国内下载地址 /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"安装nvm brew install nvm 配置nvm环境变量 export NVM_DIR“$HOME/.nvm” [ -s “/usr/local/opt/nvm/nvm.sh” ] && . “/usr/…...

编程日记 2025/7/19 4:41:26

模型并行、数据并行、流水线并行以及混合并行的适用场景、优劣

模型并行、数据并行、流水线并行以及混合并行的适用场景、优劣数据并行适用场景：适用于模型规模相对较小，能够在单个计算设备（如 GPU）上完整运行，但训练数据量巨大的情况。例如在大规模图像分类任务中，常见的卷积神经网络模型（如 ResNet、VGG 等）在处理大规模图像数据…...

编程日记 2025/7/13 5:31:10

【容器化技术 Docker 与微服务部署】详解

容器化技术 Docker 与微服务部署一、容器化技术概述 （一）概念容器化技术是一种操作系统级别的虚拟化方法，它允许将应用程序及其依赖项（如运行时环境、系统工具、库等）打包成一个独立的、可移植的单元，这…...

编程日记 2025/7/18 4:15:10

MySQL——数据类型

一、常见的数据类型及分类其中上述的数值类型包含了整形和浮点型，文本、二进制类型主要是字符串类型。整数类型（Integer Types）： TINYINT：范围为-128到127或0到255（无符号），用于…...

编程日记 2025/7/18 23:08:12

基于傅立叶神经网络（FNN）与物理信息神经网络（PINN）求解泊松方程(附Pytorch源代码)

基于傅立叶神经网络（FNN）与物理信息神经网络（PINN）求解泊松方程一、引言偏微分方程（Partial Differential Equation, PDE）在科学与工程领域有着广泛的应用。传统数值方法（如有限差分法、有限元法）在求解这类问题时，尽管已经非常成熟，但随着问题复杂度的增加，其计…...

编程日记 2025/7/14 12:36:17

FastExcel：超越EasyExcel的新一代Excel处理工具

简介 FastExcel是由原EasyExcel作者在阿里巴巴宣布停止维护EasyExcel之后推出的升级版框架。它继承了EasyExcel的所有优点，并且在性能和功能上进行了显著的提升和创新。 FastExcel的特点高性能读写：FastExcel专注于性能优化，能够高效处理…...

编程日记 2025/7/19 5:01:21

项目优化性能监控

目录 1. 性能平台搭建 1.1 影响性能的关键要素 1.2 压力测试 1.3 压力测试指标 1.4 Jmeter 1.5 Jmeter常用插件 1.6 性能关键指标 1.7 服务器硬件资源监控 1.8 系统负载:load average 1.9 搭建压测监控平台 1.10 梯度压测：分析接口性能瓶颈 2. 项目优化…...

编程日记 2025/7/15 20:46:14

linux装git

前言以 deepin 深度系统为例，安装命令行版 Git 非常简单。安装注意：需要输入账号密码，否则无法进行。打开终端，执行如下命令即可。 sudo apt-get install git成功如下图所示，输入 git ，命令识别即…...

编程日记 2025/7/4 23:50:29

2024 年度总结

时光荏苒，2024 年即将画上句号，回顾这一年的写博历程，有付出、有收获、有成长，也有诸多值得回味与反思的瞬间。一、内容创作主题涉猎：这一年，我致力于探索多样化的主题，以满足不同读者群体的…...

编程日记 2025/7/16 5:34:22

实验八指针2

7-1 利用指针返回多个函数值分数 30 全屏浏览切换布局作者陈晓梅单位广东外语外贸大学读入n个整数，调用max_min()函数求这n个数中的最大值和最小值。输入格式: 输入有两行： 第一行是n值； 第二行是n个数。输出格式: 输出最大…...

编程日记 2025/7/15 8:36:03

python修改ppt中的文字部分及插入图片

批量修改ppt中的某个模块，或者批量制作奖状等场景会用到； import os import pandas as pd from pptx import Presentation from pptx.util import Inchesfilepath/Users/kangyongqing/Documents/kangyq/202303/分析模版/批量制作/file1时段预警_副本.pp…...

编程日记 2025/7/13 11:08:13

C进阶-字符串与内存函数介绍（另加2道典型面试题）

满意的话，记得一键三连哦！ 我们先看2道面试题第一道： 我们画图理解： pa，先使用再，pa开始指向a【0】，之后pa向下移动一位，再解引用，指向a【1】，a【1】又指向…...

编程日记 2025/7/17 12:10:09

Github - 如何提交一个带有“verified”标识的commit

Github - 如何提交一个带有“verified”标识的commit 前言(Why) 今天在Github上浏览某项目的commit记录的时候发现，有的commit记录带有verified绿色标识，有的带有橘色的Unverified标识，还有的什么都不显示。既然我是根正苗红的作者(bushi)…...

编程日记 2025/7/15 13:43:14

充电桩语音提示IC方案-支持OTA远程更换语音WT2003H让充电更智能

随着新能源汽车产业的蓬勃发展，充电桩作为电动汽车能量补给的关键设施，其智能化、人性化设计日益成为行业关注的焦点。在这一背景下，WT2003H4-16S语音芯片方案的推出，无疑为充电桩的智能化升级注入了新的活力。该方案不仅提升了充…...

编程日记 2025/7/17 7:58:29

[2474].第04节：Activiti官方画流程图方式

我的后端学习大纲 Activiti大纲 1.安装位置： 2.启动：...

编程日记 2025/7/2 11:51:26

开源的Vue低代码表单设计器 form-create-designer v3.2.9 版本发布，新增10多种功能

form-create-designer 是一款开源的低代码表单设计器，通过数据驱动表单渲染。可以通过拖拽的方式快速创建表单，提高开发者对表单的开发效率，节省开发者的时间。并广泛应用于在政务系统、OA系统、ERP系统、电商系统、流程管理等领域。项目采…...

编程日记 2025/7/15 1:05:57

0042__【小沐学OpenGL】Ubuntu环境下glfw的安装和使用

【小沐学OpenGL】Ubuntu环境下glfw的安装和使用_ubuntu glfw-CSDN博客 OpenGL 打开绘制窗口学习笔记_glfwmakecontextcurrent-CSDN博客...

编程日记 2025/7/17 19:45:45

第一节：电路连接【51单片机+A4988+步进电机教程】

摘要：本节介绍如何搭建一个51单片机A4988步进电机控制电路，所用材料均为常见的模块，简单高效的方式搭建起硬件环境一、硬件清单 ①51单片机最小控制模块 ②开关电源 ③A4988模块转接座 ④二相四线步进电机 ⑤电线若干二、接线三、A49…...

编程日记 2025/7/18 22:28:04

k8s 部署meilisearch UI

https://github.com/riccox/meilisearch-ui 拉取镜像 sudo docker pull riccoxie/meilisearch-ui:latestk8s 部署 apiVersion: v1 kind: Service metadata:name: meilisearch-uinamespace: meilisearch spec:type: NodePortselector:app: meilisearch-uiports:- port: 24900…...

编程日记 2025/7/15 12:39:43

关键词