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

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

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

20241231_210645-5652582.gif


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

一、功能说明

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

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

二、所需组件

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

三、项目结构

  • 项目名称FruitDropGame
  • 自定义组件名称FruitDropPage
  • 代码文件FruitDropPage.etsIndex.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; // 定时器ID
  private 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);
  }
}
AI 代码解读

2. 主入口文件
// 文件名:Index.ets

import {
    FruitDropPage } from './FruitDropPage';

@Entry
@Component
struct Index {
   
  build() {
   
    Column() {
   
      FruitDropPage() // 调用水果掉落页面
    }
    .padding(20);
  }
}
AI 代码解读

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

效果展示
20241231_210645-5652582.gif


五、代码解读

  1. 水果随机生成与移动

    • 使用 setInterval 定时生成水果,并动态更新位置。
  2. 状态管理与分数更新

    • 使用 @State 管理水果位置、篮子位置和分数状态,实现实时更新。
  3. 画布绘制逻辑

    • Canvas 组件结合 CanvasRenderingContext2D 绘制水果和篮子。
  4. 用户交互逻辑

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

六、优化建议

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

七、效果展示

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

八、相关知识点


小结

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


下一篇预告

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


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

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


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


目录
打赏
0
14
14
1
151
分享
相关文章
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
36 10
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
解锁鸿蒙装饰器:应用、原理与优势全解析
ArkTS提供了多维度的状态管理机制。在UI开发框架中,与UI相关联的数据可以在组件内使用,也可以在不同组件层级间传递,比如父子组件之间、爷孙组件之间,还可以在应用全局范围内传递或跨设备传递。
33 2
Harmony os next~UI开发与ArkUI框架
鸿蒙OS的UI开发基于ArkUI框架,采用声明式编程,简化开发流程。五大核心组件(Text、Button、List、Grid、Flex)助力高效布局,支持数据绑定与动态更新。事件响应机制灵敏,适合构建交互丰富的应用。实战技巧包括规范命名、样式复用和调试方法。掌握这些,轻松开发鸿蒙应用。下期预告:分布式开发,记得带上烤冷面!
20 0
探索HarmonyOS在智慧出行领域的AI类目标签应用
在科技飞速发展的今天,智慧出行成为交通领域的重要发展方向。HarmonyOS凭借强大的系统能力,为智慧出行注入新活力,特别是在AI类目标签技术的应用上。通过精准分类和标签化处理车辆、路况及出行者数据,AI类目标签技术提升了出行体验与交通管理效率。HarmonyOS的分布式软总线技术和隐私保护机制,确保了设备间的无缝连接与数据安全。实际应用中,该技术助力智能交通管理和个性化出行服务,为解决交通拥堵、优化资源配置提供了新思路。开发者也迎来了广阔的机遇与挑战,共同推动智慧出行的美好未来。
|
2月前
|
UED
「Mac畅玩鸿蒙与硬件52」UI互动应用篇29 - 模拟火车票查询系统
本篇教程将实现一个模拟火车票查询系统,通过输入条件筛选车次信息,并展示动态筛选结果,学习事件处理、状态管理和界面展示的综合开发技巧。
85 13
|
2月前
「Mac畅玩鸿蒙与硬件53」UI互动应用篇30 - 打卡提醒小应用
本篇教程将实现一个打卡提醒小应用,通过用户输入时间进行提醒设置,并展示实时提醒状态,实现提醒设置和取消等功能。
75 10
【鸿蒙 HarmonyOS】创建 Java 语言 HarmonyOS 手机应用 ( 首次进入 DevEco Studio 配置环境 | 创建 Java 手机工程 | 鸿蒙工程代码目录简介 )(二)
【鸿蒙 HarmonyOS】创建 Java 语言 HarmonyOS 手机应用 ( 首次进入 DevEco Studio 配置环境 | 创建 Java 手机工程 | 鸿蒙工程代码目录简介 )(二)
426 0
【鸿蒙 HarmonyOS】创建 Java 语言 HarmonyOS 手机应用 ( 首次进入 DevEco Studio 配置环境 | 创建 Java 手机工程 | 鸿蒙工程代码目录简介 )(二)
|
5天前
鸿蒙开发:V2版本装饰器@Once
@Once装饰器只能与@Param搭配使用,仅此一个组合,无其他使用方式,还有就是,必须在V2版本,也就是@ComponentV2装饰的自定义组件中,否则会报异常。
鸿蒙开发:V2版本装饰器@Once
|
2天前
|
鸿蒙开发:实现AOP代码插桩能力
正确的运用AOP,可以提升代码的模块化、复用性、可维护性和灵活性,同时降低了耦合度,使系统更易于扩展和维护。
25 13
鸿蒙开发:实现AOP代码插桩能力
|
6天前
鸿蒙开发:熟知@BuilderParam装饰器
在实际的开发中,我们经常会遇到自定义组件的情况,比如通用的列表组件,选项卡组件等等,由于使用方的样式不一,子组件是动态变化的,针对这一情况,就不得不让使用方把子组件视图传递过来,如何来接收这个UI视图,这就是@BuilderParam装饰器的作用。
鸿蒙开发:熟知@BuilderParam装饰器

物联网

+关注
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等