canvas 弹球

Green

效果

代码

<!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>

思路这就是俩对象，，一个依赖于另一个。。
碰撞检测时实的坐标判断，碰撞完成以后两个速度分量为取反即可。
事件是左右事件。。移动即可。
需要时实刷新，即，帧的概念

[jQuery] canvas 弹球

相关帖子

uniapp & vue 父子、子父、兄弟组件之间的传值

文件对比工具/Beyond Compare

Excel 使用技巧 - 如何使光标所在行的数据自动变颜色

uni-app 利用canvas画简单海报并保存图片

7种好看的鼠标点击效果

好看的CSS3滑动按钮特效

php实现超简的分页功能

PHP版贪吃蛇小游戏

Green LV4