Javascript Sprites HTML5画布下的边界矩形

我上传了一些图片，作为2D HTML5画布汽车游戏的精灵。我一直在尝试使用精灵的坐标来进行碰撞检测，但这并不顺利。我以前听说过边界矩形，据我所知，它们是精灵下的不可见矩形，有助于碰撞检测（如果我错了，请纠正我）

我在网上见过一些东西，比如

Element.getBoundingClientRect（）

。 有人能帮我在精灵下面放一些边界矩形吗？因为我不懂，而且我在网上找不到任何基础教程

Js代码：Jsbin链接：

---

旋转矩形之间的碰撞检测在数学上很复杂，有几种类型：

检测两个旋转的矩形是否相交（碰撞）

要检测两个旋转矩形是否发生碰撞（但不检测碰撞的位置），可以使用分离轴定理。这里有一个很好的解释：

检测旋转的矩形碰撞的位置，并将回弹应用于矩形

当两个旋转的矩形碰撞时应用回弹需要一些复杂的物理过程。也许最简单的方法是使用像Box2dJS这样的物理库。下面是展示碰撞矩形的Box2dJS的一个很好的演示：

示例代码和演示：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
var cw=画布宽度；
var ch=画布高度；
var BB=canvas.getBoundingClientRect（）；
var offsetX=BB.left；
var offsetY=BB.top；
var isDown=假；
var-startX；
var startY；
var-PI=Math.PI；
var car1Rect，car2Rect；
var cars=[]；
var闭包=（函数（）{
//执行器
函数闭包（x、y、imageObject）{
var iw=imageObject.width；
var ih=imageObject.height；
this.img=imageObject；
这个.x=x；
这个。y=y；
这个.w=iw；
这个h=iw；
这个.cx=x+iw/2；
这.cy=y+ih/2；
这个半径=数学sqrt（iw*iw+ih*ih）/2；
这个。旋转=0；
这个。角=[]；
这个.isDraging=false；
this.collisionType=0；
//角
var w2=iw/2；
var h2=ih/2；
这个.negHalfWidth=-w2；
这个.negHalfHeight=-h2；
这是拐角角=[
Math.atan2（-h2，-w2），//左上角
Math.atan2（h2，-w2），//右上角
Math.atan2（h2，w2），//右下角
Math.atan2（-h2，w2）//左下角
];
这个。旋转到（0）；
}
//
Closure.prototype.draw=function（）{
这个.drawImage（）；
这个.drawBB（真的）；
此.drawBoundingCircle（真）；
};
Closure.prototype.moveBy=function（dx，dy）{
这个.cx+=dx；
这个.cy+=dy；
};
Closure.prototype.rotateTo=函数（角度）{
旋转=角度；
这个。setCorners（）；
};
Closure.prototype.setCorners=function（）{
这个.corners.length=0；
对于（var i=0；i0）{return；}
car1Rect=新关闭（50100，car1）；
车。推（车1列）；
car2Rect=新关闭（50250，car2）；
汽车。推（car2Rect）；
$（“#canvas”）.mousedown（函数（e）{handleMouseDown（e）；}）；
$（“#canvas”）.mousemove（函数（e）{handleMouseMove（e）；}）；
$（“#canvas”）.mouseup（函数（e）{handleMouseUpOut（e）；}）；
$（“#canvas”）.mouseout（函数（e）{handlemouseuput（e）；}）；
$car1Angle.change（函数（）{
car1Rect.rotateTo（$（this.val（）*PI/180）；
draw（）；
});
$car2Angle.change（函数（）{
car2Rect.rotateTo（$（this.val（）*PI/180）；
draw（）；
});
计算碰撞类型（car1Rect，car2Rect）；
draw（）；
$（'#testCollision'）。单击（函数（）{
对数（矩形截面（car1Rect，car2Rect））；
});
}
函数绘图（）{
ctx.clearRect（0,0，cw，ch）；
car2Rect.draw（）；
car1Rect.draw（）；
}
功能手柄向下（e）{
e、 预防默认值（）；
e、 停止传播（）；
startX=parseInt（e.clientX-offsetX）；
startY=parseInt（e.clientY-offsetY）；
isDown=假；
对于（var i=0；i b1y和&y3>b1y和&y4>b1y）|
（y1b2y&&y2>b2y&&y3>b2y&&y4>b2y）||
（y1b2x）{
如果（（x1>b1x&&x2>b1x&&x3>b1x&&x4>b1x）||
（x1b2x&&x2>b2x&&x3>b2x&&x4>b2x）||
（x1

body{背景色：象牙；}
#画布{边框：1px纯红；}

红色车辆角度：

黄金车角：

使用上面的滑块旋转汽车。
将汽车拖近。
边界圆碰撞时变为绿色。
边界矩形碰撞时变为绿色。

是否有比使用边界矩形更简单的碰撞检测方法？是的，我的示例hit测试了边界矩形和边界圆。边界圆比旋转的边界矩形简单得多。请参阅我的示例中使用边界圆的部分，该部分用

//粗略但快速的循环边界命中测试
注释。干杯
var canvas = document.getElementById('background');
var context = canvas.getContext('2d');

//================
//ENTER: USER CAR
//================

//Uploading car sprite
var usercar = new Image();
usercar.src = "http://www.iconshock.com/img_jpg/BETA/communications/jpg/128/car_icon.jpg";

//Setting properties of car
var x = 450;
var y = 730;
var speed = 10;
var angle = -90;
var mod = 0;

function drawUserCar() {
    context.clearRect(0, 0, canvas.width, canvas.height);

    context.save();
    context.translate(x, y);
    context.rotate(Math.PI / 180 * angle);
    context.drawImage(usercar, -(usercar.width / 2), -(usercar.height / 2));
    context.restore();

    obstacleCar1();
}

//Interval for animation
var moveInterval = setInterval(function () {
    drawUserCar();
}, 30);

//=====================
//ENTER: OBSTACLE CAR 1
//=====================

//Uploading obstacle car
var obstcar = new Image();
obstcar.src = "http://www.iconshock.com/img_jpg/BETA/communications/jpg/128/car_icon.jpg";

//Setting properties of obstacle car
var x1 = 450;
var y1 = 300;
var speed1 = 5;
var angle1 = 90;
var mod1 = 0;

function obstacleCar1() {

          x1 += (speed1 * mod1) * Math.cos(Math.PI / 180 * angle1);
          y1 += (speed1 * mod1) * Math.sin(Math.PI / 180 * angle1);

          context.save();
          context.translate(x1, y1);
          context.rotate(Math.PI / 180 * angle1);
          context.drawImage(obstcar, -(obstcar.width / 1), -(obstcar.height / 1));
          context.restore();

          }