苏宁易购:吃鸡全球排行榜

2018-01-19 H5案例分享 H5案例分享
苏宁易购:吃鸡全球排行榜


案例演示,请长按/扫描以下二维码 ->

识别图中二维码

吃鸡全球排行榜-查阅二维码

完整欣赏此案例大约需要2分钟


案例:吃鸡全球排行榜

出品:苏宁易购

制作:简豆

亮点:

  1. 策划上,小游戏类。Loading为一个伞兵不断下落的过程,落到底部加载完毕,并进入首页。首屏是华硕超级品牌日活动主题露出,接着一架飞机飞入,提示用户“获取Kar98k”,点击按钮后飞机飞走,并带出活动规则,点击按钮“开始吃鸡”进入游戏环节。

 

首先会简单提示操作方式,即按住并拖动瞄准镜至正在降落的伞兵身上,松开按钮便相当于开枪,击中一个算2分,上不封顶,当有10个伞兵下落至屏幕底部,则提示“Game Over”游戏结束,并进入吃鸡成绩单页。

 

成绩页会展示分数以及对应的评语,底部两个按钮,点击“中奖点击”可以查看中奖发布渠道以及领奖方式,点击“更多装备”进入下一页展示“华硕超级品牌日”的福利活动,此页底部三个按钮,点击“再玩一次”可以重新玩,点击“华硕主会场”则跳转活动链接,点击“查看排行榜”进入下一页,展示游戏排行榜前50名用户名次、头像、昵称以及成绩,点击“呼唤队友”提示分享。

 

  1. 设计上,主题文字配色应该是参考了PUBG(绝地求生大逃杀) 的深黄,并加入了风格不一样的纹理以及渐变,小五个人很喜欢这个文字样式。按钮则是金属标牌的感觉,非常有质感。

 

游戏部分,瞄准镜的区域和伞兵会有放大的效果,加上瞄准镜自身的滤镜感,整体效果还是蛮逼真的,游戏背景图偏油画风格,内容恰到好处,没有过多的元素来扰乱用户视线。音乐部分,除了奠定基调的BGM外,每个按钮的点击都会有子弹上膛的音效,开枪时会有狙击枪的枪声,开头在飞机飞出之前还有飞机的轰鸣声,案例在气氛的营造方面,还是很出色的,代入感十足。

 

  1. 体验上,操作非常简单、好玩的一款小游戏,但是想拿高分也不容易,毕竟难度会越来越高,玩到最后会手忙脚乱。案例在细节的表现也蛮不错,包括击中伞兵后的动画,游戏失败后的提示,按钮的点击等等,奖品的设置也很给力,激励用户获得高分。

 

除此之外,小五觉得有可改进之处:由于是两个Canvas元素(背景以及放大镜)在不停地渲染,对手机性能的要求还是很高的,在iPhone6及以上的机子上整体较为流畅,体验很不错,玩得根本停不下来,但是在大部分安卓机型上,基本是处于比较卡顿的状态,小五建议案例在这一点上可以进行优化改进。



技术实现: CreateJS + jQuery



以上为“H5案例分享”团队原创文章,转载请注明出处!

标签

分享:
海报
案列链接
下载截图
收藏案例
已收藏
分享到微信朋友圈
打开微信,点击底部的“发现”,
使用“扫一扫”即可将网页分享至朋友圈。

相关推荐:

华硕&苏宁:华硕1月19日苏宁超级品牌日私密群

【苏宁】H5案例大汇总(干货精选)——2017大合集第48波

关注微信号:h5-share,获取更多创意H5案例分享!也可访问H5案例分享网站www.h5anli.com,搜索查阅~

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

对汉语支持不错,别对小五说英文

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~