javascript canvas检测小球碰撞


Posted in Javascript onApril 17, 2020

本文实例为大家分享了javascript canvas实现检测小球碰撞的具体代码,供大家参考,具体内容如下

定义一个canvas标签

<div class="cnavasInfo">
 <canvas
  id="canvas"
  width="800"
  height="500"
 ></canvas>
</div>

函数以及相关的逻辑处理

export default {
 data() {
  return {
   canvas: null,
   ctx: null,
   arcObj: {}
  };
 },
 mounted() {
  this.canvas = document.getElementById("canvas");
  this.ctx = this.canvas.getContext("2d");
  // this.move(); // 矩形的边缘碰撞函数
  // this.moveArc(); // 绘制碰撞圆形,对象形式
  this.moveRect()
 },
 methods: {
  move() {
   let x = 0;
   let y = 0;
   let width = 100;
   let height = 100;
   let speedX = 2;
   let speedY = 2;
   let ctx = this.ctx;
   ctx.fillStyle = "red";
   ctx.fillRect(x, y, width, height);
   setInterval(() => {
    ctx.clearRect(x, y, this.canvas.width, this.canvas.height);
    x += speedX;
    if (x > this.canvas.width - width) {
     speedX *= -1;
    } else if (x < 0) {
     speedX *= -1;
    }
    y += speedY;
    if (y > this.canvas.height - height) {
     speedY *= -1;
    } else if (y < 0) {
     speedY *= -1;
    }
    ctx.fillRect(x, y, width, height);
   }, 10);
   // this.requestmove(x,y,width,height,ctx,speedX,speedY); // 请求帧的动画过程
  },
  requestmove(x, y, width, height, ctx, speedX, speedY) {
   ctx.clearRect(x, y, this.canvas.width, this.canvas.height);
   x += speedX;
   if (x > this.canvas.width - width) {
    speedX *= -1;
   } else if (x < 0) {
    speedX *= -1;
   }
   y += speedY;
   if (y > this.canvas.height - height) {
    speedY *= -1;
   } else if (y < 0) {
    speedY *= -1;
   }
   ctx.fillRect(x, y, width, height);
   window.requestAnimationFrame(
    this.requestmove(x, y, width, height, ctx, speedX, speedY)
   );
  },
  moveArc(x, y, r, speedX, speedY) {
   this.x = x;
   this.y = y;
   this.r = r;
   this.speedX = speedX;
   this.speedY = speedY;
   this.moveUpdata = function() {
    this.x += this.speedX;
    if (this.x > this.canvas.width - this.r) {
     this.speedX *= -1;
    } else if (this.x < 0) {
     this.speedX *= -1;
    }
    this.y += this.speedY;
    if (this.y > this.canvas.height - this.r) {
     this.speedY *= -1;
    } else if (this.y < 0) {
     this.speedY *= -1;
    }
   };
  },
  moveRect(){
   // 面向对象编程
   function Rect(x,y,width,height,color,speedX,speedY,ctx,canvas) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
    this.color = color
    this.speedX = speedX
    this.speedY = speedY
    this.ctxRect = ctx
    this.canvas = canvas
   }
   Rect.prototype.draw = function() {
    this.ctxRect.beginPath();
    this.ctxRect.fillStyle = this.color
    this.ctxRect.fillRect(this.x,this.y,this.width,this.height)
    this.ctxRect.closePath();
   }
   Rect.prototype.move = function() {
    this.x += this.speedX
    if(this.x > this.canvas.width - this.width){
     this.speedX *= -1
    } else if(this.x < 0){
     this.speedX *= -1
    }
    this.y += this.speedY
    if(this.y > this.canvas.height - this.height){
     this.speedY *= -1
    } else if(this.y < 0){
     this.speedY *= -1
    }
   }
   let rect1 = new Rect(0,100,100,100,'red',2,2,this.ctx,this.canvas)
   let rect2 = new Rect(300,100,100,100,'blue',-2,-2,this.ctx,this.canvas)
   // rect1.draw();
   // rect2.draw()
   let animate = ()=>{
     this.ctx.clearRect(0,0,this.canvas.width,this.canvas.height)
     rect1.draw()
     rect1.move()
     rect2.draw()
     rect2.move()
    let rect1Min = rect1.x;
    let rect1Max = rect1.x + rect1.width
    let rect2Min = rect2.x
    let rect2Max = rect2.x + rect2.width
    let min = Math.max(rect1Min,rect2Min)
    let max = Math.min(rect1Max,rect2Max)
    if(min < max){
     rect1.speedX *= -1;
     rect1.speedY *= 1;
     rect2.speedX *= -1
     rect2.speedY *= 1
    }
    window.requestAnimationFrame(animate)
   } 
   animate()
  }
 }
};

样式控制

#canvas {
 border: 1px solid black;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用js跨页面保存变量做菜单的方法
Jan 17 Javascript
同一个表单 根据要求递交到不同页面的实现方法小结
Aug 05 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
Dec 30 Javascript
js数组的基本用法及数组根据下标(数值或字符)移除元素
Oct 20 Javascript
JQuery中阻止事件冒泡几种方式及其区别介绍
Jan 15 Javascript
JS数组的赋值介绍
Mar 10 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
vue.js打包之后可能会遇到的坑!
Jun 03 Javascript
Vue使用localStorage存储数据的方法
May 27 Javascript
vue中keep-alive组件的入门使用教程
Jun 06 Javascript
Vue实现浏览器打印功能的代码
Apr 17 #Javascript
基于JavaScript获取url参数2种方法
Apr 17 #Javascript
VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法
Apr 17 #Javascript
vue fetch中的.then()的正确使用方法
Apr 17 #Javascript
如何基于filter实现网站整体变灰功能
Apr 17 #Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 #Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
Apr 17 #Javascript
You might like
浅谈PHP链表数据结构(单链表)
2016/06/08 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
使用js实现按钮控制文本框加1减1应用于小时+分钟
2013/12/09 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
移动端JQ插件hammer使用详解
2015/07/03 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
jQuery mobile转换url地址及获取url中目录部分的方法
2015/12/04 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
JavaScript数组去重的6个方法
2017/01/21 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
2018/08/30 Javascript
vue单页缓存存在的问题及解决方案(小结)
2018/09/25 Javascript
解决vue无法设置滚动位置的问题
2018/10/07 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
利用Electron简单撸一个Markdown编辑器的方法
2019/06/10 Javascript
[05:10]2014DOTA2国际邀请赛 通往胜利之匙赛场探秘之旅
2014/07/18 DOTA
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[01:28:44]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第一场 1月10日
2021/03/11 DOTA
[01:25:38]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第一场 1月19日
2021/03/11 DOTA
python如何实现远程控制电脑(结合微信)
2015/12/21 Python
python学习 流程控制语句详解
2016/06/01 Python
Python编程之string相关操作实例详解
2017/07/22 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
python3.5的包存放的具体路径
2020/08/16 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
商得四方公司面试题(gid+)
2014/04/30 面试题
维稳工作情况汇报
2014/10/27 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
道歉信怎么写
2015/05/12 职场文书
Python中for后接else的语法使用
2021/05/18 Python
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS