「Mac畅玩鸿蒙与硬件50」UI互动应用篇27

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

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

在这里插入图片描述

关键词

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; // 定时器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);
  }
}

2. 主入口文件

// 文件名：Index.ets

import { FruitDropPage } from './FruitDropPage';

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