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动态调整TextArea高度的代码
Dec 28 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
Dec 11 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
May 07 Javascript
jquery $(this).attr $(this).val方法使用介绍
Oct 08 Javascript
js 判断上传文件大小及格式代码
Nov 13 Javascript
jquery预览图片实现鼠标放上去显示实际大小
Jan 16 Javascript
清除输入框内的空格
Dec 21 Javascript
vue-quill-editor实现图片上传功能
Aug 08 Javascript
动手写一个angular版本的Message组件的方法
Dec 16 Javascript
Vue函数式组件-你值得拥有
May 09 Javascript
Vue实现手机扫描二维码预览页面效果
May 28 Javascript
Node.js 深度调试方法解析
Jul 28 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 insert语法详解
2008/06/07 PHP
php在线打包程序源码
2008/07/27 PHP
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
jQuery实现表单input中提示文字value随鼠标焦点移进移出而显示或隐藏的代码
2010/03/21 Javascript
Jquery颜色选择器ColorPicker实现代码
2012/11/14 Javascript
javascript 使用 NodeList需要注意的问题
2013/03/04 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
学习Bootstrap滚动监听 附调用方法
2016/07/02 Javascript
将form表单通过ajax实现无刷新提交的简单实例
2016/10/12 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
layui prompt 设置允许空白提交的方法
2019/09/24 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
vue proxy 的优势与使用场景实现
2020/06/15 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
2020/07/09 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
python模块restful使用方法实例
2013/12/10 Python
python实现探测socket和web服务示例
2014/03/28 Python
详解Python中的多线程编程
2015/04/09 Python
Python下载网络小说实例代码
2018/02/03 Python
python实现推箱子游戏
2020/03/25 Python
python 调用API接口 获取和解析 Json数据
2020/09/28 Python
美国领先的户外服装与装备用品店:Moosejaw
2016/08/25 全球购物
预订旅游活动、景点和旅游:GetYourGuide
2019/09/29 全球购物
公益活动策划方案
2014/01/09 职场文书
函授大学生自我鉴定
2014/02/05 职场文书
薪酬专员岗位职责
2014/02/18 职场文书
竞选学委演讲稿
2014/09/13 职场文书
小学教育见习总结
2015/06/23 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
如何用JavaScipt测网速
2021/05/09 Javascript
frg-100简单操作(设置)说明
2022/04/05 无线电