Canvas实现弹球效果的方法和思路是什么
导读：这篇文章主要给大家介绍“Canvas实现弹球效果的方法和思路是什么”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“Canvas实现弹球效果的方法和思路是什么”文章能对大家有...
这篇文章主要给大家介绍“Canvas实现弹球效果的方法和思路是什么”的相关知识，下文通过实际案例向大家展示操作过程，内容简单清晰，易于学习，有这方面学习需要的朋友可以参考，希望这篇“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实现弹球效果的方法和思路是什么”的内容就介绍到这，感谢各位的阅读，相信大家对Canvas实现弹球效果的方法和思路是什么已经有了进一步的了解。大家如果还想学习更多知识，欢迎关注网络，小编将为大家输出更多高质量的实用文章！
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： Canvas实现弹球效果的方法和思路是什么
本文地址： https://pptw.com/jishu/654576.html