??想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

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

前言

本次參賽的項(xiàng)目是基于openHarmony開發(fā)的北向應(yīng)用-少兒語(yǔ)言文化教育APP。從項(xiàng)目成立到初版成型再到參加比賽，這一路上遇到了不少困難，我也從團(tuán)隊(duì)協(xié)作、產(chǎn)品迭代、技術(shù)等方面學(xué)到了很多寶貴的經(jīng)驗(yàn)。感謝團(tuán)隊(duì)成員、UI設(shè)計(jì)組的努力工作和配合，得以在比賽截止前完成產(chǎn)品基本的功能，拿了三等獎(jiǎng)。比賽雖然已經(jīng)結(jié)束，但是我們會(huì)繼續(xù)朝著最終產(chǎn)品方向繼續(xù)努力。

目標(biāo)問題與意義價(jià)值

• 解決聯(lián)合國(guó)17項(xiàng)可持續(xù)發(fā)展目標(biāo)中的問題
  目標(biāo)4：優(yōu)質(zhì)教育
• 意義價(jià)值
  在如今數(shù)字經(jīng)濟(jì)的時(shí)代話語(yǔ)下，為了能向青少年兒童提供優(yōu)質(zhì)文化素質(zhì)教育，針對(duì)7-16歲兒童。我們基于openHarmony開發(fā)一款游戲互動(dòng)式教育APP，為他們提供以英語(yǔ)等語(yǔ)言為主的文化教育平臺(tái)。

項(xiàng)目介紹

演示：

演示視頻：??解決方案學(xué)生挑戰(zhàn)賽-游戲交互式少兒語(yǔ)言文化教育APP??

gitee倉(cāng)庫(kù)：??代碼倉(cāng)庫(kù)??APP部分頁(yè)面展示：

一、應(yīng)用場(chǎng)景

在家庭中，孩子可以利用父母手機(jī)和各種搭載OpenHarmony的智慧屏設(shè)備進(jìn)行便捷快速的沉浸式學(xué)習(xí)，在車?yán)锟梢源蜷_APP進(jìn)行歌曲欣賞或動(dòng)畫影片播放學(xué)習(xí)世界民俗文化。通過OpenHarmony分布式的特性，APP還支持多人學(xué)習(xí)互動(dòng)，多設(shè)備場(chǎng)景下，一方出題制作關(guān)卡另一方答題得分，更具趣味互動(dòng)性。

二、應(yīng)用架構(gòu)

整體架構(gòu)圖

應(yīng)用可分為學(xué)習(xí)闖關(guān)板塊、文化娛樂板塊、游戲激勵(lì)板塊。采用類Web開發(fā)js框架開發(fā)應(yīng)用前端界面，在產(chǎn)品內(nèi)容豐富后可配合后端數(shù)據(jù)庫(kù)、服務(wù)器為用戶呈現(xiàn)一款互動(dòng)游戲+教育功能相結(jié)合的教育APP。

• 學(xué)習(xí)闖關(guān)板塊
  （1）單人游戲闖關(guān)：目前APP有詞匯、聽力、語(yǔ)法三個(gè)學(xué)習(xí)闖關(guān)模塊，每個(gè)模塊分別用不同的游戲形式，讓用戶以游戲的方式完成答題和知識(shí)學(xué)習(xí)。每一模塊有各自的闖關(guān)地圖，用戶需在推薦的水平層級(jí)中從零通關(guān)，解鎖更多關(guān)卡。
  （2）多人互動(dòng)闖關(guān)：基于鴻蒙分布式能力，APP將在任意闖關(guān)中支持多人闖關(guān)，多人闖關(guān)分為PK模式和單向模式。具體操作方式為：一方作為出題方，設(shè)置通關(guān)分?jǐn)?shù)和題目，可在出題庫(kù)中選擇題目，也可自行出題；另一方作為答題方，以該闖關(guān)模塊的規(guī)則對(duì)題目進(jìn)行答題。答題結(jié)束后，若為單向模式，則根據(jù)分?jǐn)?shù)判斷是否通關(guān)；若為PK模式，雙方交換位置，對(duì)比最終分?jǐn)?shù)，分?jǐn)?shù)更高則獲得游戲幣。
• 文化娛樂板塊
  （1）形象趣味互動(dòng)：以一個(gè)人物形象IP為立足點(diǎn)（類似APP：會(huì)說話的Tom貓），為其增設(shè)豐富的互動(dòng)動(dòng)畫。主要技術(shù)點(diǎn)：canvas組件及其相關(guān)API，利用canvas畫布和計(jì)時(shí)器實(shí)現(xiàn)動(dòng)畫動(dòng)圖播放的效果；結(jié)合離屏渲染接口（offscreen）將圖片提前繪制再按需渲染，極大地提高了動(dòng)畫播放流暢度。

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(); //--- 把畫好的圖片轉(zhuǎn)為bitmap數(shù)據(jù)保存起來(lái)
list.push(bitmap)//---一張圖片對(duì)應(yīng)一個(gè)bitmap對(duì)象，多張圖片對(duì)應(yīng)一個(gè)動(dòng)作（數(shù)組）

具體實(shí)現(xiàn)原理可以參考??代碼倉(cāng)庫(kù)??。
APP首頁(yè)展示：
（2）以?shī)蕵贩绞綐?gòu)建世界文化觀： 用戶（兒童）在進(jìn)行詞匯、語(yǔ)法等學(xué)習(xí)時(shí)人物，形象會(huì)在其中互動(dòng)輸出相應(yīng)的文化小知識(shí)。

• 游戲激勵(lì)板塊
  （1）設(shè)立學(xué)習(xí)獎(jiǎng)勵(lì)機(jī)制：在任務(wù)、成就等模塊中，設(shè)有任務(wù)獎(jiǎng)勵(lì)、成就獎(jiǎng)勵(lì)。每當(dāng)用戶（兒童）完成教育板塊中相對(duì)應(yīng)的學(xué)習(xí)內(nèi)容，系統(tǒng)便予以獎(jiǎng)勵(lì)（以游戲幣、服裝、道具等多種形式），更好地激發(fā)兒童主動(dòng)學(xué)習(xí)的興趣。
  （2）利用形象激勵(lì)學(xué)習(xí)：用戶（兒童）通過闖關(guān)答題贏得游戲幣，游戲幣可在商城中為形象交易服裝和物品，或者越級(jí)解鎖關(guān)卡。除此之外，IP形象會(huì)跟隨用戶（兒童）不斷闖關(guān)答題，從幼態(tài)變成成年態(tài)，解鎖場(chǎng)景、共同成長(zhǎng)，讓孩子有被陪伴感。

UI交互設(shè)計(jì)

canvas動(dòng)效展示：

• 人物形象動(dòng)畫
  如上圖所示，主界面展示人物形象。我們?yōu)槠涮砑迂S富的動(dòng)作動(dòng)畫和綁定相應(yīng)的事件，使其具備與用戶互動(dòng)的能力。具體展示：解決方案學(xué)生挑戰(zhàn)賽-游戲交互式少兒語(yǔ)言文化教育APP。
• 各類icon
  icon由UI人員設(shè)計(jì)，并為icon添加點(diǎn)擊、拖拽等的觸屏事件
• 游戲闖關(guān)模式設(shè)計(jì)
  我們?yōu)閷W(xué)習(xí)闖關(guān)板塊設(shè)計(jì)了一系列互動(dòng)：
  其中已實(shí)現(xiàn)的“詞匯闖關(guān)"動(dòng)效開發(fā)實(shí)現(xiàn)，包括：

• 氣球上升動(dòng)畫
• 氣球及頂部計(jì)時(shí)器的暫停與再啟動(dòng)
• 氣球大小適配對(duì)應(yīng)單詞長(zhǎng)度
• 單詞選擇判斷、icon切換
• …

這一部分的邏輯涉及到定時(shí)器，點(diǎn)擊彈窗、組件動(dòng)效等多方面的前端技術(shù)，詳細(xì)的代碼說明就不在這展示了，可在??代碼倉(cāng)庫(kù)??中查看，解釋得比較詳細(xì)。

分布式互動(dòng)架構(gòu)

親子互動(dòng)方案：順應(yīng)多設(shè)備、全場(chǎng)景的時(shí)代，父母可在搭載鴻蒙系統(tǒng)的設(shè)備上與孩子實(shí)現(xiàn)教育互動(dòng)，如在詞匯學(xué)習(xí)中，父母在詞庫(kù)中選擇特定詞匯，通過rpc設(shè)備間通信能力和分布式數(shù)據(jù)庫(kù)將其同步在孩子的設(shè)備上，孩子可進(jìn)行實(shí)時(shí)拼寫測(cè)驗(yàn)。

利用分布式調(diào)度、流轉(zhuǎn)、數(shù)據(jù)庫(kù)等分布式軟總線能力實(shí)現(xiàn)親子教育互動(dòng)。

遺憾的是這一想法沒能在賽事期間全部完成，沒有給大家完整地展現(xiàn)到鴻蒙的分布式特性，后續(xù)有時(shí)間再補(bǔ)上。

結(jié)語(yǔ)

這是我和隊(duì)友們第一次參加鴻蒙相關(guān)的比賽，在比賽期間也是一步步摸索修復(fù)bug、擴(kuò)展功能，雖然提交的產(chǎn)品還有很多不足的地方，但是讓我收獲了很多寶貴的經(jīng)驗(yàn)。

??想了解更多關(guān)于開源的內(nèi)容，請(qǐng)?jiān)L問：??

??51CTO 開源基礎(chǔ)軟件社區(qū)??

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