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 相关文章推荐
Jquery CheckBox全选方法代码附js checkbox全选反选代码
Jun 09 Javascript
javascript学习笔记(十七) 检测浏览器插件代码
Jun 20 Javascript
js multiple全选与取消全选实现代码
Dec 04 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
使用JQuery在线制作ppt并在线演示源码特效
Sep 08 Javascript
简单了解JavaScript操作XPath的一些基本方法
Jun 03 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
微信小程序之电影影评小程序制作代码
Aug 03 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
vue动态设置img的src路径实例
Sep 18 Javascript
openlayers4.6.5实现距离量测和面积量测
Sep 25 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
ThinkPHP模板中数组循环实例
2014/10/30 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
Laravel框架中自定义模板指令总结
2017/12/17 PHP
Html中JS脚本执行顺序简单举例说明
2010/06/19 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
jquery 动态遍历select 赋值的实例
2018/09/12 jQuery
详解JS浏览器事件循环机制
2019/03/27 Javascript
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
浅析JS中NEW的实现原理及重写
2020/02/20 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
vue实现移动端H5数字键盘组件使用详解
2020/08/25 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
详解vue-cli项目在IE浏览器打开报错解决方法
2020/12/10 Vue.js
设计模式中的原型模式在Python程序中的应用示例
2016/03/02 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
python处理“
2019/06/10 Python
聊聊python中的循环遍历
2020/09/07 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
使用CSS3制作一个简单的Chrome模拟器
2015/07/15 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
美国最大的旗帜经销商:Carrot-Top
2018/02/26 全球购物
为什么要做架构设计
2015/07/08 面试题
旅游管理专业个人求职信范文
2013/12/24 职场文书
思想专业自荐信范文
2013/12/25 职场文书
给校长的建议书500字
2014/05/15 职场文书
2014年党员创先争优承诺书
2014/05/29 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
社会实践活动总结
2015/02/05 职场文书
护士个人年度总结范文
2015/02/13 职场文书
2015年清明节演讲稿范文
2015/03/17 职场文书
24年收藏2000多部退役军用电台
2022/02/18 无线电
Python何绘制带有背景色块的折线图
2022/04/23 Python