基于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轻游戏“金猴送福”设计

“金猴送福”游戏是一个运行于微信等手机社交软件客户端的以猴年春节送祝福为主题的HTML5轻游戏。在游戏中用户通过点击屏幕上方掉落的水果、福字等图标来获取积分，游戏时间为1分钟，如果点到上方掉落的石头、炸弹等游戏将会提前结束。游戏结束后会根据用户所得分数的高低显示不同的祝福语。

2.1 设计思想

（1）游戏设计与热点事件相结合，充分考虑了用户分享的积极性。“金猴送福”游戏借助于猴年春节这个热点事件激发用户对游戏的兴趣，使用户以一种更主动的方式去参与到游戏中，同时用户可以通过分享游戏中的祝福语以更加新颖的方式送出自己最真挚的祝福。

（2）游戏设计与产品或品牌推广相结合。在保证用户体验的基础上“金猴送福”游戏采用了广告软植入的方式进行产品或品牌推广，使用户可以在玩游戏的同时受到潜移默化的影响，实现产品或品牌的推广。

（3）游戏设计充分利用用户碎片化时间。“金猴送福”预定游戏时间为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个界面组成，分别是主界面、规则界面、游戏界面、游戏结束界面和分享界面。这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轻游戏的基本特性就是轻时间，它强调利用用户的碎片化时间。“金猴送福”游戏在设计中所设定的时间为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.

（责任编辑：孙 娟）