VUE+Canvas 实现桌面弹球消砖块小游戏的示例代码
大家都玩过弹球消砖块游戏，左右键控制最底端的一个小木板平移，接住掉落的小球，将球弹起后消除画面上方的一堆砖块。
那么用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>
到此这篇关于VUE+Canvas 实现桌面弹球消砖块小游戏的文章就介绍到这了,更多相关vue弹球消砖块小游戏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
vue实现2048小游戏功能思路详解
试玩地址 项目地址 使用方法: git clone npm i npm run dev 实现思路如下: 用vue-cli搭建项目,对这个项目可能有点笨重,但是也懒的再搭一个 4X4的方格用一个二维数组存放,绑定好后只关心这个二维数组,其他事交给vue 监听键盘事件 2048的核心部分就是移动合并的算法,因为是一个4X4的矩阵,所以只要实现左移的算法,其他方向的移动只需要将矩阵旋转,移动合并,再旋转回来,渲染dom即可 绑定不同数值的样式 分值计算,以及用localstorage存放最高分 关键实
-
使用vue编写一个点击数字计时小游戏
使用vue编写一个点击数字计时小游戏,列入你在文本框中输入3,点击开始会生成一个3行3列的表格,表格数据为1-9随机排列,这时候从1开始点击,按顺序点到9,当按正确顺序点击完毕,会提示所用的时间,如果顺序没有按对,会提示游戏结束. 1.首先下载vue源码,下载地址http://cn.vuejs.org 2.jquery是在面向dom操作,而vue是面向数据操作的,所以使用vue最好不要去操作dom,尽量发挥出vue的独到之处,(如果使用过angularjs可能更容易理解) 3.建立一个普通的ht
-
Vue实现开心消消乐游戏算法
之前做过一个算法题,算法要求就是写一个开心消消乐的逻辑算法,当时也是考虑了一段时间才做出来.后来想了想,既然核心算法都有了,能不能实现一个开心消消乐的小游戏呢,于是花了两天时间做了一个小游戏出来. 效果展示# 先在这里放一个最终实现的效果,还是一个比较初级的版本,大家有什么想法欢迎评论哦 游戏规则: 初始时会给玩家十分的初始分,每拖动一次就减一分,每消除一个方块就加一分,直到最后分数为0游戏结束 任意两个方块都可以拖动 界面设计# 页面的布局比较简单,格子的数据是一个二维数组的形式,说到这里大家
-
基于Vue.js实现数字拼图游戏
先来看看效果图: 功能分析 当然玩归玩,作为一名Vue爱好者,我们理应深入游戏内部,一探代码的实现.接下来我们就先来分析一下要完成这样的一个游戏,主要需要实现哪些功能.下面我就直接将此实例的功能点罗列在下了: 1.随机生成1~15的数字格子,每一个数字都必须出现且仅出现一次 2.点击一个数字方块后,如其上下左右有一处为空,则两者交换位置 3.格子每移动一步,我们都需要校验其是否闯关成功 4.点击重置游戏按钮后需对拼图进行重新排序 以上便是本实例的主要功能点,可见游戏功能并不复杂,我们只需一个个攻
-
vue+canvas实现拼图小游戏
利用 vue+canvas 实现拼图小游戏,供大家参考,具体内容如下 思路步骤 一个拼图拼盘和一个原图参照 对原图的切割以及随机排序 通过W/A/D/S或上下左右进行移动 难度的自主选择 对拼图是否完成的判定 JS实现部分 数据分析 row:拼图的总行数:column:拼图的总列数. (用来设置拼图难度,也是每个拼图块宽高的设置规则) pic[{x,y,row,column,index}]:小拼图的集合,其内元素为小拼图的数据结构. (x.y:拼图块在canvas的绘制规则,初始化后不会进行改变
-
基于vue实现简易打地鼠游戏
本文实例为大家分享了vue实现简易打地鼠游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>打地鼠简易版</title> <script src="js/vue.js"></script> <style type="text/css"&g
-
vue实现打地鼠小游戏
本文实例为大家分享了vue实现打地鼠小游戏的具体代码,供大家参考,具体内容如下 效果图如下: 代码如下: <template> <div class="game"> <h2>打地鼠游戏</h2> <div class="wraper"> <div class="item" v-for="n in TOTAL" :key="n"> <
-
vue实现五子棋游戏
本文实例为大家分享了vue实现五子棋游戏的具体代码,供大家参考,具体内容如下 思路 1.vue实现五子棋 空棋盘开局. 画网格:网格有 15 行 15 列,共有 225 个交叉点 黑先.白后,交替下子,每次只能下一子 胜负判定 按照简单的规则,从当前下子点位的方向判断().如果有一个方向满足连续5个黑子或白子,游戏结束. 2.支持dom和canvas切换 判断浏览器是否支持canvas: false: 不支持 切换dom方式 true: 支持 使用canvas 3.实现悔棋功能 4.实现撤销悔
-
使用vue.js编写蓝色拼图小游戏
之前在网上看到<蓝色拼图>这款小游戏,作者是用jquery写的.于是便考虑能不能用vue.js优雅简单的编写出来呢? Later equals never!说干就干.首先理解游戏的规则:第一关为1*1的方块,第二关为2*2以此类推 该图为第三关3*3的方块.点击一个小方块,该方块和它相邻的方块的的颜色会从黄色变为蓝色,全部变为蓝色就过关了. 现在规则清楚了,开动吧! /*style*/ .game_bg{ background: #333; width: 600px; height: 600p
-
如何用VUE和Canvas实现雷霆战机打字类小游戏
今天就来实现一个雷霆战机打字游戏,玩法很简单,每一个"敌人"都是一些英文单词,键盘正确打出单词的字母,飞机就会发射一个个子弹消灭"敌人",每次需要击毙当前"敌人"后才能击毙下一个,一个比手速和单词熟练度的游戏. 首先来看看最终效果图: emmmmmmmmmmmmm,界面UI做的很简单,先实现基本功能,再考虑高大上的UI吧. 首先依旧是来分析界面组成: (1)固定在画面底部中间的飞机: (2)从画面上方随机产生的敌人(单词): (3)从飞机头部发射