基于HTML5的移動端產品推廣輕游戲設計與開發

張源+劉志遠

摘 要：隨著HTML5技術的成熟以及新媒體營銷方式的普及，基于HTML5技術的新媒體營銷推廣方式逐漸占據各大主流手機瀏覽器和移動社交平臺。為尋求一種高效快速的新媒體營銷推廣策略，提出了以HTML5輕游戲為載體進行產品或品牌推廣的方案。采用HTML5技術和jQuery技術，設計了“金猴送福”游戲，并以該游戲為例，論述了此類游戲的設計思想、技術手段、開發流程以及品牌和產品廣告植入策略。

關鍵詞關鍵詞：HTML5；輕游戲；游戲設計；產品推廣

DOIDOI：10.11907/rjdk.161876

中圖分類號：TP319

文獻標識碼：A 文章編號：1672-7800（2016）008-0053-03

0 引言

HTML5作為新一代的Web標準，能夠很好地支持視頻、音頻、動畫與圖片等元素的交互，并具有跨平臺特性，因此使得移動端網頁游戲的設計與開發成為可能。被大眾廣泛熟知的“圍住神經貓”、“瘋狂手指”、“數鈔票”等都是基于HTML5開發的移動端輕游戲。這些輕游戲利用其自身的跨平臺性、自適應網頁設計、高傳播率等特點在短時間內得到大范圍的傳播，并實現用戶數的幾何式增長，但由于HTML5輕游戲具有短時效性，這又使得用戶的留存率極低并難以將現有的巨大用戶量在短時間內變現。利用HTML5設計一款適合于產品或品牌推廣的移動端輕游戲，在企業營銷方面具有極大的商業價值。

1 HTML5輕游戲

“輕游戲”是一個比較泛的概念，它所涉及的范圍較廣，像社交游戲、手機小游戲等這些可以做到隨時體驗、操作簡單、耗費流量少、付費門檻低的游戲產品都可歸入“輕游戲”的范疇。

隨著HTML5技術的興起，以HTML5編寫的輕游戲開始流行，HTML5輕游戲相對于傳統的輕游戲，除了具有“輕操作”、“輕時間”、“輕流量”、“輕資費”這4個基本特征外，還具有跨平臺性、即時更新性以及高效的傳播速率這三大特性。HTML5輕游戲的本質是基于HTML5技術的輕度化的網頁游戲，可以與傳統輕量級的安卓游戲、iOS游戲實現同等效果，在無需下載安裝的情況下可直接運行在各手機平臺的瀏覽器以及微信、QQ空間等社交應用軟件中，并且開發者可以通過對后臺代碼的維護實現游戲的實時更新。HTML5輕游戲可以與社交軟件進行深度結合，增加社交好友之間的互動性和提高社交軟件的豐富性，一旦游戲激起用戶興趣，便可基于社交軟件所具有的分享功能在短時間內實現高效快速的傳播，甚至實現用戶群體的幾何式爆炸性增長。基于這些特性，HTML5輕游戲除了具有游戲自身的功能之外還有相當大的商用價值，它既可以應用于教育教學，也可以用于產品推廣、廣告傳播以及品牌塑造，甚至在一定程度上會改變產品和品牌的傳統推廣模式。

2 HTML5輕游戲“金猴送?！痹O計

“金猴送?！庇螒蚴且粋€運行于微信等手機社交軟件客戶端的以猴年春節送祝福為主題的HTML5輕游戲。在游戲中用戶通過點擊屏幕上方掉落的水果、福字等圖標來獲取積分，游戲時間為1分鐘，如果點到上方掉落的石頭、炸彈等游戲將會提前結束。游戲結束后會根據用戶所得分數的高低顯示不同的祝福語。

2.1 設計思想

（1）游戲設計與熱點事件相結合，充分考慮了用戶分享的積極性。“金猴送福”游戲借助于猴年春節這個熱點事件激發用戶對游戲的興趣，使用戶以一種更主動的方式去參與到游戲中，同時用戶可以通過分享游戲中的祝福語以更加新穎的方式送出自己最真摯的祝福。

（2）游戲設計與產品或品牌推廣相結合。在保證用戶體驗的基礎上“金猴送?！庇螒虿捎昧藦V告軟植入的方式進行產品或品牌推廣，使用戶可以在玩游戲的同時受到潛移默化的影響，實現產品或品牌的推廣。

（3）游戲設計充分利用用戶碎片化時間?！敖鸷锼透！鳖A定游戲時間為1分鐘，用戶可在任何閑暇時間或無聊的時候打開游戲進行體驗，不耽誤用戶的日常生活事宜，還能為用戶帶來娛樂體驗。

2.2 關鍵技術

2.2.1 HTML5技術

作為新一代的Web標準，與過去的 HTML4 或 XHTML 相比，HTML5更加注重對頁面結構和含義的思考，其新添加的語義元素，使頁面結構更加合理清晰，代碼更加簡潔、健壯[1]。HTML5實現了對視頻和音頻的支持，并在制定過程中充分考慮了移動設備的應用，利于移動端手機網頁的開發，其Canvas標簽為網頁游戲的開發提供了強有力的支持，開發者可以拋棄原有的Flash開發方案，使游戲開發變得更加安全與高效。

2.2.2 jQuery技術

jQuery是一個兼容CSS3和各種瀏覽器的免費的、開源的輕量級JS庫。jQuery技術是繼Prototype之后又一個優秀的JavaScript框架，該框架實現了“HTML、JavaScript、CSS三者分離[2]。jQuery的核心理念是寫的更少，做的更多，其語法設計簡單，并有許多成熟的插件支持，可使用戶在網頁開發過程中更方便地處理HTML代碼，實現網頁動畫效果和Ajax交互等。利用jQuery豐富的函數庫，可以減少代碼的重復編寫及DOM腳本庫的調用，而只用關注程序邏輯的實現，利用盡可能少的代碼實現想要實現的功能[3]。

2.3 品牌和產品廣告植入策略

“金猴送福”游戲的本質是一款廣告游戲。廣告游戲是利用人們對游戲的一種天生愛好心理和游戲本身的互動性、新鮮感來吸引消費者，把廣告內容通過合理的策劃巧妙地隱藏在游戲場景中，讓消費者在玩游戲的過程中接受廠商傳送的信息，從而達到傳遞廣告信息的核心目的[4]。游戲設計中主要有以下兩種廣告植入策略：①以品牌或產品的自身形象為設計原型，對游戲情節進行合理有趣的設計，使品牌或產品形象貫穿整個游戲過程；②以傳統游戲為載體，通過對游戲界面或情節的再設計，將品牌圖標、產品卡通形象等與產品或品牌相關的游戲元素植入到游戲界面中。

“金猴送福”游戲采用第二種廣告植入策略，并在以下3個頁面中進行廣告軟植入：①游戲開始界面加入品牌圖標；②游戲界面加入與產品或品牌相關的游戲元素；③游戲分享界面加入相關產品或品牌的微信公眾號、微博賬號和二維碼圖片。

3 “金猴送?！庇螒蜷_發

3.1 開發流程

常見的游戲開發過程可以分為兩個主要階段：項目準備階段和項目研發階段。在項目準備階段，項目的主要目標是將策劃出來的游戲想法設計成有計劃、有組織的開發計劃[5]；在項目研發階段，主要是對項目開發計劃的執行，將游戲的各功能點依次實現，通過不斷調試達到最終上線要求。典型的游戲開發流程如圖1所示。

3.2 功能實現

3.2.1 游戲主要界面實現

“金猴送?！庇螒蛑饕?個界面組成，分別是主界面、規則界面、游戲界面、游戲結束界面和分享界面。這5個界面構成了整個游戲框架，它們存在于同一個HTML文件中，每個界面都是一個div塊，通過CSS display屬性設置主界面為默認顯示，其它界面隱藏，并通過button和JS實現不同界面的轉換。

3.2.2 自適應手機屏幕實現

手機網頁相對于傳統PC網頁而言，其所要適應的屏幕更小，而且不同品牌的手機以及同一品牌不同型號的手機屏幕尺寸都有很大不同，要想使游戲做到跨平臺自適應就需要對網頁進行自適應設計。網頁的自適應設計主要包括兩部分，一是網頁以及網頁中各元素的尺寸自適應不同規格的手機屏幕，二是網頁各元素的位置自適應不同規格的手機屏幕。其中實現網頁及各元素尺寸的自適應是通過用百分比設置網頁的width和height屬性實現，而網頁元素的自適應則需要position：fixed屬性來設置。position：fixed是以body為定位時的對象，它總是根據瀏覽器的窗口來對元素進行定位，最后通過百分比來設置"left"、 "top"、 "right"、 "bottom" 中的一至多個屬性來確定好元素的最終位置。由于同一網頁的同一位置可能出現多個元素，因而還需要用z-index屬性來設置元素的堆疊順序，以實現期望的效果。

#start-page-word{

width：70%；

height：40%；

position：fixed；

left：21%；

top：21%；

z-index：-1；

}

3.2.3 計時器實現

HTML5輕游戲的基本特性就是輕時間，它強調利用用戶的碎片化時間。“金猴送?！庇螒蛟谠O計中所設定的時間為1分鐘，并在用戶碰到石頭或炸彈時自動停止計時，為實現時間上的控制，需要加入一個時間控制器，此控制器通過setTimeout（）函數和clearTimeout（）函數對clock（）函數的遞歸調用來實現。setTimeout（）函數每隔一秒對clock（）函數遞歸調用一次，實現時間按秒變動，當游戲結束時用clearTimeout（）函數終止對clock（）函數的調用，實現時間停止功能，在實現時間變動的同時還要通過add0（）函數對0～9這些個位數字進行加0補位，實現類似于01：00的計時效果。

function clock（）{

if（（second==0&&minute==0）||isGameOver）{

clearTimeout（"clock（）"，1000）；

if（second==0&&minute==0）{

showEndPage（）；

}

}else{

setTimeout（"clock（）"，1000）；//每隔一秒實行一次遞歸調用，實現時間的變動

}

$（"#timer"）.text（"剩余時間："+add0（minute）+"："+add0（second））；

if（minute==1）{

minute--；

second=59；

}else{

second--；

}

}

3.2.4 水果、福字、石頭、炸彈添加

水果、福字、石頭、炸彈的添加是整個游戲最重要的部分，也是整個游戲的基礎。這些圖標的出現主要分為4個函數，分別是添加水果與福的函數add_friutes（），添加石頭與炸彈的函數add_stones（），控制水果和石頭出現速度和數量的函數control_f_s（）和對水果、福字、石頭、炸彈出現的數量以及速度的協調控制函數add_fruites_stone（）。水果、福字、石頭、炸彈的添加是通過JS代碼向頁面中添加HTML代碼實現，通過fruites_name（）函數實現水果、福字的隨機變換以及用location_X（）函數實現水果、福字、石頭、炸彈隨機出現的位置。水果和石頭出現的速度和數量是在control_f_s（）函數中通過setTimeout（）函數對add_friutes（）、add_stones（）的調用實現。所有圖標出現的速度與數量均以分數作為基礎，隨著分數越來越高，炸彈和石頭數量出現的比例變大，而所有圖標下落的速度也會增快，相應的游戲難度也會隨之增加。在游戲結束時通過clearTimeout（）函數停止水果、福字、石頭、炸彈的添加。

function control_f_s（stone_num）{//stone_num=2，3，4，4

for（var i=0；i<8；i++）{

if（stone_num==2）{

if（i==3||i==6）{

setTimeout（"add_stone（7000，7200）"，getRandom（1，1000））；

}else{

setTimeout（"add_friutes（7000，7200）"，getRandom（1，1000））；

}

}else if（stone_num==3）{

if（i==2||i==3||i==6）{

setTimeout（"add_stone（6000，6200）"，getRandom（1，1000））；

}else{

setTimeout（"add_friutes（6000，6200）"，getRandom（1，1000））；

}

}else{

if（count<=100）{

if（i==2||i==3||i==6||i==0）{

setTimeout（"add_stone（5000，5200）"，getRandom（1，2000））；

}else{

setTimeout（"add_friutes（5000，5200）"，getRandom（1，2000））；

}

}else{

if（i==2||i==3||i==6||i==0）{

setTimeout（"add_stone（4000，4200）"，getRandom（1，2000））；

}else{

setTimeout（"add_friutes（4000，4200）"，getRandom（1，2000））；

}

}

}

}

}

3.2.5 分數統計、成績顯示和祝福語生成

“金猴送福”游戲采取的是點擊消除從屏幕上方掉落的水果獲取積分的規則。所有的水果和福字都是3分，而石頭和炸彈為0分，點中水果、福字后，它們會消失，點到炸彈和石頭后，游戲自動結束。游戲結束后會顯示分數，如果用戶進行過多次游戲，則游戲會自動保存用戶的最好成績，并與當前成績一同顯示。最后祝福語的生成與所得分數直接掛鉤，此游戲將所得分數劃分為0-20、20-80、80-130、130-190，和>190這5個分數段，每個分數段都對應一條具有個性化的祝福語。

3.2.6 調試測試

游戲開發完成后，在調試過程中發現游戲主要有兩個問題。一是在游戲進行一段時間后會出現卡頓現象，二是加入音樂后控制聲音的按扭操作無效。經過多次調試分析，發現從屏幕下落的未被點中的水果、福字、石頭等會逐步累積，導致網頁代碼量短時間內大量增加，使游戲出現卡頓。為防止卡頓，需將未被點中的水果、石頭等圖標刪除，通過設定removeIMG（）函數將多余代碼刪除來保證游戲運行流暢。而聲音控制摁扭操作無效的原因是音樂文件未能全部加載導致pause（） 函數和play（）函數不能使用以及

function removeIMG（id，removeSpeed）{

if（！isRemove）{

setTimeout（"removeImg（"+id+"）"，removeSpeed）；

if（isRemove）{

isRemove=false；

}

}

}

function removeImg（id）{

$（id）.remove（）；

}

4 結語

本文系統地闡述了“金猴送福”游戲的開發過程和基本功能實現。在游戲開發過程中，開發人員充分利用了HTML5技術、jQuery技術和CSS3技術，并注重游戲設計與品牌產品特點的結合。游戲整體設計良好，在上線推廣過程中有較高的傳播率，市場反映良好。

隨著越來越多的手機客戶端軟件支持HTML5技術，HTML5輕游戲將擁有更加廣闊的發展空間，并且自2015年以來，越來越多的創業公司進入這一領域，相信在不久的將來，利用HTML5輕游戲進行產品或品牌推廣將會逐漸成為一種高效主流的推廣模式。

參考文獻：

[1]李強.基于HTML5的網頁圍棋游戲的開發[J].軟件，2013（9）：39-44.

[2]周玲余.基于jQuery框架的頁面前端特效的設計與實現[J].計算機與現代化，2013（1）：61-63.

[3]王晶，溫向彬.利用jQuery操作HTML元素[J].農業網絡信息，2008（4）：98-101.

[4]代曉蓉，萬太平.廣告游戲：一種新的交互式廣告[J].集團經濟研究，2006（28）：140-141.

[5]姚子杰.基于移動平臺的游戲開發需求分析[J].科技展望，2015（28）：7.

（責任編輯：孫 娟）