MicroWaver 59™:MicroWaver 59™ | Pink Yellow

2022-03-18 H5案例分享 H5案例分享
MicroWaver 59™:MicroWaver 59™ | Pink Yellow


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

识别图中二维码

MicroWaver 59™ | Pink Yellow-查阅二维码

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


案例:MicroWaver 59™ | Pink Yellow

品牌:MicroWaver 59™

技术实现: HTML5

亮点:

1.创意定位

这是国外的一个叫MicroWaver59™的网站新推出的一款pink yellow的新产品小游戏,通过重力感应调整微波炉的角度进行吃分游戏,最后给出分数和排行。

 

2.策划逻辑

策划逻辑:Loading → 介绍视频 → 游戏主页(开始游戏、游戏排行、声音开关)

 

Loading:一个硬币正反旋转,露出:pink yellow。加载完成,出现Insert coin按钮。点击按钮,进入介绍视频。

 

介绍视频:视频介绍品牌、品牌网站和新产品,中间有跳过视频的设置。

 

游戏主页:新品微波炉在绿色3D网格波浪上,用户可以拖动、旋转、点击,进行交互,微波炉立即变红,温度变成59°。菜单导航包含:开始新游戏、排行榜、声音开关。

 

开始游戏:点击new game 按钮,输入姓名,进入游戏,有游戏引导,提示靠重力感应进行吃分游戏。然后,开始游戏,共3局,每一局都需要调整手机,利用重力感应吃分过关,最后显示游戏分数、排行榜,点击再次游戏。

 

排行榜:排名、用户名字、积分排行榜,当前用户的积分单独显示。

 

声音开关:可以设置游戏背景声音打开、关闭。

 

3.交互体验

 

微波浪和3D触碰和旋转,效果很赞!重力感应吃分,会吸引用户玩好多遍,因为有时会妥妥的错过所有的吃分机会。





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

标签

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

相关推荐:

UTS:UTS 360 virtual campus tour

Woset:Woset

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

阅读原文

微信扫一扫
关注该公众号

收藏

微信极速登录/注册

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

微信公众号

提交案例

请pc端输入网址

"h5anli.com"

下载截图压缩包~

标签已提交成功

小编正在审核

请等待一下下啦

哎呀

标签已存在

换个新的呗~