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获取和设置CheckBox状态的简单方法
Jul 05 Javascript
解析Jquery中如何把一段html代码动态写入到DIV中(实例说明)
Jul 09 Javascript
CSS+jQuery实现的一个放大缩小动画效果
Sep 24 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
对于jQuery性能的一些优化建议
Aug 13 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
May 31 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
jquery Form轻松实现文件上传
May 24 jQuery
原生JS+Canvas实现五子棋游戏
May 28 Javascript
js异步编程小技巧详解
Aug 14 Javascript
JS栈stack类的实现与使用方法示例
Jan 31 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
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利用cookie实现访问次数统计代码
2011/05/19 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
PHP7匿名类用法分析
2016/09/26 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
prototype Element学习笔记(篇二)
2008/10/26 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
AngularJS使用ngOption实现下拉列表的实例代码
2016/01/23 Javascript
Nodejs进阶:基于express+multer的文件上传实例
2016/11/21 NodeJs
详解js界面跳转与值传递
2016/11/22 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
深入理解jQuery.data() 的实现方式
2016/11/30 Javascript
微信小程序 textarea 组件详解及简单实例
2017/01/10 Javascript
基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)
2017/02/28 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
浅谈vue权限管理实现及流程
2020/04/23 Javascript
[33:09]完美世界DOTA2联赛循环赛 Forest vs DM BO2第二场 10.29
2020/10/29 DOTA
Python的Flask框架中实现分页功能的教程
2015/04/20 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
django ajax json的实例代码
2018/05/29 Python
pandas计算最大连续间隔的方法
2019/07/04 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
Amara美国站:英国高端家居礼品网站,世界各地的奢侈家具品牌
2017/07/26 全球购物
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
Nordgreen台湾官网:极简北欧设计手表
2019/08/21 全球购物
环保倡议书50字
2014/05/15 职场文书
银行开户授权委托书格式
2014/10/10 职场文书
保安2014年终工作总结
2014/12/06 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
小学家长意见怎么写
2015/06/03 职场文书
门卫管理制度范本
2015/08/05 职场文书
2019消防宣传标语!
2019/07/10 职场文书
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis