基于HTML5的移動(dòng)端產(chǎn)品推廣輕游戲設(shè)計(jì)與開(kāi)發(fā)

張?jiān)?劉志遠(yuǎn)

摘 要：隨著HTML5技術(shù)的成熟以及新媒體營(yíng)銷(xiāo)方式的普及，基于HTML5技術(shù)的新媒體營(yíng)銷(xiāo)推廣方式逐漸占據(jù)各大主流手機(jī)瀏覽器和移動(dòng)社交平臺(tái)。為尋求一種高效快速的新媒體營(yíng)銷(xiāo)推廣策略，提出了以HTML5輕游戲?yàn)檩d體進(jìn)行產(chǎn)品或品牌推廣的方案。采用HTML5技術(shù)和jQuery技術(shù)，設(shè)計(jì)了“金猴送?！庇螒?，并以該游戲?yàn)槔?，論述了此?lèi)游戲的設(shè)計(jì)思想、技術(shù)手段、開(kāi)發(fā)流程以及品牌和產(chǎn)品廣告植入策略。

關(guān)鍵詞關(guān)鍵詞：HTML5；輕游戲；游戲設(shè)計(jì)；產(chǎn)品推廣

DOIDOI：10.11907/rjdk.161876

中圖分類(lèi)號(hào)：TP319

文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1672-7800（2016）008-0053-03

0 引言

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

1 HTML5輕游戲

“輕游戲”是一個(gè)比較泛的概念，它所涉及的范圍較廣，像社交游戲、手機(jī)小游戲等這些可以做到隨時(shí)體驗(yàn)、操作簡(jiǎn)單、耗費(fèi)流量少、付費(fèi)門(mén)檻低的游戲產(chǎn)品都可歸入“輕游戲”的范疇。

隨著HTML5技術(shù)的興起，以HTML5編寫(xiě)的輕游戲開(kāi)始流行，HTML5輕游戲相對(duì)于傳統(tǒng)的輕游戲，除了具有“輕操作”、“輕時(shí)間”、“輕流量”、“輕資費(fèi)”這4個(gè)基本特征外，還具有跨平臺(tái)性、即時(shí)更新性以及高效的傳播速率這三大特性。HTML5輕游戲的本質(zhì)是基于HTML5技術(shù)的輕度化的網(wǎng)頁(yè)游戲，可以與傳統(tǒng)輕量級(jí)的安卓游戲、iOS游戲?qū)崿F(xiàn)同等效果，在無(wú)需下載安裝的情況下可直接運(yùn)行在各手機(jī)平臺(tái)的瀏覽器以及微信、QQ空間等社交應(yīng)用軟件中，并且開(kāi)發(fā)者可以通過(guò)對(duì)后臺(tái)代碼的維護(hù)實(shí)現(xiàn)游戲的實(shí)時(shí)更新。HTML5輕游戲可以與社交軟件進(jìn)行深度結(jié)合，增加社交好友之間的互動(dòng)性和提高社交軟件的豐富性，一旦游戲激起用戶(hù)興趣，便可基于社交軟件所具有的分享功能在短時(shí)間內(nèi)實(shí)現(xiàn)高效快速的傳播，甚至實(shí)現(xiàn)用戶(hù)群體的幾何式爆炸性增長(zhǎng)。基于這些特性，HTML5輕游戲除了具有游戲自身的功能之外還有相當(dāng)大的商用價(jià)值，它既可以應(yīng)用于教育教學(xué)，也可以用于產(chǎn)品推廣、廣告?zhèn)鞑ヒ约捌放扑茉?，甚至在一定程度上?huì)改變產(chǎn)品和品牌的傳統(tǒng)推廣模式。

2 HTML5輕游戲“金猴送福”設(shè)計(jì)

“金猴送?！庇螒蚴且粋€(gè)運(yùn)行于微信等手機(jī)社交軟件客戶(hù)端的以猴年春節(jié)送祝福為主題的HTML5輕游戲。在游戲中用戶(hù)通過(guò)點(diǎn)擊屏幕上方掉落的水果、福字等圖標(biāo)來(lái)獲取積分，游戲時(shí)間為1分鐘，如果點(diǎn)到上方掉落的石頭、炸彈等游戲?qū)?huì)提前結(jié)束。游戲結(jié)束后會(huì)根據(jù)用戶(hù)所得分?jǐn)?shù)的高低顯示不同的祝福語(yǔ)。

2.1 設(shè)計(jì)思想

（1）游戲設(shè)計(jì)與熱點(diǎn)事件相結(jié)合，充分考慮了用戶(hù)分享的積極性。“金猴送?！庇螒蚪柚诤锬甏汗?jié)這個(gè)熱點(diǎn)事件激發(fā)用戶(hù)對(duì)游戲的興趣，使用戶(hù)以一種更主動(dòng)的方式去參與到游戲中，同時(shí)用戶(hù)可以通過(guò)分享游戲中的祝福語(yǔ)以更加新穎的方式送出自己最真摯的祝福。

（2）游戲設(shè)計(jì)與產(chǎn)品或品牌推廣相結(jié)合。在保證用戶(hù)體驗(yàn)的基礎(chǔ)上“金猴送?！庇螒虿捎昧藦V告軟植入的方式進(jìn)行產(chǎn)品或品牌推廣，使用戶(hù)可以在玩游戲的同時(shí)受到潛移默化的影響，實(shí)現(xiàn)產(chǎn)品或品牌的推廣。

（3）游戲設(shè)計(jì)充分利用用戶(hù)碎片化時(shí)間?！敖鸷锼透！鳖A(yù)定游戲時(shí)間為1分鐘，用戶(hù)可在任何閑暇時(shí)間或無(wú)聊的時(shí)候打開(kāi)游戲進(jìn)行體驗(yàn)，不耽誤用戶(hù)的日常生活事宜，還能為用戶(hù)帶來(lái)娛樂(lè)體驗(yàn)。

2.2 關(guān)鍵技術(shù)

2.2.1 HTML5技術(shù)

作為新一代的Web標(biāo)準(zhǔn)，與過(guò)去的 HTML4 或 XHTML 相比，HTML5更加注重對(duì)頁(yè)面結(jié)構(gòu)和含義的思考，其新添加的語(yǔ)義元素，使頁(yè)面結(jié)構(gòu)更加合理清晰，代碼更加簡(jiǎn)潔、健壯[1]。HTML5實(shí)現(xiàn)了對(duì)視頻和音頻的支持，并在制定過(guò)程中充分考慮了移動(dòng)設(shè)備的應(yīng)用，利于移動(dòng)端手機(jī)網(wǎng)頁(yè)的開(kāi)發(fā)，其Canvas標(biāo)簽為網(wǎng)頁(yè)游戲的開(kāi)發(fā)提供了強(qiáng)有力的支持，開(kāi)發(fā)者可以拋棄原有的Flash開(kāi)發(fā)方案，使游戲開(kāi)發(fā)變得更加安全與高效。

2.2.2 jQuery技術(shù)

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

2.3 品牌和產(chǎn)品廣告植入策略

“金猴送?！庇螒虻谋举|(zhì)是一款廣告游戲。廣告游戲是利用人們對(duì)游戲的一種天生愛(ài)好心理和游戲本身的互動(dòng)性、新鮮感來(lái)吸引消費(fèi)者，把廣告內(nèi)容通過(guò)合理的策劃巧妙地隱藏在游戲場(chǎng)景中，讓消費(fèi)者在玩游戲的過(guò)程中接受廠商傳送的信息，從而達(dá)到傳遞廣告信息的核心目的[4]。游戲設(shè)計(jì)中主要有以下兩種廣告植入策略：①以品牌或產(chǎn)品的自身形象為設(shè)計(jì)原型，對(duì)游戲情節(jié)進(jìn)行合理有趣的設(shè)計(jì)，使品牌或產(chǎn)品形象貫穿整個(gè)游戲過(guò)程；②以傳統(tǒng)游戲?yàn)檩d體，通過(guò)對(duì)游戲界面或情節(jié)的再設(shè)計(jì)，將品牌圖標(biāo)、產(chǎn)品卡通形象等與產(chǎn)品或品牌相關(guān)的游戲元素植入到游戲界面中。

“金猴送福”游戲采用第二種廣告植入策略，并在以下3個(gè)頁(yè)面中進(jìn)行廣告軟植入：①游戲開(kāi)始界面加入品牌圖標(biāo)；②游戲界面加入與產(chǎn)品或品牌相關(guān)的游戲元素；③游戲分享界面加入相關(guān)產(chǎn)品或品牌的微信公眾號(hào)、微博賬號(hào)和二維碼圖片。

3 “金猴送?！庇螒蜷_(kāi)發(fā)

3.1 開(kāi)發(fā)流程

常見(jiàn)的游戲開(kāi)發(fā)過(guò)程可以分為兩個(gè)主要階段：項(xiàng)目準(zhǔn)備階段和項(xiàng)目研發(fā)階段。在項(xiàng)目準(zhǔn)備階段，項(xiàng)目的主要目標(biāo)是將策劃出來(lái)的游戲想法設(shè)計(jì)成有計(jì)劃、有組織的開(kāi)發(fā)計(jì)劃[5]；在項(xiàng)目研發(fā)階段，主要是對(duì)項(xiàng)目開(kāi)發(fā)計(jì)劃的執(zhí)行，將游戲的各功能點(diǎn)依次實(shí)現(xiàn)，通過(guò)不斷調(diào)試達(dá)到最終上線要求。典型的游戲開(kāi)發(fā)流程如圖1所示。

3.2 功能實(shí)現(xiàn)

3.2.1 游戲主要界面實(shí)現(xiàn)

“金猴送福”游戲主要由5個(gè)界面組成，分別是主界面、規(guī)則界面、游戲界面、游戲結(jié)束界面和分享界面。這5個(gè)界面構(gòu)成了整個(gè)游戲框架，它們存在于同一個(gè)HTML文件中，每個(gè)界面都是一個(gè)div塊，通過(guò)CSS display屬性設(shè)置主界面為默認(rèn)顯示，其它界面隱藏，并通過(guò)button和JS實(shí)現(xiàn)不同界面的轉(zhuǎn)換。

3.2.2 自適應(yīng)手機(jī)屏幕實(shí)現(xiàn)

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

#start-page-word{

width：70%；

height：40%；

position：fixed；

left：21%；

top：21%；

z-index：-1；

}

3.2.3 計(jì)時(shí)器實(shí)現(xiàn)

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

function clock（）{

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

clearTimeout（"clock（）"，1000）；

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

showEndPage（）；

}

}else{

setTimeout（"clock（）"，1000）；//每隔一秒實(shí)行一次遞歸調(diào)用，實(shí)現(xiàn)時(shí)間的變動(dòng)

}

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

if（minute==1）{

minute--；

second=59；

}else{

second--；

}

}

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

水果、福字、石頭、炸彈的添加是整個(gè)游戲最重要的部分，也是整個(gè)游戲的基礎(chǔ)。這些圖標(biāo)的出現(xiàn)主要分為4個(gè)函數(shù)，分別是添加水果與福的函數(shù)add_friutes（），添加石頭與炸彈的函數(shù)add_stones（），控制水果和石頭出現(xiàn)速度和數(shù)量的函數(shù)control_f_s（）和對(duì)水果、福字、石頭、炸彈出現(xiàn)的數(shù)量以及速度的協(xié)調(diào)控制函數(shù)add_fruites_stone（）。水果、福字、石頭、炸彈的添加是通過(guò)JS代碼向頁(yè)面中添加HTML代碼實(shí)現(xiàn)，通過(guò)fruites_name（）函數(shù)實(shí)現(xiàn)水果、福字的隨機(jī)變換以及用location_X（）函數(shù)實(shí)現(xiàn)水果、福字、石頭、炸彈隨機(jī)出現(xiàn)的位置。水果和石頭出現(xiàn)的速度和數(shù)量是在control_f_s（）函數(shù)中通過(guò)setTimeout（）函數(shù)對(duì)add_friutes（）、add_stones（）的調(diào)用實(shí)現(xiàn)。所有圖標(biāo)出現(xiàn)的速度與數(shù)量均以分?jǐn)?shù)作為基礎(chǔ)，隨著分?jǐn)?shù)越來(lái)越高，炸彈和石頭數(shù)量出現(xiàn)的比例變大，而所有圖標(biāo)下落的速度也會(huì)增快，相應(yīng)的游戲難度也會(huì)隨之增加。在游戲結(jié)束時(shí)通過(guò)clearTimeout（）函數(shù)停止水果、福字、石頭、炸彈的添加。

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 分?jǐn)?shù)統(tǒng)計(jì)、成績(jī)顯示和祝福語(yǔ)生成

“金猴送福”游戲采取的是點(diǎn)擊消除從屏幕上方掉落的水果獲取積分的規(guī)則。所有的水果和福字都是3分，而石頭和炸彈為0分，點(diǎn)中水果、福字后，它們會(huì)消失，點(diǎn)到炸彈和石頭后，游戲自動(dòng)結(jié)束。游戲結(jié)束后會(huì)顯示分?jǐn)?shù)，如果用戶(hù)進(jìn)行過(guò)多次游戲，則游戲會(huì)自動(dòng)保存用戶(hù)的最好成績(jī)，并與當(dāng)前成績(jī)一同顯示。最后祝福語(yǔ)的生成與所得分?jǐn)?shù)直接掛鉤，此游戲?qū)⑺梅謹(jǐn)?shù)劃分為0-20、20-80、80-130、130-190，和>190這5個(gè)分?jǐn)?shù)段，每個(gè)分?jǐn)?shù)段都對(duì)應(yīng)一條具有個(gè)性化的祝福語(yǔ)。

3.2.6 調(diào)試測(cè)試

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

function removeIMG（id，removeSpeed）{

if（！isRemove）{

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

if（isRemove）{

isRemove=false；

}

}

}

function removeImg（id）{

$（id）.remove（）；

}

4 結(jié)語(yǔ)

本文系統(tǒng)地闡述了“金猴送?！庇螒虻拈_(kāi)發(fā)過(guò)程和基本功能實(shí)現(xiàn)。在游戲開(kāi)發(fā)過(guò)程中，開(kāi)發(fā)人員充分利用了HTML5技術(shù)、jQuery技術(shù)和CSS3技術(shù)，并注重游戲設(shè)計(jì)與品牌產(chǎn)品特點(diǎn)的結(jié)合。游戲整體設(shè)計(jì)良好，在上線推廣過(guò)程中有較高的傳播率，市場(chǎng)反映良好。

隨著越來(lái)越多的手機(jī)客戶(hù)端軟件支持HTML5技術(shù)，HTML5輕游戲?qū)碛懈訌V闊的發(fā)展空間，并且自2015年以來(lái)，越來(lái)越多的創(chuàng)業(yè)公司進(jìn)入這一領(lǐng)域，相信在不久的將來(lái)，利用HTML5輕游戲進(jìn)行產(chǎn)品或品牌推廣將會(huì)逐漸成為一種高效主流的推廣模式。

參考文獻(xiàn)：

[1]李強(qiáng).基于HTML5的網(wǎng)頁(yè)圍棋游戲的開(kāi)發(fā)[J].軟件，2013（9）：39-44.

[2]周玲余.基于jQuery框架的頁(yè)面前端特效的設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)與現(xiàn)代化，2013（1）：61-63.

[3]王晶，溫向彬.利用jQuery操作HTML元素[J].農(nóng)業(yè)網(wǎng)絡(luò)信息，2008（4）：98-101.

[4]代曉蓉，萬(wàn)太平.廣告游戲：一種新的交互式廣告[J].集團(tuán)經(jīng)濟(jì)研究，2006（28）：140-141.

[5]姚子杰.基于移動(dòng)平臺(tái)的游戲開(kāi)發(fā)需求分析[J].科技展望，2015（28）：7.

（責(zé)任編輯：孫 娟）