摇钱树项目 用到了: 1.jquery(js库) 2.hilo.js(游戏框架) 3.tida.js(淘宝相关api--要在淘宝中实现摇一摇功能) 4.原生陀螺仪(因为要在微信中实现摇一摇功能) 5.静态文件资源预加载 项目组成部分: 1.摇钱树 2.摇一摇按钮 3.树下礼包 4.游戏标题 5.树上的红包和金币 6.音乐 7.获奖记录 7.活动规则(活动说明/玩法介绍) 8.红包雨下落 9.地上红包 10. 获奖/失败层 11.玩法介绍 12.进入项目loading 各个组成部分的逻辑: 1.摇钱树:是一张静态图 2.摇一摇按钮:1)晃动手机手机会左右摇摆动效 2)长按会有左右摇摆动效 3.树下礼包:一张静态图 4.游戏标题:当页面没有任何操作时,字浮在树的顶部位置,当晃动手机或者点击摇一摇按钮,游戏标题从树顶位置向上移出 5.树上的红包和金币:坐标是固定的,红包和金币都是匀速随风摇动,当晃动手机或者长按摇一摇按钮红包和金币摇晃剧烈 6.音乐:进入项目直接播放,可以暂停或是再次播放 7.活动规则:一个弹层效果,包含两个类目(活动说明/玩法介绍)左右进行切换 8.红包雨下落:正常情况下没有这个效果,只有执行摇一摇动作(晃动手机/长按按钮)时,从树上会随机生成红包和金币,通过改变其y轴坐标,营造下雨的效果 9.地上红包:正常情况下地上没有红包,只有执行摇一摇动作(晃动手机/长按按钮)时,红包雨效果+地上红包结合=看起来的确和现实生活中的场景差不多 10.获奖/失败层:当摇一摇完毕之后展现给用户的结果层 11.玩法介绍:只有用户是首次进入才会弹出 12.进入项目loading:每次进入都触发