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 相关文章推荐
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
js模拟滚动条(横向竖向)
Feb 22 Javascript
JavaScript初学者建议:不要去管浏览器兼容
Feb 04 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
js判断手机号是否正确并返回的实现代码
Jan 17 Javascript
利用Vue v-model实现一个自定义的表单组件
Apr 27 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
Sep 05 Javascript
Vue2几种常见开局方式详解
Sep 09 Javascript
vue移动端实现红包雨效果
Jun 23 Javascript
Vue项目中配置pug解析支持
May 10 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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
约瑟夫环问题的PHP实现 使用PHP数组内部指针操作函数
2010/10/12 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
通过JS 获取Mouse Position(鼠标坐标)的代码
2009/09/21 Javascript
jquery validation插件表单验证的一个例子
2010/03/03 Javascript
JavaScript淡入淡出渐变简单实例
2015/08/06 Javascript
详解Bootstrap的iCheck插件checkbox和radio
2016/08/24 Javascript
Bootstrap modal只加载一次数据的解决办法(推荐)
2017/11/24 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
2018/02/26 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
vue打包之后生成一个配置文件修改接口的方法
2018/12/09 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
Python多线程下载文件的方法
2015/07/10 Python
Python导入oracle数据的方法
2015/07/10 Python
Python使用Srapy框架爬虫模拟登陆并抓取知乎内容
2016/07/02 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
python中import与from方法总结(推荐)
2019/03/21 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
Python多进程编程multiprocessing代码实例
2020/03/12 Python
如何利用python web框架做文件流下载的实现示例
2020/06/02 Python
Sephora丝芙兰澳洲官方网站:国际知名化妆品购物
2016/10/27 全球购物
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
材料工程专业毕业生求职信
2014/03/04 职场文书
少儿节目主持串词
2014/04/02 职场文书
市场部经理岗位职责
2014/04/10 职场文书
小学向国旗敬礼活动方案
2014/09/27 职场文书
租房协议书范例
2014/10/14 职场文书
交通事故协议书范文
2014/10/23 职场文书
华山导游词
2015/02/03 职场文书
2015年幼儿园安全工作总结
2015/05/12 职场文书
环保建议书范文
2015/09/14 职场文书
2016年暑期社会实践活动总结报告
2016/04/06 职场文书
js不常见操作运算符总结
2021/11/20 Javascript
ant design charts 获取后端接口数据展示
2022/05/25 Javascript