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绘制百度的小度熊
Oct 29 HTML / CSS
使用CSS3实现圆角,阴影,透明
Dec 23 HTML / CSS
可自定义箭头样式的CSS3气泡提示框
Mar 16 HTML / CSS
HTML5的结构和语义(1):前言
Oct 17 HTML / CSS
HTML5 实现一个访问本地文件的实例
Dec 13 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
html5使用canvas画三角形
Dec 15 HTML / CSS
HTML5 video标签(播放器)学习笔记(二):播放控制
Apr 24 HTML / CSS
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
Aug 31 HTML / CSS
HTML5之语义标签介绍
Jul 07 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
html中两种获取标签内的值的方法
Jun 10 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
Laravel 4 初级教程之视图、命名空间、路由
2014/10/30 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
深入理解PHP的远程多会话调试
2017/09/21 PHP
ThinkPHP框架实现导出excel数据的方法示例【基于PHPExcel】
2018/05/12 PHP
PHP压缩图片功能的介绍
2019/03/21 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
Laravel Eloquent ORM 实现查询表中指定的字段
2019/10/17 PHP
Javascript结合css实现网页换肤功能
2009/11/02 Javascript
window.open以post方式将内容提交到新窗口
2012/12/26 Javascript
js读取cookie方法总结
2014/10/31 Javascript
JS中Location使用详解
2015/05/12 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
JavaScript中将数组进行合并的基本方法讲解
2016/03/07 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
vue插件tab选项卡使用小结
2016/10/27 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
浅谈一个webpack构建速度优化误区
2019/06/24 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
Python向日志输出中添加上下文信息
2017/05/24 Python
深入探究Django中的Session与Cookie
2017/07/30 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
python设定并获取socket超时时间的方法
2019/01/12 Python
如何通过Python实现标签云算法
2019/07/02 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
Python 改变数组类型为uint8的实现
2020/04/09 Python
三星俄罗斯授权在线商店:Samsung俄罗斯
2019/09/28 全球购物
精彩的推荐信范文
2013/11/26 职场文书
英语演讲稿范文
2014/01/03 职场文书
就业协议书怎么填
2014/04/11 职场文书
食品安全宣传标语
2014/06/07 职场文书
社区娱乐活动方案
2014/08/21 职场文书
重阳节演讲稿:尊敬帮助老人 弘扬传统美德
2014/09/25 职场文书
同意离婚答辩状
2015/05/22 职场文书
基于Python编写简易版的天天跑酷游戏的示例代码
2022/03/23 Python
Python基本知识点总结
2022/04/07 Python