大家都玩过弹球消砖块游戏,左右键控制最底端的一个小木板平移,接住掉落的小球,将球弹起后消除画面上方的一堆砖块。
那么用VUE+Canvas如何来实现呢?实现思路很简单,首先来拆分一下要画在画布上的内容:
(1)用键盘左右按键控制平移的木板;
(2)在画布内四处弹跳的小球;
(3)固定在画面上方,并且被球碰撞后就消失的一堆砖块。
将上述三种对象,用requestAnimationFrame()函数平移运动起来,再结合各种碰撞检查,就可以得到最终的结果。
先看看最终的效果:
![](https://i-blog.csdnimg.cn/blog_migrate/1e6d5ea5d2ef5ac8850d546bce7a4c71.gif)
一、左右平移的木板
最底部的木板是最简单的一部分,因为木板的y坐标是固定的,我们设置木板的初始参数,包括其宽度,高度,平移速度等,然后实现画木板的函数:
pannel: {x: 0,y: 0,height: 8,width: 100,speed: 8,dx: 0
},
....
drawPannel() {this.drawRoundRect(this.pannel.x,this.pannel.y,this.pannel.width,this.pannel.height,5);
},
drawRoundRect(x, y, width, height, radius) { // 画圆角矩形this.ctx.beginPath();this.ctx.arc(x + radius, y + radius, radius, Math.PI, (Math.PI * 3) / 2);this.ctx.lineTo(width - radius + x, y);this.ctx.arc(width - radius + x,radius + y,radius,(Math.PI * 3) / 2,Math.PI * 2);this.ctx.lineTo(width + x, height + y - radius);this.ctx.arc(width - radius + x,height - radius + y,radius,0,(Math.PI * 1) / 2);this.ctx.lineTo(radius + x, height + y);this.ctx.arc(radius + x,height - radius + y,radius,(Math.PI * 1) / 2,Math.PI);this.ctx.fillStyle = "#008b8b";this.ctx.fill();this.ctx.closePath();
}
程序初始化的时候,监听键盘的左右方向键