??想了解更多關于開源的內容，請訪問：??

??51CTO 開源基礎軟件社區??

??https://ost.51cto.com??

前言

本次參賽的項目是基于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??。