发布时间:2018-1-30 0:57
基于vue.js实现。如有疑问或者错误的地方欢迎留言,谢谢~
1、默认用户的起始位置为第一步。
2、页面加载成功后需要请求后台数据获取当前用户的初始位置(第几步)并调用
vm.location(initialPosition)
3、“跳一跳”按钮绑定的点击事件为vm.dice(),点击按钮后只是执行骰子摇动的动画,此时应该同时请求后台数据返回用户摇出的points和当前点数下的prize,若没有prize应该返回点数和‘nothing’参数。后台数据返回成功后再调用
vm.forward(points,prize)
这时候用户头像才开始跳动。跳动结束后,系统会根据prize自动弹出获奖情况。
/*设置rem根据屏幕大小改变而变化*/ var docEl = document.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function() { docEl.style.fontSize = 20 * (docEl.clientWidth / 320) + 'px'; }; //绑定浏览器缩放与加载时间 window.addEventListener(resizeEvt, recalc, false); document.addEventListener('DOMContentLoaded', recalc, false); /*结束*/
从技术来看做得很不错的,不过,以使用者的角度来看,这个。。。。哈哈,一个骰子最大点数是6,一共五次机会,假设每次投的点数都是最大为6,一共30步,跳的步数才30,还没走到一半,永远拿不到最后的大奖呀,哈哈哈