发新帖

  • 用易企秀做H5小游戏,原来这么简单!
  • 易企秀产品   2016-02-17 11:42:21
  •   [复制链接]
  • 21895    58
  • H5小游戏想必我们久经朋友圈沙场的朋友们都有玩过
    那些生动好玩儿的游戏在朋友圈传播貌似也是很嚣张的
    但是我们玩的那些似乎都是独立开发的
    试想如果小白用户用免费工具做一款H5游戏......
    那可真是屌丝大逆袭啊!
    今天小编就助你一臂之力,走上人生巅峰!

    话不多说 看实例


    你找到了几个熊猫,通关了吗?
    快分享到朋友圈吧!这就给大家教程福利!

    第一页
    和普通的设计一样,并没有什么交互,
    只是在“开始游戏”按钮右脚加一个链接而已。

    第二页到第五页
    逻辑基本相同,每个页面包含以下三个部分

    H5小游戏251.png

    此处三层都是互相覆盖的,这里我们拆开来讲,
    中间部分是页面主元素
    左侧是答对状态,右侧是时间到状态。
    下面拆分页面讲解下每个部分是如何设置动画和触发的

    【倒计时部分】

    H5小游戏337.png

    此部分是10个数字文字依次中心放大后消失
    每个数字之间延时1秒,从10到0,
    这样就有了倒计时的效果

    【“时间到”页面】

    H5小游戏401.png

    此页设置时间延时为10秒
    这样整个元素就在10秒后开始显示
    一旦10秒内没有找到熊猫,该层就会覆盖掉页面

    【偷瞄答案按钮】

    H5小游戏466.png

    此按钮做了一个简单的触发
    点击“偷瞄答案”按钮
    即可触发正确答案处红色圆圈
    先中心放大后淡出的动画

    【找到熊猫后的结果】

    H5小游戏530.png

    这里我们做了一个透明层
    在熊猫的位置放一个透明层然后做触发
    触发出答对效果的层
    这样就可以实现点击到熊猫提示“答对啦”的效果了

    【设置】

    H5小游戏603.png

    替换题目图片重复以上的动作就好啦
    加上尾页,进行全局设置就大功告成啦!

    如此,一个复杂的H5游戏就出炉啦

    玩儿完了记得分享哦!


    套用样例模板,戳这里

    推荐阅读:

    点评

    不错,很棒!  发表于 2016-10-12 11:31
    已分享,楼主威武  发表于 2016-2-24 10:47
    回复
  • 最新评论
  • 添加评论
  • 发表于 2016-2-17 14:03:04 | 显示全部楼层
    做游戏!
    回复
  • 发表于 2016-2-17 16:40:30 | 显示全部楼层
    好啊
    回复
  • 发表于 2016-2-17 17:04:37 | 显示全部楼层
    请问入口在哪里?

    点评

    http://eqxiu.com/  发表于 2016-2-17 17:24
    回复 支持 反对
  • 发表于 2016-2-17 17:04:57 | 显示全部楼层

    -----------------------------


    QQ图片20160104090208.gif

    回复 支持 反对
  • 发表于 2016-2-18 11:02:21 | 显示全部楼层

    点评

    欢迎学习~ “样例解析”板块相当于手把手教你做实用的H5场景,每周更新,欢迎来追~欢迎提出意见和疑问~  详情 回复 发表于 2016-10-12 12:04
    回复
  • 发表于 2016-2-18 15:20:00 | 显示全部楼层
    非常棒,32个赞!

    点评

    欢迎学习~ “样例解析”板块相当于手把手教你做实用的H5场景,每周更新,欢迎来追~欢迎提出意见和疑问~  详情 回复 发表于 2016-10-12 12:04
    回复 支持 反对
  • 发表于 2016-2-18 22:51:13 | 显示全部楼层

    非常棒,32个赞!

    点评

    欢迎学习~ “样例解析”板块相当于手把手教你做实用的H5场景,每周更新,欢迎来追~欢迎提出意见和疑问~  详情 回复 发表于 2016-10-12 12:04
    回复 支持 反对
  • 发表于 2016-2-19 15:20:05 | 显示全部楼层
    不经常用~~~~~~~~~~~~~~~~

    点评

    欢迎学习~ “样例解析”板块相当于手把手教你做实用的H5场景,每周更新,欢迎来追~欢迎提出意见和疑问~  详情 回复 发表于 2016-10-12 12:04
    回复
  • 发表于 2016-2-20 20:50:48 | 显示全部楼层
    不错,加油

    点评

    欢迎学习~ “样例解析”板块相当于手把手教你做实用的H5场景,每周更新,欢迎来追~欢迎提出意见和疑问~  详情 回复 发表于 2016-10-12 12:04
    回复
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

  • 易企秀产品
  • 城管
    • 1684
      积分
    • 1298
      金币
    • 657
      帖子
    猜你喜欢

    快速回复 返回顶部 !pub_help!