基于H5的垃圾分類科普游戲設計研究

摘 要：近年來，依靠科普游戲形式開展教育引導工作受到公眾認可，通過分析相關文獻，并對當前的科普游戲進行廣泛研究，根據用戶需求設計了一款基于H5的垃圾分類科普游戲，能帶領大眾在趣味游戲中主動學習垃圾分類知識。作品以問答的形式測試用戶獲取知識情況，最大程度地強化科普教育的內容。研究創新了科普形式，拓寬了傳播渠道，增強了趣味性與參與感，給用戶帶來全新的體驗，有利于普及垃圾分類知識，在垃圾分類宣傳中具有一定的應用價值。

關鍵詞：科普游戲；垃圾分類；H5；知識傳播

中圖分類號：TP311 文獻標識碼：A 文章編號：2096-4706（2024）14-0121-04

Research on the Design of Garbage Classification Popular Science Game Based on H5

LI Qin， HUANG Shuai

（Wuchang Institute of Technology， Wuhan 430065， China）

Abstract： In recent years， relying on popular science games to carry out educational guidance work has been recognized by the public. Through analyzing relevant literature and conducting extensive research on current popular science games， a garbage classification popular science game based on H5 has been designed according to the users' needs， leading the public to actively learn garbage classification knowledge in fun games. The work tests the users' knowledge acquisition situation in the form of question and answer， maximizing the content of popular science education. The research innovates the form of popular science， expands dissemination channels， enhances fun and participation， brings new experiences to users， and is conducive to the popularization of garbage classification knowledge. It has certain application value in garbage classification promotion.

Keywords： popular science game; garbage classification; H5; knowledge dissemination

DOI：10.19850/j.cnki.2096-4706.2024.14.025

收稿日期：2024-01-15

基金項目：武昌工學院校級科學研究項目（2023KY12）

0 引 言

2020年7月1日起，《武漢市生活垃圾分類管理辦法》正式實施，在法律法規和社會氛圍的雙重作用下，武漢垃圾分類效果逐漸顯現，但在實際執行中卻依然存在分類達標率不高、居民主觀能動性不高的情況，分類的正確率真正能達標的只有30%至40%。分類投放是城市生活垃圾分類實施過程中最難且最不可控的環節，也是全民參與共治的集中體現[1]。可見繼續提升人們的垃圾分類知識水平，提高人們垃圾分類準確率的探索勢在必行。

近年來，依靠科普游戲形式開展教育引導工作受到大眾認可，設計H5垃圾分類科普游戲，既能有效削弱科普知識的嚴肅化，又能帶領大眾在趣味游戲中主動學習垃圾分類知識，在垃圾分類宣傳中具有一定應用價值。

截至2023年6月，我國網民規模為10.79億，互聯網普及率達76.4% [2]。網民人均每周上網時長為29.5個小時，使用手機上網的比例達99.8%，移動端的便捷高效給用戶帶來了非常舒適的體驗。基于此，H5技術下的產品憑借它傳播快速且便捷的優勢成為新媒體宣傳的一個不容小覷的媒介技術，它能夠提升用戶的互動性，增強代入感。H5技術最重要的一個特點就是具有社會化分享基因，微信、微博、網頁、各類短視頻平臺等渠道都可供H5推廣。

1 研究現狀

根據艾瑞咨詢的數據，2019年中國H5游戲市場規模達到了300億元人民幣，用戶規模超過4億。2020年，由于疫情的影響，人們在家的時間增多，H5游戲的用戶規模得到了進一步的提升。據QuestMobile的數據，2020年H5游戲的用戶規模達到了4.6億。預計到2024年，中國H5游戲市場的用戶規模將達到5.8億。

“騰訊太空科普”是騰訊在2021年中國航天日推出的一款H5游戲，用戶可以自行設計太空套房并賦予不同的功能標簽，如太空博物館、太空田園等，旨在通過DIY游戲的形式科普航天知識。“工傷預防知識競賽”是2022年由武漢人力資源局主辦開發的知識科普H5，為廣泛普及工傷保險法律法規，幫助大家了解工傷保險相關知識。“地圖小衛士”是由人民網評資源中國2021年發布，為了科普地理知識，強化國家版圖意識。

《“十四五”城鎮生活垃圾分類和處理設施發展規劃》提出，到2025年底，全國城市生活垃圾資源化利用率為60%左右[3]。垃圾分類是一種重要的環保行動，對資源回收利用、環境保護和人們環保意識的培養具有重要意義。本研究將針對垃圾分類科普游戲進行分析和設計，通過H5技術以及移動終端設備，將其應用在H5作品中，通過游戲來宣傳垃圾分類知識，培養和強化居民的垃圾分類意識[4]，使受眾在學習過程中感受科技與藝術的魅力，同時直面環境保護問題，有助于推動公眾對垃圾分類知識的了解與應用。

2 H5技術介紹

H5是指HTML5，是第五代超文本標記語言，被廣泛應用于網頁制作[5]。與以前的版本相比，H5具有更多交互和功能，最大的優點之一是在移動設備上的支持得到了增強[6]。同時，H5支持DOM Storage和Web SQL Database兩種存儲機制。其中，DOM Storage適用于具有key/value對的基本本地存儲；而Web SQL Database是適用于復雜的查詢、插入等操作的存儲方式。傳統的傳播媒介被動乏味，H5技術開發的作品具有很好的跨平臺性[7]，在移動端上支持多種平臺，傳播方式簡單快捷，用戶只需進入鏈接或掃描二維碼，就可以快速進入作品無須下載軟件[8]，方便用戶之間相互傳播。

H5技術大大增強了網頁的功能性和互動性，具有成本低、互動性強、可跨平臺使用等優勢[9]。將H5與垃圾分類進一步的結合，設計創建垃圾分類的沉浸式游戲與場景的交互，趣味性的設計，用游戲化的方式讓用戶沉浸其中[10]，使用戶在休閑娛樂的同時學習到相關科普知識。

3 設計實踐

3.1 音效設計

根據作品需要，在頁面合適位置設計了適當的音效，即一段旋律或一個聲音片段。根據特定的功能設置了不同的音效來強調和突出作品中的交互動作。使用輕音樂“Windy Hill.mp3”作為整個游戲的背景音樂，主題輕松愉快切合整體視覺風格。頁面具有音樂開關功能，在頁面的右上角設置了音樂開關圖標，點擊該圖標可以開和關，中間有杠代表關，否則為開。當垃圾被拖到正確的垃圾桶上會有成功的提示音，否則為失敗的提示音。

3.2 動效設計

直觀的手勢設計可以更好地幫助用戶操控H5頁面中的互動性插圖，并且得到用戶需要的信息。最常見的手勢主要有雙擊、單擊、上下滑動或左右滑動、長按屏幕、放大縮小屏幕、對物體進行拖動、搖晃終端，等等。開發者會根據手機H5頁面中不同的互動插圖的形式，選擇最適合其形式的手勢設計。在本作品中，使用了拖動、單擊、上下滑動等手勢。

3.3 頁面設計

頁面設計，既要考慮市面上大部分手機屏幕尺寸，還應考慮手機頁面的加載速度和用戶的等待時間。因此本作品設置像素應符合頁面基本像素的要求，控制各頁面的信息量，讓用戶在使用過程中能夠高效快速地進行簡單的操作，學習到垃圾分類的相關知識。

本項目的整體結構如圖1所示。技術架構方面，采用HTML5、CSS3和JavaScript前端技術來實現游戲的界面和交互邏輯，同時結合Canvas技術來實現游戲的渲染和動畫效果。在服務器端，使用Node.js等后端技術來處理游戲邏輯和數據存儲。頁面的設計包括元素位置設置、窗口大小設置、動畫設置、音頻設置等方面。

3.3.1 元素位置設置

元素位置設置的部分相關代碼如下：

position： absolute;

background： url（./assets/backgroundImg.png）;

background-size： 100% 100%;

z-index： 100;

這段代碼將元素的位置設置為絕對定位，即相對于最近的已定位祖先元素進行定位。如果沒有已定位的祖先元素，則相對于初始包含塊進行定位。設置元素的背景圖片為./assets/backgroundImg.png文件。設置背景圖片的大小為100%寬和100%高，即完全覆蓋整個元素。設置元素的層疊順序為100，表示該元素位于其他元素的上方。

3.3.2 窗口大小設置

窗口大小設置的部分相關代碼如下：

#game-container {

width： 100vw;

height： 100vh;

display： flex;

justify-content： space-evenly;

align-items： center;

flex-direction： column; }

在這段代碼中，元素的寬度被設置為視口寬度的100%，即占據整個屏幕寬度。元素的高度被設置為視口高度的100%，即占據整個屏幕高度。將元素的顯示方式設置為彈性布局，允許子元素在容器內進行靈活的排列和對齊。設置彈性布局中子元素的水平對齊方式為均勻分布，即子元素之間等距離地分布在容器的水平方向上。設置彈性布局中子元素的垂直對齊方式為居中對齊，即子元素在容器內垂直方向上居中對齊。設置彈性布局的方向為列方向，即子元素按照垂直方向排列。

3.3.3 動畫設置

根據生活垃圾分類標準，可回收垃圾主要包括廢紙、廢塑料、廢金屬、廢玻璃和廢織物等，這些垃圾在經過收集和處理后，可再次利用，例如書本、報紙、衣服、易拉罐和玻璃瓶都屬于可回收垃圾。有害垃圾是指對人體健康或者自然環境有直接或潛在危害的廢棄物，包括廢舊電池、水銀體溫計、過期藥品、殺蟲劑以及廢舊家電等。濕垃圾也被稱為有機垃圾，如剩飯剩菜、果核等。除了以上三類，剩余的垃圾被歸為干垃圾（其他垃圾），無再次利用價值，包括廢棄的紙張、塑料、玻璃、金屬和織物等。

本項目使用#trash-can-recyclable表示可回收垃圾，#trash-can-dry表示干垃圾，#trash-can-hazardous表示有害垃圾，#trash-can-wet表示濕垃圾。針對這四類對象分別設置元素的背景圖片及圖片大小。

以可回收垃圾為例，定義一個函數用于獲取頁面中ID為“trash-can-recyclable”的元素距離頁面頂部的距離。例如：

top：（） =>document.querySelector（'#trash-can-recyclable'）.offsetTop;

其中document.querySelector（'#trash-can-recyclable'）函數使用querySelector方法在頁面中查找ID為“trash-can-recyclable”的元素。offsetTop是一個屬性，表示元素相對于其最近的定位祖先元素的頂部偏移量。如果元素沒有定位祖先元素，則相對于整個文檔進行計算。最終該函數將返回“trash-can-recyclable”元素距離頁面頂部的距離。

接著，設計該元素的動畫效果：

@keyframes public {

0% {

top： 100vh;

}

100% {

top： 0;

}

}

這段代碼定義了一個名為“public”的關鍵幀動畫。關鍵幀動畫包含兩個階段：0%和100%。在0%階段，元素的頂部位置被設置為100 vh，即視口高度的100%。這意味著元素將位于頁面底部。在100%階段，元素的頂部位置被設置為0，即視口的頂部。這意味著元素將回到頁面頂部。通過這個關鍵幀動畫，可以實現一個元素從頁面底部到頁面頂部的平滑過渡效果。

3.3.4 音頻設置

音頻設置的部分相關代碼如下：

if（！（document.querySelector（'audio'）.paused））{

const audio = document.createElement（'audio'）

audio.src = `./assets/${state}.mp3`

audio.play（） }

這段代碼的作用是檢查頁面上是否有音頻元素正在播放，使用document.querySelector（'audio'）選擇頁面上的音頻元素。通過paused屬性判斷音頻元素是否處于暫停狀態，如果paused為false，表示音頻正在播放。如果音頻正在播放，則不執行任何操作。如果音頻沒有播放，則創建一個新的音頻元素，并將其賦值給變量audio。設置新創建的音頻元素的src屬性，使其指向指定路徑下的音頻文件。調用audio.play（）方法播放音頻。

3.4 場景設計

根據目前需要普及的垃圾分類知識，可分為：有害垃圾，可回收物，濕垃圾等。頁面中以不同顏色的垃圾桶醒目加以提示。背景以環保的綠色草原為主題，頁面的中間設計了“開始游戲”按鈕，如圖2所示。

單擊“開始游戲”按鈕，屏幕中間顯示待分類的垃圾圖片，用鼠標按住并拖拽垃圾圖片到相應垃圾桶中，如果投放正確則積分加1，如圖3所示。同時，垃圾拖拽到正確的垃圾桶上會有成功的提示音，拖到錯誤的垃圾桶為失敗的提示音，成功加1分，失敗不加分。

當投放錯誤時，會出現正確知識提示界面。當連續三次都投放錯誤時，會出現知識搶答環節，如圖4所示。若回答正確加2分，錯誤不加分。總共10道題，完成答題后，答題結果大于12分提示為分類達人，否則提示為分類小能手，如圖5所示。

本作品以問答的形式測試用戶獲取知識情況，最大限度地強化科普教育的內容。根據闖關模塊與答題模塊的成績統計計分，根據不同的分數生成相應等級的“垃圾分類衛士”證書，用戶可保存證書并分享至朋友圈或其他社交軟件。證書下方顯示本H5作品的二維碼，其他用戶可以掃描此二維碼快速進入本作品。

設計的科普游戲兼具趣味性與交互性，用戶通過垃圾分類小游戲的練習和對垃圾分類知識的學習，高效地接收相關知識，再以闖關答題的形式檢測掌握的垃圾分類知識程度，最后可以通過計分生成的證書將H5作品加以分享與傳播。

4 結 論

基于H5的垃圾分類科普游戲通過將垃圾分類進行藝術性的演繹吸引更多的公眾，引起大眾對垃圾分類的重視，從而正確地進行垃圾分類，為地球家園的環境做出貢獻。將科普游戲的趣味性與實用性相互融合，以交互的手法將項目藝術性地進行展示與表達，區別于傳統宣傳方式，寓教于樂，突破場地道具的限制，潛移默化地增強了公眾的垃圾分類意識。此次設計的H5作品中界面視覺設計還有待完善，圖像設計和色彩搭配稍顯呆板，不足以吸引用戶經常使用，下一步將對視覺表現方面和界面交互方面的系統性設計加以改進，以帶給用戶更好的體驗。

參考文獻：

[1] 蔣霞，于麗，張玥，等.城市生活垃圾分類政策執行中的問題與對策分析 [J].再生資源與循環經濟，2023，16（3）：24-28.

[2] 中國互聯網絡信息中心發布第52次《中國互聯網絡發展狀況統計報告》 [J].國家圖書館學刊，2023，32（5）：13.

[3] 國家發展改革委住房城鄉建設部.“十四五”城鎮生活垃圾分類和處理設施發展規劃 [EB/OL].（2021-05-06）.https：//www.gov.cn/zhengce/zhengceku/2021-05/14/content_5606349.htm.

[4] 袁恩培，張迪.游戲化思維下H5新聞類產品設計研究 [J].包裝工程，2018，39（16）：142-148.

[5] 周萍.H5在少兒期刊的應用 [J].數字技術與應用，2022，40（3）：128-130.

[6] 張源，劉志遠.基于HTML5的移動端產品推廣輕游戲設計與開發 [J].軟件導刊，2016，15（8）：53-56.

[7] 陳珍英.基于輕應用平臺和HTML5的Web APP游戲開發的探討 [J].數字技術與應用，2019，37（6）：174+176.

[8] 張曉雅.基于傳統海派花鳥畫數字化傳播的功能性H5游戲設計研究 [D].上海：華東理工大學，2020.

[9] 郭姝含.H5互動新聞游戲：《讀有聲報紙，贏灣區通行證》創作報告 [D].杭州：浙江傳媒學院，2019.

[10] 張耿，項洋.移動端游戲互動式H5廣告設計研究 [J].設計，2020，33（3）：131-133.

作者簡介：李勤（1978—），女，漢族，湖北武漢人，副教授，碩士研究生，研究方向：計算機應用技術；黃帥（2001—），男，漢族，湖北武漢人，本科在讀，研究方向：軟件工程。