©2020-2024 ioDraw All rights reserved
大家都玩过弹球消砖块游戏，左右键控制最底端的一个小木板平移，接住掉落的小球，将球弹起后消除画面上方的一堆砖块。
那么用VUE+Canvas如何来实现呢？实现思路很简单，首先来拆分一下要画在画布上的内容：
（1）用键盘左右按键控制平移的木板；
（2）在画布内四处弹跳的小球；
（3）固定在画面上方，并且被球碰撞后就消失的一堆砖块。
将上述三种对象，用requestAnimationFrame()函数平移运动起来，再结合各种碰撞检查，就可以得到最终的结果。
先看看最终的效果：
一、左右平移的木板
最底部的木板是最简单的一部分，因为木板的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(); }
程序初始化的时候，监听键盘的左右方向键，来移动木板，通过长度判断是否移动到了左右边界使其不能继续移出画面：
document.onkeydown = function(e) { let key = window.event.keyCode; if (key ===
37) { // 左键 _this.pannel.dx = -_this.pannel.speed; } else if (key === 39) { //
右键 _this.pannel.dx = _this.pannel.speed; } }; document.onkeyup = function(e) {
_this.pannel.dx = 0; }; .... movePannel() { this.pannel.x += this.pannel.dx; if
(this.pannel.x > this.clientWidth - this.pannel.width) { this.pannel.x =
this.clientWidth - this.pannel.width; } else if (this.pannel.x < 0) {
this.pannel.x = 0; } },
二、弹跳的小球和碰撞检测
小球的运动和木板类似，只是不仅有dx的偏移，还有dy的偏移。
而且还要有碰撞检测：
（1）当碰撞的是上、右、左墙壁以及木板上的时候则反弹；
（2）当碰撞到是木板以外的下边界的时候，则输掉游戏；
（3）当碰撞的是砖块的时候，被碰的砖块消失，分数+1，小球反弹。
于是和木板一样，将小球部分分为画小球函数drawBall()和小球运动函数moveBall()：
drawBall() { this.ctx.beginPath(); this.ctx.arc(this.ball.x, this.ball.y,
this.ball.r, 0, 2 * Math.PI); this.ctx.fillStyle = "#008b8b"; this.ctx.fill();
this.ctx.closePath(); }, moveBall() { this.ball.x += this.ball.dx; this.ball.y
+= this.ball.dy; this.breaksHandle(); this.edgeHandle(); }, breaksHandle() { //
触碰砖块检测 this.breaks.forEach(item => { if (item.show) { if ( this.ball.x +
this.ball.r > item.x && this.ball.x - this.ball.r < item.x +
this.breaksConfig.width && this.ball.y + this.ball.r > item.y && this.ball.y -
this.ball.r < item.y + this.breaksConfig.height ) { item.show = false;
this.ball.dy *= -1; this.score ++ ; if(this.showBreaksCount === 0){
this.gameOver = true; } } } }); }, edgeHandle() { // 边缘检测 // 碰到顶部反弹 if
(this.ball.y - this.ball.r < 0) { this.ball.dy = -this.ball.dy; } if ( //
碰到左右墙壁 this.ball.x - this.ball.r < 0 || this.ball.x + this.ball.r >
this.clientWidth ) { this.ball.dx = -this.ball.dx; } if ( this.ball.x >=
this.pannel.x && this.ball.x <= this.pannel.x + this.pannel.width &&
this.ball.y + this.ball.r >= this.clientHeight - this.pannel.height ) { //
球的x在板子范围内并触碰到了板子 this.ball.dy *= -1; } else if ( (this.ball.x < this.pannel.x
|| this.ball.x > this.pannel.x + this.pannel.width) && this.ball.y +
this.ball.r >= this.clientHeight ) { // 球碰到了底边缘了 this.gameOver = true;
this.getCurshBreaks(); } }
三、砖块的生成
砖块的生成也比较简单，这里我们初始了一些数据：
breaksConfig: { row: 6, // 排数 height: 25, // 砖块高度 width: 130, // 砖块宽度 radius:
5, // 矩形圆角 space: 0, // 间距 colunm: 6 // 列数 }
根据这些配置项以及画布宽度，我们可以计算出每个砖块的横向间隙是多少：
// 计算得出砖块缝隙宽度 this.breaksConfig.space = Math.floor( (this.clientWidth -
this.breaksConfig.width * this.breaksConfig.colunm) / (this.breaksConfig.colunm
+ 1) );
于是我们可以得到每个砖块在画布中的x,y坐标（指的砖块左上角的坐标）
for (let i = 0; i < _this.breaksConfig.row; i++) { for (let j = 0; j <
_this.breaksConfig.colunm; j++) { _this.breaks.push({ x:
this.breaksConfig.space * (j + 1) + this.breaksConfig.width * j, y: 10 * (i +
1) + this.breaksConfig.height * i, show: true }); } }
再加上绘制砖块的函数：
drawBreaks() { let _this = this; _this.breaks.forEach(item => { if (item.show)
{ _this.drawRoundRect( item.x, item.y, _this.breaksConfig.width,
_this.breaksConfig.height, _this.breaksConfig.radius ); } }); }
四、让上面三个部分动起来
(function animloop() { if (!_this.gameOver) { _this.movePannel();
_this.moveBall(); _this.drawAll(); } else { _this.drawCrushBreaks(); }
window.requestAnimationFrame(animloop); })(); .... drawAll() {
this.ctx.clearRect(0, 0, this.clientWidth, this.clientHeight);
this.drawPannel(); this.drawBall(); this.drawScore(); this.drawBreaks(); }
五、游戏结束后的效果
在最开始的动图里可以看到，游戏结束后，砖块粉碎成了若干的小球掉落，这个其实和画单独的小球类似，思路就是把剩余的砖块中心坐标处生产若干大小不等，运动轨迹不等，颜色不等的小球，然后继续动画。
getCurshBreaks() { let _this = this; this.breaks.forEach(item => { if
(item.show) { item.show = false; for (let i = 0; i < 8; i++) { // 每个砖块粉碎为8个小球
this.crushBalls.push({ x: item.x + this.breaksConfig.width / 2, y: item.y +
this.breaksConfig.height / 2, dx: _this.getRandomArbitrary(-6, 6), dy:
_this.getRandomArbitrary(-6, 6), r: _this.getRandomArbitrary(1, 4), color:
_this.getRandomColor() }); } } }); }, drawCrushBreaks() { this.ctx.clearRect(0,
0, this.clientWidth, this.clientHeight); this.crushBalls.forEach(item => {
this.ctx.beginPath(); this.ctx.arc(item.x, item.y, item.r, 0, 2 * Math.PI);
this.ctx.fillStyle = item.color; this.ctx.fill(); this.ctx.closePath(); item.x
+= item.dx; item.y += item.dy; if ( // 碰到左右墙壁 item.x - item.r < 0 || item.x +
item.r > this.clientWidth ) { item.dx = -item.dx; } if ( // 碰到上下墙壁 item.y -
item.r < 0 || item.y + item.r > this.clientHeight ) { item.dy = -item.dy; } });
},
以上就是桌面弹球消砖块小游戏的实现思路和部分代码，实现起来很简单，两三百行代码就可以实现这个小游戏。在小球的运动上可以进行持续优化，并且也可以增加难度选项操作。
最后附上全部的vue文件代码，供大家参考学习：
<template> <div class="break-ball"> <canvas id="breakBall" width="900"
height="600"></canvas> <div class="container" v-if="gameOver"> <div
class="dialog"> <p class="once-again">本轮分数：{{score}}分</p> <p
class="once-again">真好玩！</p> <p class="once-again">再来一次~~</p> <el-button
class="once-again-btn" @click="init">开始</el-button> </div> </div> </div>
</template> <script> const randomColor = [ "#FF95CA", "#00E3E3", "#00E3E3",
"#6F00D2", "#6F00D2", "#C2C287", "#ECFFFF", "#FFDC35", "#93FF93", "#d0d0d0" ];
export default { name: "BreakBall", data() { return { clientWidth: 0,
clientHeight: 0, ctx: null, crushBalls: [], pannel: { x: 0, y: 0, height: 8,
width: 100, speed: 8, dx: 0 }, ball: { x: 0, y: 0, r: 8, dx: -4, dy: -4 },
score: 0, gameOver: false, breaks: [], breaksConfig: { row: 6, // 排数 height:
25, // 砖块高度 width: 130, // 砖块宽度 radius: 5, // 矩形圆角 space: 0, // 间距 colunm: 6 //
列数 } }; }, mounted() { let _this = this; let container =
document.getElementById("breakBall"); this.ctx = container.getContext("2d");
this.clientHeight = container.height; this.clientWidth = container.width;
_this.init(); document.onkeydown = function(e) { let key =
window.event.keyCode; if (key === 37) { // 左键 _this.pannel.dx =
-_this.pannel.speed; } else if (key === 39) { // 右键 _this.pannel.dx =
_this.pannel.speed; } }; document.onkeyup = function(e) { _this.pannel.dx = 0;
}; (function animloop() { if (!_this.gameOver) { _this.movePannel();
_this.moveBall(); _this.drawAll(); } else { _this.drawCrushBreaks(); }
window.requestAnimationFrame(animloop); })(); }, computed:{ showBreaksCount(){
return this.breaks.filter(item=>{ return item.show; }).length; } }, methods: {
init() { let _this = this; _this.gameOver = false; this.pannel.y =
this.clientHeight - this.pannel.height; this.pannel.x = this.clientWidth / 2 -
this.pannel.width / 2; this.ball.y = this.clientHeight / 2; this.ball.x =
this.clientWidth / 2; this.score = 0; this.ball.dx =
[-1,1][Math.floor(Math.random() * 2)]*4; this.ball.dy =
[-1,1][Math.floor(Math.random() * 2)]*4; this.crushBalls = []; this.breaks =
[]; // 计算得出砖块缝隙宽度 this.breaksConfig.space = Math.floor( (this.clientWidth -
this.breaksConfig.width * this.breaksConfig.colunm) / (this.breaksConfig.colunm
+ 1) ); for (let i = 0; i < _this.breaksConfig.row; i++) { for (let j = 0; j <
_this.breaksConfig.colunm; j++) { _this.breaks.push({ x:
this.breaksConfig.space * (j + 1) + this.breaksConfig.width * j, y: 10 * (i +
1) + this.breaksConfig.height * i, show: true }); } } }, drawAll() {
this.ctx.clearRect(0, 0, this.clientWidth, this.clientHeight);
this.drawPannel(); this.drawBall(); this.drawScore(); this.drawBreaks(); },
movePannel() { this.pannel.x += this.pannel.dx; if (this.pannel.x >
this.clientWidth - this.pannel.width) { this.pannel.x = this.clientWidth -
this.pannel.width; } else if (this.pannel.x < 0) { this.pannel.x = 0; } },
moveBall() { this.ball.x += this.ball.dx; this.ball.y += this.ball.dy;
this.breaksHandle(); this.edgeHandle(); }, breaksHandle() { // 触碰砖块检测
this.breaks.forEach(item => { if (item.show) { if ( this.ball.x + this.ball.r >
item.x && this.ball.x - this.ball.r < item.x + this.breaksConfig.width &&
this.ball.y + this.ball.r > item.y && this.ball.y - this.ball.r < item.y +
this.breaksConfig.height ) { item.show = false; this.ball.dy *= -1; this.score
++ ; if(this.showBreaksCount === 0){ this.gameOver = true; } } } }); },
edgeHandle() { // 边缘检测 // 碰到顶部反弹 if (this.ball.y - this.ball.r < 0) {
this.ball.dy = -this.ball.dy; } if ( // 碰到左右墙壁 this.ball.x - this.ball.r < 0 ||
this.ball.x + this.ball.r > this.clientWidth ) { this.ball.dx = -this.ball.dx;
} if ( this.ball.x >= this.pannel.x && this.ball.x <= this.pannel.x +
this.pannel.width && this.ball.y + this.ball.r >= this.clientHeight -
this.pannel.height ) { // 球的x在板子范围内并触碰到了板子 this.ball.dy *= -1; } else if (
(this.ball.x < this.pannel.x || this.ball.x > this.pannel.x +
this.pannel.width) && this.ball.y + this.ball.r >= this.clientHeight ) { //
球碰到了底边缘了 this.gameOver = true; this.getCurshBreaks(); } }, drawScore(){
this.ctx.beginPath(); this.ctx.font="14px Arial"; this.ctx.fillStyle = "#FFF";
this.ctx.fillText("分数："+this.score,10,this.clientHeight-14);
this.ctx.closePath(); }, drawCrushBreaks() { this.ctx.clearRect(0, 0,
this.clientWidth, this.clientHeight); this.crushBalls.forEach(item => {
this.ctx.beginPath(); this.ctx.arc(item.x, item.y, item.r, 0, 2 * Math.PI);
this.ctx.fillStyle = item.color; this.ctx.fill(); this.ctx.closePath(); item.x
+= item.dx; item.y += item.dy; if ( // 碰到左右墙壁 item.x - item.r < 0 || item.x +
item.r > this.clientWidth ) { item.dx = -item.dx; } if ( // 碰到上下墙壁 item.y -
item.r < 0 || item.y + item.r > this.clientHeight ) { item.dy = -item.dy; } });
}, getRandomColor() { return randomColor[Math.floor(Math.random() *
randomColor.length)]; }, getRandomArbitrary(min, max) { return Math.random() *
(max - min) + min; }, getCurshBreaks() { let _this = this;
this.breaks.forEach(item => { if (item.show) { item.show = false; for (let i =
0; i < 8; i++) { this.crushBalls.push({ x: item.x + this.breaksConfig.width /
2, y: item.y + this.breaksConfig.height / 2, dx: _this.getRandomArbitrary(-6,
6), dy: _this.getRandomArbitrary(-6, 6), r: _this.getRandomArbitrary(1, 4),
color: _this.getRandomColor() }); } } }); }, drawBall() { this.ctx.beginPath();
this.ctx.arc(this.ball.x, this.ball.y, this.ball.r, 0, 2 * Math.PI);
this.ctx.fillStyle = "#008b8b"; this.ctx.fill(); this.ctx.closePath(); },
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(); }, drawBreaks() { let _this =
this; _this.breaks.forEach(item => { if (item.show) { _this.drawRoundRect(
item.x, item.y, _this.breaksConfig.width, _this.breaksConfig.height,
_this.breaksConfig.radius ); } }); } } }; </script> <!-- Add "scoped" attribute
to limit CSS to this component only --> <style scoped lang="scss"> .break-ball
{ width: 900px; height: 600px; position: relative; #breakBall { background:
#2a4546; } .container { position: absolute; top: 0; right: 0; bottom: 0; left:
0; background-color: rgba(0, 0, 0, 0.3); text-align: center; font-size: 0;
white-space: nowrap; overflow: auto; } .container:after { content: ""; display:
inline-block; height: 100%; vertical-align: middle; } .dialog { width: 400px;
height: 300px; background: rgba(255, 255, 255, 0.5); box-shadow: 3px 3px 6px
3px rgba(0, 0, 0, 0.3); display: inline-block; vertical-align: middle;
text-align: left; font-size: 28px; color: #fff; font-weight: 600;
border-radius: 10px; white-space: normal; text-align: center; .once-again-btn {
background: #1f9a9a; border: none; color: #fff; } } } </style>