微信小程序canvas开发水果老虎机的思路详解

2023-08-01 23:45:04 61

在这个超长假期中，无聊。。。，所以动手做一个早就计划要做的小玩意，水果老虎机，嗯，这是一个小程序而不是小游戏...

使用结构还是canvas？

使用模板结构(view)生成水果盘的好处一是用户可自定义产出nxn的定制化老虎机，二是容易通过算法样式生成布局，三是通过wx.selectQueryAll的方法能够很方便的抓到定位数据。但，问题是动画性能过于孱弱，如图构建一个7x7的水果盘，动画性能估计会惨不忍睹，而且纯粹模板结构无论使用animation动画方法还是css的keyframe的动画方法得到的动画效果都非常差(测试过的结论)，还有是已知的动画方法可控性很差

使用canvas来生成水果盘好处是动画性能很好(canvas2d)，但是定制性和扩展性比较差

so综上考虑，使用模板(view)布局，使用canvas来实现动画。既保证了组件的性能，同时定制型，扩展性也很好

准备计时器方法

动画的生成离不开计时器方法，settimeout/setinterval这两兄弟真的不够看啊，问题还多，做过web开发的一定都知道window.requestAnimationFrame，这货在小程序的计时器方法中不存在，好在canvas2d中可以使用Canvas.requestAnimationFrame(functioncallback)方法来实现

准备运动算法

在水果老虎机中，激活状态会沿着四方的水果盘做非线性运动(easeInOut比较好用)，需要基础的运动算法来计算实际的运动距离。在animation动画方法中，我们可以使用ease-in/ease-out等缓动算法来实现动画效果，但在这里必须要借助tween.js中的缓动算法来实现运动效果(因为需要控制运动节点)。

你会不会想到用css的keyframe动画来做这个运动效果，经过我的测试，css的动画和animation的动画会在每一条边上实现一次(ease)缓动运动(很奇怪的效果)

推荐这篇文章

使用其中一个，节省代码量

/*
*Tween.js
*t:currenttime（当前时间）；
*b:beginningvalue（初始值）；
*c:changeinvalue（变化量）；
*d:duration（持续时间）。
*/
//Quart四次方的缓动
consteaseInOutQuart=function(t,b,c,d){
if((t/=d/2)<1)returnc/2*t*t*t*t+b;
return-c/2*((t-=2)*t*t*t-2)+b;
}

tween算法是以时间为基准(时间比率=距离比率)来计算单位时间的实际运动距离

布局

以上面的图为例，我们需要做一个7x7的水果盘，实际有效的奖品格子数为7*4-4共24个有效格子

有效格子算法

//0-6第一行所有格子全部有效
//21-27最后一行所有格子全部有效
//中间部分i%7===0和i%7===(7-1)有效
//算法源码有点无聊，依据上述思路，即可遍历28个格子并标识奖品格子valide=true
//可以扩展想一想6x65x5，思路是一样的

wxml




{{item.title}}

样式

只节选关键样式，目的是让canvas覆盖在水果盘上，长宽一致

.fruits-container{
position:relative;
width:400px;
height:400px;
...
}

.fruits-table{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
...
}

抓取位置信息

canvas的绘制需要X轴,Y轴的精确信息，可以使用wx.createSelectorQuery方式抓取类名为‘valide'的view(奖品格子)的位置信息

letquery=wx.createSelectorQuery().in(this)
query.selectAll(`.fruits-table.valide`).boundingClientRect(ret=>{
....
console.log(ret[0])//top,left,right,bottom,width,height
console.log(ret[1])//top,left,right,bottom,width,height
...
...
console.log(ret[23])//top,left,right,bottom,width,height
})

得到每一个奖品格子的位置信息后，就可以使用canvas的fillRect方法来绘制激活状态了。

绘制一个激活状态

letquery=wx.createSelectorQuery().in(this)
query.selectAll(`.fruits-table.valide`).boundingClientRect(ret=>{
....
let{top,left,right,bottom,width,height}=ret[0]
constcanvasQuery=wx.createSelectorQuery()
canvasQuery.select('#fruit-canvas')
.fields({node:true,size:true})
.exec((res)=>{
constcanvas=res[0].node
constctx=canvas.getContext('2d')
letx=top
lety=left
letdx=width
letdy=height
ctx.shadowOffsetX=2
ctx.shadowOffsetY=-2
ctx.shadowColor='red'
ctx.shadowBlur=50
ctx.lineWidth=5
ctx.strokeStyle='red'
ctx.clearRect(0,0,canvas.width,canvas.height)
ctx.strokeRect(x,y,dx,dy)
})
})

跑起来

已经绘制了一个激活状态，接下来使它能够简单动起来

//抽象激活方法
functonrect(point,canvas){
let{x,y,dx,dy}=getPosition(point)
ctx.shadowOffsetX=2
ctx.shadowOffsetY=-2
...
...
ctx.clearRect(0,0,canvas.width,canvas.height)//擦除整个水果盘
ctx.strokeRect(x,y,dx,dy)//绘制激活区域
}

functionrun(){
setTimeout(()=>{
if(ret.length){
letpoint=ret.shift()
rect(point,canvas)
run()
}
},100)
}

执行run方法后可以看到水果盘的激活状态一步一步的往前走(100毫秒)，拖拉机终于可以启动了

配上运动算法

经过上面的试验我们终于可以看到基本的运动效果了，接下来配上运动算法和计时器方法

//Quart四次方的缓动
consteaseInOutQuart=function(t,b,c,d){
if((t/=d/2)<1)returnc/2*t*t*t*t+b;
return-c/2*((t-=2)*t*t*t-2)+b;
}

letstart=0//开始时间
letbegin=0//开始奖品位置
letend=23//终点位置，这里跑一圈
letduring=5000//运动总时间

//1000/60≈17，
//17毫秒即表示屏幕60帧刷新率每秒≈requestAnimationFrame计数频率(一般情况)
conststeper=()=>{
//left为位移距离
//老虎机的运动位移是节点位移，不是精确位移
//所以这里用parseInt处理，只取整数部分
//数据变化为0,1,2,3,4,5...23
//间隔时间/距离由easeInOutQuart算法计算
varleft=easeInOutQuart(start,begin,end,during);
letidx=parseInt(left)
start=start+17;
if(idx<=end){
letpoint=this.ret[idx]//取节点位置信息
this.rect(point)//绘制
}
//时间递增
if(start<=during){
this.ctx.requestAnimationFrame(steper);//计时器
}else{
//动画结束，这里可以插入回调...
//callback()...
}
};
steper();//启动

总结

以上所述是小编给大家介绍的微信小程序canvas开发水果老虎机的思路详解，希望对大家有所帮助！

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

微信小程序canvas开发水果老虎机的思路详解

热门推荐

随机推荐