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

简介: 本篇教程将带你实现一个数字填色小游戏,通过简单的交互逻辑,学习如何使用鸿蒙开发组件创建趣味性强的应用。

本篇教程将带你实现一个数字填色小游戏,通过简单的交互逻辑,学习如何使用鸿蒙开发组件创建趣味性强的应用。

20241230_213850.gif20241230_213850.gif


关键词
  • UI互动应用
  • 数字填色
  • 动态交互
  • 逻辑判断
  • 游戏开发

一、功能说明

数字填色小游戏包含以下功能:

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

二、所需组件

  • @Entry@Component 装饰器
  • Canvas 组件用于绘制填色区域
  • RowColumn 布局组件
  • Button 组件用于选择数字和重置操作
  • @State 修饰符用于状态管理

三、项目结构

  • 项目名称DigitalColoringGame
  • 自定义组件名称ColoringGamePage
  • 代码文件ColorMapping.etsColoringGamePage.etsIndex.ets

四、代码实现

1. 定义颜色映射
// 文件名:ColorMapping.ets

export type ColorMapping = Record<number, string>;

export const colorMapping: ColorMapping = {
   
  1: '#FF0000', // 红色
  2: '#00FF00', // 绿色
  3: '#0000FF', // 蓝色
  4: '#FFFF00', // 黄色
  5: '#FF00FF', // 品红
};
AI 代码解读

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 }) {
   
        ForEach([1, 2, 3, 4, 5], (num: number) => {
   
          Button(`${
     num}`)
            .width(60)
            .height(60)
            .backgroundColor(colorMapping[num])
            .onClick(() => this.selectNumber(num)); // 选择数字
        });
      }

      // 重置按钮
      Button('重置')
        .onClick(() => this.resetGame()) // 重置游戏
        .margin({
    top: 20 })
        .width(100)
        .height(50);
    }
    .padding(20)
    .width('100%')
    .height('100%');
  }
}
AI 代码解读

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

import {
    ColoringGamePage } from './ColoringGamePage';

@Entry
@Component
struct Index {
   
  build() {
   
    Column() {
   
      ColoringGamePage() // 调用数字填色游戏页面
    }
    .padding(20);
  }
}
AI 代码解读

效果示例:通过选择数字并点击区域,填充颜色,享受填色游戏的乐趣。

效果展示
20241230_213850.gif20241230_213850.gif


五、代码解读

  1. 颜色映射逻辑

    • ColorMapping.ets 文件使用 Record<number, string> 定义数字到颜色的映射关系,便于扩展和管理。
  2. 区域填色逻辑

    • fillArea() 方法根据当前选择的数字,为指定区域填色,实时更新画布。
  3. 数字选择与重置

    • 通过 selectNumber() 方法更新用户选择的数字,resetGame() 方法一键清空填色区域并恢复默认状态。
  4. 状态管理

    • 使用 @State 修饰符管理 selectedNumbercoloredAreas,实现组件状态和界面的实时联动。

六、优化建议

  1. 添加“未填色提示”,如动态高亮未填区域。
  2. 支持保存填色进度以便后续继续。
  3. 提供不同的配色主题,增强游戏的趣味性。

七、效果展示

  • 数字选择与区域填色:用户点击数字按钮并点击区域,实现数字填色。
  • 清空重置:一键清空所有区域,重新开始游戏。

八、相关知识点


小结

通过本篇教程,用户掌握了使用鸿蒙组件实现数字填色小游戏的核心方法,进一步提升了开发互动性应用的能力。


下一篇预告

在下一篇「UI互动应用篇27 - 水果掉落小游戏」中,我们将学习如何实现一个互动性更强的水果掉落小游戏,增强用户的娱乐体验。


上一篇: 「Mac畅玩鸿蒙与硬件48」UI互动应用篇25 - 简易购物车功能实现

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


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


目录
打赏
0
20
20
0
151
分享
相关文章
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
170 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
34 10
【03】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-测试hello word效果-虚拟华为手机真机环境调试-为DevEco Studio编译器安装中文插件-测试写一个滑动块效果-介绍诸如ohos.ui等依赖库-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
UI-TARS Desktop 是一款基于视觉语言模型的 GUI 代理应用,支持通过自然语言控制电脑操作,提供跨平台支持、实时反馈和精准的鼠标键盘控制。
686 17
用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
Harmony os next~UI开发与ArkUI框架
鸿蒙OS的UI开发基于ArkUI框架,采用声明式编程,简化开发流程。五大核心组件(Text、Button、List、Grid、Flex)助力高效布局,支持数据绑定与动态更新。事件响应机制灵敏,适合构建交互丰富的应用。实战技巧包括规范命名、样式复用和调试方法。掌握这些,轻松开发鸿蒙应用。下期预告:分布式开发,记得带上烤冷面!
19 0
|
2月前
|
UED
「Mac畅玩鸿蒙与硬件52」UI互动应用篇29 - 模拟火车票查询系统
本篇教程将实现一个模拟火车票查询系统,通过输入条件筛选车次信息,并展示动态筛选结果,学习事件处理、状态管理和界面展示的综合开发技巧。
85 13
|
2月前
「Mac畅玩鸿蒙与硬件53」UI互动应用篇30 - 打卡提醒小应用
本篇教程将实现一个打卡提醒小应用,通过用户输入时间进行提醒设置,并展示实时提醒状态,实现提醒设置和取消等功能。
75 10
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
Vue Amazing UI 是一个基于 Vue 3、TypeScript、Vite 等最新技术栈开发构建的现代化组件库,包含丰富的 UI 组件和常用工具函数,并且持续不断维护更新中。另外,组件库全量使用 TypeScript,支持自动按需引入和 Tree Shaking 等,能够显著提升开发效率,降低开发成本。
45 5
Vue Amazing UI 组件库(Vue3+TypeScript+Vite 等最新技术栈开发)
鸿蒙NEXT开发声明式UI是咋回事?
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。
232 3
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
2204 2
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)

物联网

+关注
AI助理

你好,我是AI助理

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