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 相关文章推荐
纯DOM+CSS3实现简单的小风车动画
Sep 27 HTML / CSS
CSS3 圆角效果
Jul 15 HTML / CSS
用纯css3实现的图片放大镜特效效果非常不错
Sep 02 HTML / CSS
css3和jquery实现的可折叠导航菜单适合放在手机网页的导航菜单
Sep 02 HTML / CSS
深入浅析css3 border-image边框图像详解
Nov 24 HTML / CSS
HTML5 File接口在web页面上使用文件下载
Feb 27 HTML / CSS
canvas实现圆绘制的示例代码
Sep 11 HTML / CSS
详解FireFox下Canvas使用图像合成绘制SVG的Bug
Jul 10 HTML / CSS
详解HTML5中ol标签的用法
Sep 08 HTML / CSS
HTML5 3D衣服摇摆动画特效
Mar 17 HTML / CSS
关于HTML5语义标签的实践(blog页面)
Jul 12 HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 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
PHP新手上路(四)
2006/10/09 PHP
纯PHP生成的一个树叶图片画图例子
2014/04/16 PHP
用PHP代码给图片加水印
2015/07/01 PHP
PHP数组实例详解
2016/06/26 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
详解JS函数重载
2014/12/04 Javascript
node.js中的path.isAbsolute方法使用说明
2014/12/08 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
写给小白的JavaScript引擎指南
2015/12/04 Javascript
javascript中的3种继承实现方法
2016/01/27 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
jquery广告无缝轮播实例
2017/01/05 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
JavaScript+HTML5实现的日期比较功能示例
2017/07/12 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
三种Webpack打包方式(小结)
2018/09/19 Javascript
如何使用 Pylint 来规范 Python 代码风格(来自IBM)
2018/04/06 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
便捷提取python导入包的属性方法
2018/10/15 Python
对python的unittest架构公共参数token提取方法详解
2018/12/17 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
Python代码太长换行的实现
2019/07/05 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
Django REST Swagger实现指定api参数
2020/07/07 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
丝芙兰香港官网:Sephora香港
2018/03/13 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
什么是TCP/IP
2014/07/27 面试题
楼面部长岗位职责范本
2014/02/14 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
2014年政风行风评议工作总结
2014/10/21 职场文书