这篇文章将为大家详细讲解有关canvas实现弹球的案例，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
效果
代码
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>弹球</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
// 全局canvas
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
// 弹球对象
class Ball{
x = 100;
y = 40;
xSpeed = -2;
ySpeed = -2;
constructor(){};
getX(){
return this.x;
}
getY(){
return this.y;
}
setX(x){
this.x = x;
}
setY(y){
this.y = y;
}
getXSpeed(){
return this.xSpeed;
}
setXSpeed(xSpeed){
this.xSpeed = xSpeed;
}
getYSpeed(){
return this.ySpeed;
}
setYSpeed(ySpeed){
this.ySpeed = ySpeed;
}
// 绘制小球的方法
draw = () => {
context.beginPath();
context.arc(this.x, this.y, 10, 0, Math.PI * 2, false);
context.strokeRect(0, 0, 400, 400);
context.fill();
};
// 移动操作
move = () => {
this.x = this.x + this.xSpeed;
this.y = this.y + this.ySpeed;
};
// 边缘检测,碰撞检测
checkCanvas = (panel) => {
// 左右
if(this.x < 5 || this.x > 400 - 5){
this.xSpeed = -this.xSpeed;
}
// 上方
if(this.y < 0){
this.ySpeed = -this.ySpeed;
}
// 下方
// 碰到挡板
if(this.y > 390 - 10){
if(this.x > panel.x && this.x < panel.xSize + panel.x){
this.ySpeed = -this.ySpeed;
}else{
alert("游戏结束");
this.x = 100;
this.y = 10;
}
}
}
}
// 增加一个挡板对象
class Panel{
constructor(){};
// 左x
x = 200;
// 左y
y = 390;
// 长度
xSize = 50;
// 宽度
ySize = 5;
draw(){
context.fillRect(this.x, this.y, this.xSize, this.ySize);
}
}
// 创建出一个小球对象
let ball = new Ball();
// 创建出挡板对象
let panel = new Panel();
// 每10秒为一帧
window.setInterval(() => {
// 清空画布
context.clearRect(0, 0, 400, 400);
// 画出小球
ball.draw();
// 画出挡板
panel.draw();
// 移动
ball.move();
// 进行边界判断
ball.checkCanvas(panel);
},10);
// 控制挡板
$("body").keydown((event) => {
if(event.keyCode == 37){
panel.x = panel.x - 5;
// 移出边界问题处理
if(panel.x < 0){
panel.x = 0;
}
}
if(event.keyCode == 39){
panel.x = panel.x + 5;
// 移出边界处理
if(panel.x + panel.xSize > 400){
panel.x = 400 - panel.xSize;
}
}
})
</script>
</body>
</html>思路
这就是俩对象，，一个依赖于另一个。。
碰撞检测时实的坐标判断，碰撞完成以后两个速度分量为取反即可。
事件是左右事件。。移动即可。
需要时实刷新，即，帧的概念
关于canvas实现弹球的案例就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
