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

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

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

DOIDOI：10.11907/rjdk.161876

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

1 HTML5輕游戲

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

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

2 HTML5輕游戲“金猴送?！痹O(shè)計(jì)

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

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

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

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

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

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

2.2.1 HTML5技術(shù)

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

2.2.2 jQuery技術(shù)

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

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

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

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

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

3.1 開發(fā)流程

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

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

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

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

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

手機(jī)網(wǎng)頁相對(duì)于傳統(tǒng)PC網(wǎng)頁而言，其所要適應(yīng)的屏幕更小，而且不同品牌的手機(jī)以及同一品牌不同型號(hào)的手機(jī)屏幕尺寸都有很大不同，要想使游戲做到跨平臺(tái)自適應(yīng)就需要對(duì)網(wǎng)頁進(jìn)行自適應(yīng)設(shè)計(jì)。網(wǎng)頁的自適應(yīng)設(shè)計(jì)主要包括兩部分，一是網(wǎng)頁以及網(wǎng)頁中各元素的尺寸自適應(yīng)不同規(guī)格的手機(jī)屏幕，二是網(wǎng)頁各元素的位置自適應(yīng)不同規(guī)格的手機(jī)屏幕。其中實(shí)現(xiàn)網(wǎng)頁及各元素尺寸的自適應(yīng)是通過用百分比設(shè)置網(wǎng)頁的width和height屬性實(shí)現(xiàn)，而網(wǎng)頁元素的自適應(yīng)則需要position：fixed屬性來設(shè)置。position：fixed是以body為定位時(shí)的對(duì)象，它總是根據(jù)瀏覽器的窗口來對(duì)元素進(jìn)行定位，最后通過百分比來設(shè)置"left"、 "top"、 "right"、 "bottom" 中的一至多個(gè)屬性來確定好元素的最終位置。由于同一網(wǎng)頁的同一位置可能出現(xiàn)多個(gè)元素，因而還需要用z-index屬性來設(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)利用用戶的碎片化時(shí)間?！敖鸷锼透！庇螒蛟谠O(shè)計(jì)中所設(shè)定的時(shí)間為1分鐘，并在用戶碰到石頭或炸彈時(shí)自動(dòng)停止計(jì)時(shí)，為實(shí)現(xiàn)時(shí)間上的控制，需要加入一個(gè)時(shí)間控制器，此控制器通過setTimeout（）函數(shù)和clearTimeout（）函數(shù)對(duì)clock（）函數(shù)的遞歸調(diào)用來實(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í)還要通過add0（）函數(shù)對(duì)0～9這些個(gè)位數(shù)字進(jìn)行加0補(bǔ)位，實(shí)現(xiàn)類似于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（）。水果、福字、石頭、炸彈的添加是通過JS代碼向頁面中添加HTML代碼實(shí)現(xiàn)，通過fruites_name（）函數(shù)實(shí)現(xiàn)水果、福字的隨機(jī)變換以及用location_X（）函數(shù)實(shí)現(xiàn)水果、福字、石頭、炸彈隨機(jī)出現(xiàn)的位置。水果和石頭出現(xiàn)的速度和數(shù)量是在control_f_s（）函數(shù)中通過setTimeout（）函數(shù)對(duì)add_friutes（）、add_stones（）的調(diào)用實(shí)現(xiàn)。所有圖標(biāo)出現(xiàn)的速度與數(shù)量均以分?jǐn)?shù)作為基礎(chǔ)，隨著分?jǐn)?shù)越來越高，炸彈和石頭數(shù)量出現(xiàn)的比例變大，而所有圖標(biāo)下落的速度也會(huì)增快，相應(yīng)的游戲難度也會(huì)隨之增加。在游戲結(jié)束時(shí)通過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ī)顯示和祝福語生成

“金猴送?！庇螒虿扇〉氖屈c(diǎn)擊消除從屏幕上方掉落的水果獲取積分的規(guī)則。所有的水果和福字都是3分，而石頭和炸彈為0分，點(diǎn)中水果、福字后，它們會(huì)消失，點(diǎn)到炸彈和石頭后，游戲自動(dòng)結(jié)束。游戲結(jié)束后會(huì)顯示分?jǐn)?shù)，如果用戶進(jìn)行過多次游戲，則游戲會(huì)自動(dòng)保存用戶的最好成績(jī)，并與當(dāng)前成績(jī)一同顯示。最后祝福語的生成與所得分?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è)性化的祝福語。

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

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

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

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

參考文獻(xiàn)：

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

[2]周玲余.基于jQuery框架的頁面前端特效的設(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]代曉蓉，萬太平.廣告游戲：一種新的交互式廣告[J].集團(tuán)經(jīng)濟(jì)研究，2006（28）：140-141.

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

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