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 相关文章推荐
javascript prototype原型操作笔记
Dec 07 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 Javascript
浅谈angularJS 作用域
Jul 05 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
Oct 23 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
axios post提交formdata的实例
Mar 16 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
关于AngularJS中几种Providers的区别总结
May 17 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
在PWS上安装PHP4.0正式版
2006/10/09 PHP
PHPMailer 中文使用说明小结
2010/01/22 PHP
PHP 多维数组排序(usort,uasort)
2010/06/30 PHP
PHP图片处理之图片旋转和图片翻转实例
2014/11/19 PHP
php显示时间常用方法小结
2015/06/05 PHP
Thinkphp框架开发移动端接口(1)
2016/08/18 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
javascript KeyDown、KeyPress和KeyUp事件的区别与联系
2009/12/03 Javascript
javascript整除实现代码
2010/11/23 Javascript
Table冻结表头示例代码
2013/08/20 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
动态加载JS文件的三种方法
2013/11/08 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
JavaScript代码判断输入的字符串是否含有特殊字符和表情代码实例
2017/08/17 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
js中getter和setter用法实例分析
2018/08/14 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
2018/11/25 Javascript
详解vue-cli3多环境打包配置
2019/03/28 Javascript
js打开word文档预览操作示例【不是下载】
2019/05/23 Javascript
nodejs文件夹深层复制功能
2019/09/03 NodeJs
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
2019/12/23 Javascript
把MySQL表结构映射为Python中的对象的教程
2015/04/07 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
pycharm激活方法到2099年(激活流程)
2020/09/22 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
美国第一大药店连锁机构:Walgreens(沃尔格林)
2019/10/10 全球购物
描述内存分配方式以及它们的区别
2016/10/15 面试题
五年级英语教学反思
2014/01/31 职场文书
2016入党心得体会范文
2016/01/06 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js