鸿蒙开发教你玩转数字填色游戏

鸿蒙开发教你玩转数字填色游戏

鸿蒙系统（HarmonyOS）是华为推出的一款面向全场景的分布式操作系统，具有跨平台兼容、低延迟、开放源代码等特点。这些特性使得鸿蒙系统在物联网领域具有巨大的发展潜力，也为游戏开发者提供了一个全新的开发平台。本文将通过一个简单的数字填色游戏开发教程，带你快速掌握鸿蒙游戏开发的基本技巧。

游戏功能说明

本教程将开发一个基础的数字填色游戏，包含以下核心功能：

1. 数字选择：用户点击数字按钮选择一个数字
2. 区域填色：选择数字后，点击区域进行填色，颜色根据数字变化
3. 颜色逻辑映射：通过逻辑映射，将数字和颜色关联
4. 清空重置：支持清空所有区域，恢复默认状态

开发环境准备

在开始开发之前，确保你已经安装了鸿蒙系统的开发环境：

1. 安装最新版本的DevEco Studio
2. 创建一个新的HarmonyOS项目

项目结构

项目名称：DigitalColoringGame
自定义组件名称：ColoringGamePage
代码文件：ColorMapping.ets、ColoringGamePage.ets、Index.ets

代码实现

1. 定义颜色映射

首先，我们需要定义一个颜色映射表，将数字与颜色关联起来：

// 文件名：ColorMapping.ets
export type ColorMapping = Record<number, string>;
export const colorMapping: ColorMapping = {
  1: '#FF0000', // 红色
  2: '#00FF00', // 绿色
  3: '#0000FF', // 蓝色
  4: '#FFFF00', // 黄色
  5: '#FF00FF', // 品红
};

2. 数字填色游戏页面

接下来，我们创建游戏页面组件：

// 文件名：ColoringGamePage.ets
import { colorMapping } from './ColorMapping';

@Component
export struct ColoringGamePage {
  @State selectedNumber: number = 0; // 当前选择的数字
  @State coloredAreas: number[] = Array(9).fill(0); // 每个区域的颜色状态
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(); // 创建 Canvas 渲染上下文

  // 选择数字
  selectNumber(num: number): void {
    this.selectedNumber = num; // 更新选中数字
  }

  // 填色区域
  fillArea(index: number): void {
    if (this.selectedNumber !== 0) {
      this.coloredAreas[index] = this.selectedNumber; // 更新颜色状态
      this.redrawCanvas(); // 重新绘制画布
    }
  }

  // 绘制初始画布
  drawInitialCanvas(): void {
    for (let i = 0; i < 9; i++) {
      const x = (i % 3) * 110; // 计算区域的 x 坐标
      const y = Math.floor(i / 3) * 110; // 计算区域的 y 坐标
      this.context.fillStyle = colorMapping[this.coloredAreas[i]] || '#FFFFFF'; // 设置填充颜色
      this.context.fillRect(x, y, 100, 100); // 绘制填充矩形
      this.context.strokeStyle = '#000000'; // 边框颜色
      this.context.strokeRect(x, y, 100, 100); // 绘制边框
    }
  }

  // 重新绘制画布
  redrawCanvas(): void {
    this.context.clearRect(0, 0, 330, 330); // 清空画布
    this.drawInitialCanvas(); // 重新绘制
  }

  // 重置游戏
  resetGame(): void {
    this.coloredAreas = Array(9).fill(0); // 清空状态
    this.selectedNumber = 0; // 重置选中数字
    this.redrawCanvas(); // 重置画布
  }

  build() {
    Column({ space: 20 }) {
      Text('数字填色游戏')
        .fontSize(24)
        .fontWeight(FontWeight.Bold)
        .alignSelf(ItemAlign.Center);

      // 显示填色区域
      Canvas(this.context)
        .width(330)
        .height(330)
        .onReady(() => {
          this.drawInitialCanvas(); // 初始化画布
        })
        .onTouch((event: TouchEvent) => {
          const touch = event.touches[0]; // 获取触控点
          const x = Math.floor(touch.x / 110); // 计算列索引
          const y = Math.floor(touch.y / 110); // 计算行索引
          const index = y * 3 + x; // 计算区域索引
          if (index >= 0 && index < 9) {
            this.fillArea(index); // 更新对应区域颜色
          }
        });

      // 数字选择按钮
      Row({ space: 10 }) {
        Button('1').onClick(() => this.selectNumber(1));
        Button('2').onClick(() => this.selectNumber(2));
        Button('3').onClick(() => this.selectNumber(3));
        Button('4').onClick(() => this.selectNumber(4));
        Button('5').onClick(() => this.selectNumber(5));
      }

      // 清空按钮
      Button('清空')
        .type(ButtonType.Danger)
        .onClick(() => this.resetGame());
    }
  }
}

运行和测试

1. 在DevEco Studio中运行项目
2. 使用模拟器或真机测试游戏功能
3. 确保所有交互逻辑正常工作

通过这个简单的数字填色游戏开发教程，你已经掌握了鸿蒙游戏开发的基本流程和关键技巧。鸿蒙系统的跨平台兼容性和低延迟特性，使得游戏开发更加高效和流畅。希望这个教程能激发你对鸿蒙开发的兴趣，鼓励你尝试开发更多有趣的游戏！