Html5 Canvas动画基础碰撞检测的实现


Posted in HTML / CSS onDecember 06, 2018

在Canvas中进行碰撞检测,大家往往直接采用游戏引擎(Cocos2d-JS、Egret)或物理引擎(Box2D)内置的碰撞检测功能,好奇的你有思考过它们的内部运行机制吗?下面将针对基本的碰撞检测技术进行讲解:

1、基于矩形的碰撞检测

所谓碰撞检测就是判断物体间是否发生重叠,这里我们假设讨论的碰撞体都是矩形物体。下面示例中我们将创建两个rect对象A和B(以下简称A,B),其中A位置固定,B跟随鼠标移动,当A,B重叠时控制台将提示intercect!!

1、创建Rect对象

这里我们新建Rect.js,建立Rect对象并为其添加原型方法draw,该方法将根据当前对象的属性(位置、大小)绘制到传入的画布对象(context)中。

代码如下 :

function Rect(x,y,width,height) {
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;
}

Rect.prototype.draw = function(context){
    context.save();
    context.translate(this.x,this.y);
    context.fillRect(0,0,this.width,this.height);
    context.restore();
}

2、获取鼠标位置

因为B需要跟随鼠标移动所以我们需要检测鼠标在画布的当前位置。创建Capturemouse函数检测鼠标在传入的文档节点(element)上的移动并返回一个mouse对象(其中包含了鼠标的x,y坐标)。

代码如下:

function Capturemouse (element) {
    var mouse={x:null,y:null};
    element.addEventListener('mousemove',function (event) {
        var x, y;
        if(event.pageX || event.pageY){
            x = event.pageX;
            y = event.pageY;
        }else{
            x = event.clientX+document.body.scrollLeft+
                document.documentElement.scrollLeft;
            y = event.clientY+document.body.scrollTop+
                document.documentElement.scrollTop;
        }
        x -=element.offsetLeft;
        y -=element.offsetTop;
        mouse.x = x;
        mouse.y = y;
    },false);
    return mouse;
}

3、碰撞检测

检测A,B是否发生重叠,在讨论是否发生重叠时我们可以先看看没有重叠的四种情况,如下图:

Html5 Canvas动画基础碰撞检测的实现

以下是对这四种状态的判断:

1、rectB.y+rectB.height < rectA.y
2、rectB.y > rectA.x +rectA.width
3、rectB.y > rectA.y + rectA.height
4、rectB.x+rectB.width < rectA.x

知道如何判断没有重叠的状态,那发生重叠的状态该如何判断呢?没错“取反”!,我们创建函数Interaect并添加到Init.js中,该函数传入两个Rect对象参数,当两Rect对象发生重叠将返回true。

代码如下:

function Intersect(rectA,rectB) {
    return !(rectB.y+rectB.height < rectA.y || rectB.y > rectA.x +rectA.width ||
        rectB.y > rectA.y + rectA.height|| rectB.x+rectB.width < rectA.x)
}

4、动画循环

新建animationjs,设置requestAnimationFrame()动画函数。

在循环体中将做以下两件事:

  • “清空”当前canvas中内容,为绘制下一帧做准备。
  • 检测A,B是否发生重叠,若重叠则在控制台输出interact!!!
  • 检测当前鼠标在canvas上的移动并将鼠标位置更新到B的位置属性中。
  • 根据新的位置属性重新绘制A,B(当然,A的位置不会更新但因为每次循环将清空canvas所以需要重新绘制)

代码如下:

function drawAnimation() {
    window.requestAnimationFrame(drawAnimation);
    context.clearRect(0, 0, canvas.width, canvas.height);
    if(Intersect(rectA,rectB)){
     console.log('interact!!!!');
    }
    if(mouse.x){
        rectB.x = mouse.x;
        rectB.y = mouse.y;
    }
    rectA.draw(context);
    rectB.draw(context);
}

3、初始化

新建Init.js ,获取canvas元素并绑定鼠标移动检测,初始化Rect对象A和B,最后开启动画循环。

代码如下:

window.onload = function () {
    canvas = document.getElementById('collCanvas');
    context = canvas.getContext('2d');
    Capturemouse(canvas);
    rectA = new Rect(canvas.width/2,canvas.height/2,100,100);
    rectB = new Rect(100,100,100,100);
    drawAnimation();
}

2、基于圆形的碰撞检测

说完矩形碰撞,我们再来聊聊圆形碰撞,同样我们将创建两个Circle对象A和B(以下简称A,B),其中A位置固定,B跟随鼠标移动,当A,B重叠时控制台将提示intercect!!

1、创建circle对象

function Circle(x,y,radius) {
    this.x = x;
    this.y = y;
    this.radius = radius;
}

Circle.prototype.draw = function(context){
    context.save();
    context.translate(this.x,this.y);
    context.beginPath();
    context.arc(0,0,this.radius,0,Math.PI*2,false);
    context.fill();
    context.restore();
}

2、检测圆形碰撞

圆形间碰撞检测可以简单地通过两圆心间距离与两圆半径之和的比较做判断,当两圆心距离小于两圆半径之和时则发生碰撞。

如下图:

Html5 Canvas动画基础碰撞检测的实现

所以我们首先需要做的是计算出两圆心间的距离,这里我们将用到两点间的距离公式,如下:

Html5 Canvas动画基础碰撞检测的实现

当取得两圆心间的距离之后将与两圆半径之和比较,如果距离小于半径之和则返回true。

现在我们更新Interaect函数。

代码如下:

function Intersect(circleA,circleB) {
    var dx = circleA.x-circleB.x;
    var dy = circleA.y-circleB.y;
    var distance = Math.sqrt(dx*dx+dy*dy);
    return distance < (circleA.radius + circleB.radius);
}

3、动画循环

更新animation.js,这里我们替换Rect对象为Circle对象。

代码如下:

function drawAnimation() {
    window.requestAnimationFrame(drawAnimation);
    context.clearRect(0, 0, canvas.width, canvas.height);
    if(Intersect(circleA,circleB)){
     console.log('interact!!!!');
    }
    if(mouse.x){
        circleB.x = mouse.x;
        circleB.y = mouse.y;
    }
    circleA.draw(context);
    circleB.draw(context);
}

4、初始化

更新Init.js ,初始化Circle对象A和B,最后开启动画循环。

代码如下:

window.onload = function () {
    canvas = document.getElementById('collCanvas');
    context = canvas.getContext('2d');
    Capturemouse(canvas);
    circleA = new Circle(canvas.width/2,canvas.height/2,100);
    circleB = new Circle(100,100,100);
    drawAnimation();
}

3、基于矩形与圆形间的碰撞检测

前面讲解都是单一形状间的碰撞检测,下面我们将检测矩形和圆形间的碰撞。

1、检测碰撞

和矩形检测一样,我们先看看没有发生碰撞的四种情况。

如下图:

Html5 Canvas动画基础碰撞检测的实现

以下是对这四种状态的判断:

  • Circle.y + Circle.radius < Rect.y
  • Circle.x - Circle.radius > Rect.x + Rect.width
  • Circle.y - Circle.radius > Rect.y + Rect.height
  • Circle.x + Circle.radius < Rect.x

更新Interaect函数,将没有重叠的状态“取反”,向该函数传入Rect对象和Circle对象,当Rect对象与Circle对象发生重叠将返回true。

代码如下:

function Intersect(Rect,Circle) {
    return !(Circle.y + Circle.radius < Rect.y ||
             Circle.x - Circle.radius > Rect.x + Rect.width ||
             Circle.y - Circle.radius > Rect.y + Rect.height ||
             Circle.x + Circle.radius < Rect.x)
}

2、动画循环

更新animation.js,这里我们将circle对象跟随鼠标运动,并检测与固定位置的rect对象的碰撞。

代码如下:

function drawAnimation() {
    window.requestAnimationFrame(drawAnimation);
    context.clearRect(0, 0, canvas.width, canvas.height);
    if(Intersect(rect,circle)){
     console.log('interact!!!!');
    }
    if(mouse.x){
        circle.x = mouse.x;
        circle.y = mouse.y;
    }
    circle.draw(context);
    rect.draw(context);
}

3、初始化

更新Init.js ,初始化Circle对象和Rect对象,最后开启动画循环。

代码如下:

window.onload = function () {
    canvas = document.getElementById('collCanvas');
    context = canvas.getContext('2d');
    Capturemouse(canvas);
    circle = new Circle(100,100,100);
    rect = new Rect(canvas.width/2,canvas.height/2,100,100);
    drawAnimation();
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3简单练习实现遨游浏览器logo的绘制
Jan 30 HTML / CSS
利用CSS3实现平移动画效果示例代码
Oct 12 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
CSS3 animation ? steps 函数详解
Aug 30 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
浅谈基于HTML5的在线视频播放方案
Feb 18 HTML / CSS
canvas裁剪clip()函数的具体使用
Mar 01 HTML / CSS
amazeui页面分析之登录页面的示例代码
Aug 25 HTML / CSS
HTML常用标签超详细整理
Mar 19 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 #HTML / CSS
canvas探照灯效果的示例代码
Nov 30 #HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 #HTML / CSS
canvas拼图功能实现代码示例
Nov 21 #HTML / CSS
详解Canvas 跨域脱坑实践
Nov 07 #HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 #HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 #HTML / CSS
You might like
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
基于PHP读取TXT文件向数据库导入海量数据的方法
2013/04/23 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
php使用mkdir创建多级目录入门例子
2014/05/10 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
Javascript 判断函数类型完美解决方案
2009/09/02 Javascript
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
深入分析escape()、encodeURI()、encodeURIComponent()的区别及示例
2014/08/04 Javascript
jquery中EasyUI实现同步树
2015/03/01 Javascript
javascript等号运算符使用详解
2015/04/16 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
微信小程序购物商城系统开发系列-工具篇的介绍
2016/11/21 Javascript
webpack构建的详细流程探底
2018/01/08 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
vue实现图片上传功能
2020/05/28 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
Python中Numpy mat的使用详解
2019/05/24 Python
python异步实现定时任务和周期任务的方法
2019/06/29 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
Django中URL的参数传递的实现
2019/08/04 Python
宝塔面板成功部署Django项目流程(图文)
2020/06/22 Python
美国乡村商店:Plow & Hearth
2016/09/12 全球购物
美国南部最大的家族百货公司:Belk
2017/01/30 全球购物
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
澳大利亚网上玩具商店:Mr Toys Toyworld
2018/03/25 全球购物
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
爱普生美国官网:Epson美国
2018/11/05 全球购物
数字漫画:comiXology
2020/06/13 全球购物
新学期决心书
2014/03/11 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
大二学年个人总结
2015/03/03 职场文书
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android