正文 

当前位置： 首页 > 开发 > java教程

#打卡不停更#ffhopenharmony学生挑战赛分享-少儿语言教育app(代码片段)

author author     2022-12-05     165

关键词：

Openharmony学生挑战赛经验分享

前言

本次参赛的项目是基于openHarmony开发的北向应用-少儿语言文化教育APP。从项目成立到初版成型再到参加比赛，这一路上遇到了不少困难，我也从团队协作、产品迭代、技术等方面学到了很多宝贵的经验。感谢团队成员、UI设计组的努力工作和配合，得以在比赛截止前完成产品基本的功能，拿了三等奖。比赛虽然已经结束，但是我们会继续朝着最终产品方向继续努力。

目标问题与意义价值

  • 解决联合国17项可持续发展目标中的问题

    目标4：优质教育

  • 意义价值

    在如今数字经济的时代话语下，为了能向青少年儿童提供优质文化素质教育，针对7-16岁儿童。我们基于openHarmony开发一款游戏互动式教育APP，为他们提供以英语等语言为主的文化教育平台。

项目介绍

演示：

演示视频：解决方案学生挑战赛-游戏交互式少儿语言文化教育APP

gitee仓库：代码仓库 APP部分页面展示：

一、应用场景

在家庭中，孩子可以利用父母手机和各种搭载OpenHarmony的智慧屏设备进行便捷快速的沉浸式学习，在车里可以打开APP进行歌曲欣赏或动画影片播放学习世界民俗文化。通过OpenHarmony分布式的特性，APP还支持多人学习互动，多设备场景下，一方出题制作关卡另一方答题得分，更具趣味互动性。

二、应用架构

整体架构图

应用可分为==学习闯关板块==、==文化娱乐板块==、==游戏激励板块==。采用类Web开发js框架开发应用前端界面，在产品内容丰富后可配合后端数据库、服务器为用户呈现一款互动游戏+教育功能相结合的教育APP。

  • 学习闯关板块 （1）单人游戏闯关：目前APP有词汇、听力、语法三个学习闯关模块，每个模块分别用不同的游戏形式，让用户以游戏的方式完成答题和知识学习。每一模块有各自的闯关地图，用户需在推荐的水平层级中从零通关，解锁更多关卡。 （2）多人互动闯关：基于鸿蒙分布式能力，APP将在任意闯关中支持多人闯关，多人闯关分为PK模式和单向模式。具体操作方式为：一方作为出题方，设置通关分数和题目，可在出题库中选择题目，也可自行出题；另一方作为答题方，以该闯关模块的规则对题目进行答题。答题结束后，若为单向模式，则根据分数判断是否通关；若为PK模式，双方交换位置，对比最终分数，分数更高则获得游戏币。

  • 文化娱乐板块 （1）形象趣味互动：以一个人物形象IP为立足点（类似APP：会说话的Tom猫），为其增设丰富的互动动画。主要技术点：canvas组件及其相关API，利用canvas画布和计时器实现动画动图播放的效果；结合离屏渲染接口（offscreen）将图片提前绘制再按需渲染，极大地提高了动画播放流畅度。

var offscreen = new OffscreenCanvas(w, h); //---屏下画布宽高大小w、h
var offscreenCanvasCtx = offscreen.getContext("2d");
offscreenCanvasCtx.drawImage(img, obj.x, obj.y, w, h);
bitmap = offscreen.transferToImageBitmap(); //--- 把画好的图片转为bitmap数据保存起来
list.push(bitmap)//---一张图片对应一个bitmap对象，多张图片对应一个动作（数组）

具体实现原理可以参考代码仓库。 APP首页展示： （2）以娱乐方式构建世界文化观： 用户（儿童）在进行词汇、语法等学习时人物，形象会在其中互动输出相应的文化小知识。

  • 游戏激励板块 （1）设立学习奖励机制：在任务、成就等模块中，设有任务奖励、成就奖励。每当用户（儿童）完成教育板块中相对应的学习内容，系统便予以奖励（以游戏币、服装、道具等多种形式），更好地激发儿童主动学习的兴趣。 （2）利用形象激励学习：用户（儿童）通过闯关答题赢得游戏币，游戏币可在商城中为形象交易服装和物品，或者越级解锁关卡。除此之外，IP形象会跟随用户（儿童）不断闯关答题，从幼态变成成年态，解锁场景、共同成长，让孩子有被陪伴感。

UI交互设计

==canvas动效展示==

  • 人物形象动画 如上图所示，主界面展示人物形象。我们为其添加丰富的动作动画和绑定相应的事件，使其具备与用户互动的能力。具体展示：解决方案学生挑战赛-游戏交互式少儿语言文化教育APP。

  • 各类icon icon由UI人员设计，并为icon添加点击、拖拽等的触屏事件

  • 游戏闯关模式设计 我们为学习闯关板块设计了一系列互动： 其中已实现的“词汇闯关"动效开发实现，包括：

    • 气球上升动画
    • 气球及顶部计时器的暂停与再启动
    • 气球大小适配对应单词长度
    • 单词选择判断、icon切换
    • ...............

这一部分的逻辑涉及到定时器，点击弹窗、组件动效等多方面的前端技术，详细的代码说明就不在这展示了，可在代码仓库中查看，解释得比较详细。

分布式互动架构

亲子互动方案：顺应多设备、全场景的时代，父母可在搭载鸿蒙系统的设备上与孩子实现教育互动，如在词汇学习中，父母在词库中选择特定词汇，通过rpc设备间通信能力和分布式数据库将其同步在孩子的设备上，孩子可进行实时拼写测验。

遗憾的是这一想法没能在赛事期间全部完成，没有给大家完整地展现到鸿蒙的分布式特性，后续有时间再补上。

结语

这是我和队友们第一次参加鸿蒙相关的比赛，在比赛期间也是一步步摸索修复bug、扩展功能，虽然提交的产品还有很多不足的地方，但是让我收获了很多宝贵的经验。

最后感谢社区和举办方给我们支持和展示的机会，同时还要感谢队友在作品迭代时不厌其烦地调试代码、互相帮助。这一次的参赛经历将作为新的起点，开启我们新的征程！

想了解更多关于开源的内容，请访问：​​

​​51CTO 开源基础软件社区​​

​​https://ost.51cto.com/#bkwz​​

#打卡不停更#智能喂食器(代码片段)

一、介绍​随着人们生活方式的不断改变，宠物猫在许多家庭中占有重要的地位，其凭借独立的个性和易于打理的饲养方式，成为当下上班族喜欢的宠物之一，人们更是把宠物猫和狗作为家庭的重要成员。有铲屎官表示，每月在... 查看详情

#打卡不停更#-openharmony/docs开发入门(代码片段)

作者：朱子道杨成前言不管是作为软件开发的爱好者还是已经从事软件开发这个行业的从业者，对于接触一种全新的系统OpenHarmony。学习OpenHarmony，需要清楚OpenHarmony这个系统是什么，能干什么，今日分享从设备开发和应用开发两... 查看详情

#打卡不停更#openharmony-应用开发入门指南(代码片段)

作者：余香鑫前言了解OpenHarmony能够开发一些简单的OpenHarmony应用一、了解OpenHarmonyOpenHarmony是由开放原子开源基金会(OpenAtomFoundation)孵化及运营的开源项目,目标是面向全场景、全连接、全智能时代,搭建一个智能终端设备操作系统... 查看详情

#打卡不停更#家庭健康管理平台(代码片段)

0.项目简介身体健康是一切生产生活的硬性基础。健康是福，一切安好，未来才可期。为什么经常跑步体重缺还在往上飘？突发紧急情况怎么处理？在数字时代，如何更好的为人们提供健康福祉、普及健康知识？如何进一步驱动... 查看详情

挑战100天不停更hivesql第24天-累计去重(代码片段)

🌿挑战100天不停更，刷爆hivesql🧲详情请点击🔗我的专栏🖲,共同学习,一起进步~文章目录🌿挑战100天不停更，刷爆hivesql🧲NUM:第24天-累计去重🧨刷题~~🧨🎈表结构🎉建表👓问... 查看详情

#打卡不停更#ffh浅析ability框架中stage模型与fa模型的差异(代码片段)

(#打卡不停更#【FFH】浅析Ability框架中Stage模型与FA模型的差异)Aility框架概述Ability是应用所具备能力的抽象，也是应用程序的基本组成单元。OpenHarmony与HarmonyOS的应用程序APP由一个或多个Hap包组成，每个Hap可以包含一个或多个Abilit... 查看详情

#打卡不停更#[图文并茂]packstack部署train版openstack(代码片段)

Packstack部署openstack-train介绍如何在centos7.9中使用packstack部署openstack-train。首先需要安装一个最小化安装的centos7.9，按照你的网络环境配置好网络，然后重启。这里我的环境是VMware虚拟机，ip是192.168.10.30.首先我们需要关闭防火墙... 查看详情

#打卡不停更#harmonyos基于arkui(ets)实现雷达扫描(代码片段)

作者：杨尚晓前言雷达扫描是一个比较有科技感的东西，对于科幻迷来说，科幻电影里基本都能看到的画面，一个大大的屏幕上,可以看到雷达扫描的绿幕效果。下面我们使用三种方式来实现这样的雷达效果。项目说明工具版本... 查看详情

#打卡不停更#harmonyos-基于arkui（js）实现虚拟摇杆组件(代码片段)

作者：杨尚晓前言虚拟摇杆在移动端游戏中是最常见看的，用来实现游戏中的精灵移动。本案例中使用jspai中的div和image组件来实现的虚拟摇杆组件，然后监听touch事件获取滑动的方向和位置x，y。开发环境说明工具版本：OpenHarmon... 查看详情

#打卡不停更#openharmony数据转码应用开发实战（上）(代码片段)

背景OpenHarmony的应用开发支持C++、JS、eTS，从已有版本的演进路线来看，eTS是未来重点的技术路线。对于刚入门OpenHarmony应用开发的小伙伴来说，eTS可能比较陌生，如果有一个合适的实战项目来练手，那么对技术能力提升是非常有... 查看详情

基于stm32的串口收发讲解（hal库）#打卡不停更#(代码片段)

(基于STM32的串口收发程序（HAL库）)介绍串口（UART通用异步收发器，TTL）通讯是一种设备间的串行全双工通讯方式。由于UART是异步传输，没有传输同步时钟，为了保证数据的正确性，UART采用16倍数据波特率的时钟进行采样。因为... 查看详情

#打卡不停更#harmonyos-基于arkui(ets)实现心电图组件(代码片段)

作者：杨尚晓前言随着大家生活水平的提升，越来越多的人注重自身身心健康，养生成了目前比较热门的活动。心电图是检测心脏活动状态的直观表现，可以通过心电图来观察人提的健康状况。响应鸿蒙万物互联的口号，肯定少... 查看详情

#打卡不停更#三方库移植之napi开发[4]异步调用:callback&promise(代码片段)

三方库移植之NAPI开发系列文章《HelloOpenHarmonyNAPI》、《C/C++与JS的数据类型转换》其接口都是同步的。对IO、CPU密集型任务需要异步处理。NAPI支持异步模型，提供了Promise、Callback2种方式。往期回顾：三方库移植之NAPI开发[1]—HelloO... 查看详情

#打卡不停更#编译效率快三倍,使用wsl2编译openharmony嘎嘎得劲!!(代码片段)

笔者发现使用wsl（WindowsSubsystemforLinux，适用于Linux的Windows子系统）编译openharmony镜像比传统虚拟机快3倍以上。编译环境换成wsl后，编译ohos只需要传统虚拟机上三分之一的时间。下面分享使用经验如下：(目录)为什么使用WSL2比传... 查看详情

#打卡不停更#openharmony-arkui（ts）声明式开发之列表拖动排列(代码片段)

作者：梁青松项目介绍本项目基于OpenHarmony的ArkUI框架：TS扩展的声明式开发范式，关于语法和概念直接看官网官方文档地址：基于TS扩展的声明式开发范式，因为OpenHarmony的API相对于HarmonyOS的API，功能上比较完善和成熟的，有些... 查看详情

#打卡不停更#简单的js鸿蒙小游戏——飞行棋之游戏逻辑(代码片段)

前言我们之前完成了游戏的基本布局，今天我们接着来讲下如何实现飞行棋的游戏逻辑。游戏逻辑掷骰子：随机地掷出点数1~6，根据骰子点数和当前阵营的棋子状态改变对应棋子的disabled属性，以控制该棋子是否可交互移动，若... 查看详情

#打卡不停更#三方库移植之napi开发[3]通过ide开发napi工程(代码片段)

在三方库移植之NAPI开发[1]—HelloOpenHarmonyNAPI一文中，笔者开发的是一个rom包的napi工程。该工程需要编译烧录固件，C++的动态库会集成到开发板的ROM中。在本篇文章中，笔者使用三方库移植之NAPI开发[1]—HelloOpenHarmonyNAPI中一样的he... 查看详情

#打卡不停更#简单的js鸿蒙小游戏——飞行棋之页面构建(代码片段)

前言飞行棋大家应该都玩过吧，红、绿、黄、蓝四名玩家轮流掷骰子移动棋子，争先到达终点，期间还要提防己方棋子不被击落。今天就先带大家学习下如何完成飞行棋游戏的简单布局。项目结构页面构建游戏的布局并不复杂，... 查看详情