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

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

---

关键词

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

---

一、功能说明

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

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

---

二、所需组件

• @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);}
}

---

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

效果展示：

---

五、代码解读

1. 水果随机生成与移动

   • 使用 setInterval 定时生成水果，并动态更新位置。

2. 状态管理与分数更新

   • 使用 @State 管理水果位置、篮子位置和分数状态，实现实时更新。

3. 画布绘制逻辑

   • Canvas 组件结合 CanvasRenderingContext2D 绘制水果和篮子。

4. 用户交互逻辑

   • 通过按钮控制篮子左右移动，实时更新画布内容。

---

六、优化建议

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

---

七、效果展示

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

---

八、相关知识点

• 「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
來源：坚果派
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

---