微信小程序制作抽奖小程序（三）--随机积分获取

1.效果展示

这一次来说说怎么实现上一幅图所展示的随机点屏幕一处即可加分的效果

先来看下图

效果是我点击了广场的某一点，它会显示这个“+2”，然后我的积分也加2。

2.具体实现

先说设计想法：

1.确定事件范围是整个页面

2.给该范围绑定一个bindtap事件事件返回的X轴和Y轴数据用于定位点击具体位置

3.利用随机数生成随机加分

4.设计动画并显示

5.将积分变化假如到记录中

那就一个一个来了

1.确定事件范围是整个页面

这个部分主要体现在wxml里

<view class="back">

<view bindtap="randomCredit" class="creditaddarea">

<view class="word">

<view class="wordfront">积分广场</view>

<view class="wordback">哈哈皮</view>

</view>

还有对于的css

.creditaddarea{

width: 100%;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}

这样一来就让creditaddarea铺满了

2.给该范围绑定一个bindtap事件事件返回的X轴和Y轴数据用于定位点击具体位置

这个bindtap他绑定的事件randomCredit里的e.detail.x和e.detail.y(randomCredit: function (e){}内包含这两个)即时我们要的(x,y位置)

不妨打印一下试试

console.log(e.detail.x)

console.log(e.detail.y)

没有问题，利用这个就可以给我们要呈现的积分动画定位了

3.利用随机数生成随机加分

//网上找的随机数生产器,要用就this.rand(number),number为想要的最大数字

rand: function (number) {

var today = new Date();

var seed = today.getTime();

seed = (seed * 9301 + 49297) % 233280; //为何使用这三个数?我也不知道

seed = seed / (233280.0)

return Math.ceil(seed * number);

},

上一篇也发了，这里就再复制一遍，要随机积分1~3就number给赋3

4.设计动画并显示

位置也有了，要加的积分也有了，剩下就是显示出来了。这里就说说怎么实现的（我感觉应该还可以提升一下，但是遇到了一些困惑，但也先说说）

这是“+1“，”+2”，“+3”对应的wxml

<text class="text" style="color: aliceblue;font-weight: 1000; left: {{text_ax}}px;top: {{text_ay}}px;opacity: {{opacity_a}};" wx:if="{{text_a}}">

{{text_a}}

</text>

<text class="text" style="color: aliceblue;font-weight: 1000; left: {{text_bx}}px;top: {{text_by}}px;opacity: {{opacity_b}};" wx:if="{{text_b}}">

{{text_b}}

</text>

<text class="text" style="color: aliceblue;font-weight: 1000; left: {{text_cx}}px;top: {{text_cy}}px;opacity: {{opacity_c}};" wx:if="{{text_c}}">

{{text_c}}

</text>

比较重要的就是这里面的"left","top",和{{text_a}}、{{text_b}}、{{text_c}}。left和top将会被赋值(X,Y)，当然X和Y可以稍微偏移一点，这样动画就会出现再你点击处的位置附近

然后是{{text_a}}、{{text_b}}、{{text_c}}，这三个都是放在wx:if里，显然思路就是假如我点击后，随机数生成了的是"1"，那么我就将{{text_a}}赋值，这样对应的动画就会出现

var randresult = this.rand(3)

if (randresult == 1) {

that.setData({

text_a: "+1",

text_ax: x,

text_ay: y,

opacity_a: 1,

})

}

这么做的话就可以让”+1“呈现出来了。但是我们肯定要让它又消失掉，因为留在屏幕没有意义，所以再给它设个停留时间，就可以用了。这里就用了setTimeout。

let timer_a = setInterval(function () {

that.setData({

opacity_a: 0,

text_ay: y - 60, //Y坐标移动移动，变成向上的动画一点

})

setTimeout(function () {

that.setData({

text_a: '', //赋值为空，即让它消失

})

}, 1000)

clearInterval(timer_a);

}, 200)

这样就能呈现积分显示出来，在慢慢往上移一段距离，最后消失的样子了

5.将积分变化假如到记录中

CreditRecord.add({ //在CreditRecord添加一个记录，说明reason，加的分，时间

data: {

reason: reason,

creditChange: randresult,

createdAt: new Date(),

date: String(date.getFullYear()) + "/" + String(date.getMonth()) + "/" + date.getDate(),

}

}).then(res => { console.log(res) })

DrawUser.where({ _openid: app.globalData.userOpenId }).update({ //更新用户记录的数据

data: {

credit: _.inc(randresult)

},

success: function (res) {

console.log("用户积分已经加了" + randresult + "积分")

console.log(res)

DrawUser.where({ _openid: app.globalData.userOpenId }).get().then(re => {//读取用户记录数据，

// 并将积分和票存到缓存，用于页面显示积分和票

that.setData({

usercredit: re.data[0].credit,

userticket: re.data[0].ticket,

})

wx.setStorageSync('usercredit', re.data[0].credit)

wx.setStorageSync('userticket', re.data[0].ticket)

})

},

})

这部分没什么好说的，就是存好数据，给用户展示

3.总结与问题

搞定了看到效果还是很开心的，而且还因为点击次数太多被限制访问了hhhh。

碰到的问题就是假如点的太快，连续两次生成的随机数相同的情况下会将第二次点击的坐标值赋给第一个，使其出现的动画变成第一个”+1“飘向第二次点击的地方这样奇怪的动画，当然这个是代码的问题，因为同一个增加积分值时共用一个数据绑定。不知道大家有什么好的办法呢？我现在在想可不可以给点击randomCredit本身加一个定时器不让其交替触发？