Question

我有一个使用棒图和方形的PNG图片文件的程序。棒图能够在屏幕上移动。当棒图进入正方形时，目前，当PNG图片与正方形碰撞时，我试图让程序将isOverlap变量记录到控制台。但是，我遇到了麻烦，想知道这个问题到底是怎么回事？我的JavaScript文件的代码如下，我有碰撞检测的代码，但它似乎没有正常工作：

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var width = 40
var height = 40;
var x2 = Math.round(Math.random() * (canvas.width - width)) + 1;
var y2 = Math.round(Math.random() * (canvas.height - height)) + 1;

ctx.fillStyle = "blue";
ctx.fillRect(x2, y2, width, height);


var image = new Image();
image.src = "person.png";

var imgWidth = 100; 
var imgHeight = 100;
var x1 = Math.round(Math.random() * (canvas.width - imgWidth)) + 1;
var y1 = Math.round(Math.random() * (canvas.height - imgHeight)) + 1;

function drawPlayer() 
{
    ctx.drawImage(image, x1, y1, imgWidth, imgHeight);
}

function clearPlayer ()
{
    ctx.clearRect(x1, y1, imgWidth, imgHeight);
}

drawPlayer();

function detectCollision()
{
    var top1 = y1;
    var bottom1 = y1 + imgHeight;
    var left1 = x1;
    var right1 = x1 + imgWidth;

    var top2 = y2;
    var bottom2 = y2 + height;
    var left2 = x2;
    var right2 = x2 + width;

    var isOverlap;

    if ((left1 > right2) || (right1 < left2) || (top1 > bottom2) || (bottom1 < top2))
    {
        isOverlap = false;
    }
    else
    {
        isOverlap = true;
    }

    console.log("Overlap = " + isOverlap);
}

detectCollision();

document.addEventListener('keydown', handleKeydown);

Answer 1

摘自我对类似问题的回答......

那么我们如何检测碰撞？如果我们正在使用矩形，那就是   非常简单。我们只是确定一个对象的任何角是否是   在另一个对象里面。那我们该怎么做呢？基本上，我们看是否   它们在X轴和Y轴上相交。

取两个矩形：A和B.两个都有四条边：顶部，左边，右边，   和底部。顶部和底部的边缘是Y值，边缘是左边   右边是X值。两个矩形相交，如果有的话   以下是真的：
(
    A.left < B.left < A.right 
    OR A.left < B.right < A.right 
) AND (
    A.top < B.top < A.bottom 
    OR A.top < B.bottom < A.bottom 
)

将其与碰撞检测进行比较，你会发现你忽略了几种可能性。调整你的if / else语句来模仿这个逻辑应该可以解决问题。

原始答案：How can I create the detection for this javascript program of mine?

此外，请确保您不断重新渲染并检查碰撞。您可以在动画循环中执行此操作，也可以在handleKeydown函数中执行此操作。

检测PNG图像与矩形JavaScript之间的碰撞

1 个答案: