HTML5
发布时间:2019-10-08 发布网站:大佬教程 code.js-code.com
大佬教程收集整理的这篇文章主要介绍了Html5 Canvas动画基础碰撞检测的实现,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
在Canvas中进行碰撞检测,大家往往直接采用游戏引擎(Cocos2d-JS、Egret)或物理引擎(Box2D)内置的碰撞检测功能,好奇的你有思
考过它们的内部运行机制吗?下面将针对基本的碰撞检测技术进行讲解:
1、基于矩形的碰撞检测
所谓碰撞检测就是判断物体间是否发生重叠,这里我们假设讨论的碰撞体都是矩形物体。下面示例中我们将创建两个rect对象A和B(以下简称A,B),
其中a位置固定,B跟随鼠标移动,当A,B重叠时控制台将提示intercect!!
1、创建Rect对象
这里我们新建Rect.js,建立Rect对象并
为其添加原型方法draw,该方法将根据当前对象的属性(位置、大小)绘制到传入的画布对象(co
ntext)中。
代码如下 :
function Rect(x,y,width,height)
{
thi
s.x = x;
thi
s.y = y;
thi
s.width = width;
thi
s.height = height;
}
Rect.prototype.draw = function(co
ntext)
{
co
ntext.save(
);
co
ntext.translate(thi
s.x,thi
s.y
);
co
ntext.fillRect(0,thi
s.width,thi
s.height
);
co
ntext.restore(
);
}
大佬总结
以上是大佬教程为你收集整理的Html5 Canvas动画基础碰撞检测的实现全部内容,希望文章能够帮你解决Html5 Canvas动画基础碰撞检测的实现所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。