如何为我的这个javascript程序创建检测？

Question

我一直在课堂上做的一项作业的基础上进行学习，而我对检测部分感到困惑。

我希望当我的喵喵喵站在站立在pokeball上方时，玩家可以移动键盘来控制喵喵喵，并且pokeball会在一定的延时上随机重新定位。

我如何创建一个函数来检测mew.gif与pokeball重叠的时间？

var _stage = document.getElementById("stage");
var _Mew = document.querySelector("img");
var _PokeBall = document.getElementById("PokeBall");

_stage.style.width = "800px";
_stage.style.height = "600px";
_stage.style.backgroundColor = "black";
_stage.style.marginLeft = "auto";
_stage.style.marginRight = "auto";

_Mew.style.position = "relative"; // Uses top and left from parent
_PokeBall.style.position = "relative"; // Uses top and left from parent

var leftPressed = false;
var rightPressed = false;
var upPressed = false;
var downPressed = false;

var player = [ 400, 300 ]; // Left, Top
var PokeBall = [100, 100];// Top, Left
var uIval = setInterval(update, 22.22); // 30fps update loop

var map = [];  // empty Map Array

window.addEventListener("keydown", onKeyDown);
window.addEventListener("keyup", onKeyUp);
var Pval= setInterval(MovePokeball, 2000);

function generateMap()
{
    for (var row = 0; row < 2; row++)
    {
        for(var col = 0; col <8; col++)
        {
        console.log("In row "+row);
        }
    }
}
/*map[row] = []; // Creating new array in specified row
                for (var col = 0; col <8; col++)
                    {
                    console.log("In row "+row+"doing col"+col);
                    }
*/
function onKeyDown(event)
{
    switch(event.keyCode)
    {
        case 37: // Left.
                if ( leftPressed == false )
                    leftPressed = true;
                break;
        case 39: // Right.
                if ( rightPressed == false )
                    rightPressed = true;
                break;
        case 38: // Up.
                if ( upPressed == false )
                    upPressed = true;
                break;
        case 40: // Down.
                if ( downPressed == false )
                downPressed = true;
                break;
        default:
                console.log("Unhandled key.");
                break;
    }
}

function onKeyUp(event)
{
    switch(event.keyCode)
    {
        case 37: // Left.
                leftPressed = false;
                break;
        case 39: // Right.
                rightPressed = false;
                break;
        case 38: // Up.
                upPressed = false;
                break;
        case 40: // Down.
                downPressed = false;
                break;
        default:
                console.log("Unhandled key.");
                break;
    }
}

function update() // Going to run 30fps
{
    movePlayer();
    // move enemies
    // collision check
    // animate sprites
    PlayerCaught();
    render();
}

function movePlayer()
{
    if ( leftPressed == true && player[0] >= _Mew.width/2)
            player[0] -= 10;
    if ( rightPressed == true && player[0] < 800 - _Mew.width/2)
        player[0] += 10;
    if ( upPressed == true && player[1] >= _Mew.height/2 )
        player[1] -= 10;
    if ( downPressed == true && player[1] < 600 - _Mew.width/2)
        player[1] += 10;
}


function render()
{
    _Mew.style.left = player[0]-_Mew.width/2+"px";
    _Mew.style.top = player[1]-_Mew.width/2+"px";


}


function PlayerCaught()
{
    if (_PokeBall [100,100] = player [100,100])
    window.alert("Mew Has Been Captured!")


}

function MovePokeball()
{
    _PokeBall.style.left= Math.floor(Math.random()*801)+"px";
    _PokeBall.style.top= Math.floor(Math.random()*601)+"px";
}

Answer 1

您正在询问碰撞检测 。 通过确定两个多边形是否相交来完成此操作。 由于您的程序非常简化，因此我提供了一个非常简化的解决方案。 我们将确定图形是否相交。 这不是理想的方法。 通常，图形和物理是完全分开的。 但这将起作用（大部分情况下），并希望它将鼓励您继续尝试。

首先，我们需要两个图像的高度和宽度，以便进行几何魔术。 可以像使用_stage一样在JavaScript中轻松进行设置。 但是，您已经在其他位置（可能是HTML）定义了图像的src ，因此最好在此处定义高度和宽度。

HTML示例：

<img id="PokeBall" src="pokeball.png" style="width:50px; height:50px" />

注意：这使用了“内联CSS”，这是另一种不好的做法。 但这可行，而且我现在不想使简单的事情变得过于复杂。

现在，您的PlayerCaught方法拥有完成工作所需的所有信息，那么我们如何检测冲突？ 如果我们使用矩形，则非常简单。 我们只是确定一个对象的任何一个角是否在另一个对象的内部。 那么我们该怎么做呢？ 基本上，我们看它们是否在X和Y轴上相交。

取两个矩形： A和B 两者都有四个边缘： top ， left ， right和bottom 。 top和bottom的边缘是Y值， left和right的边缘是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
)

将其转换为JavaScript，您将获得碰撞检测功能。 要在程序中获得优势，请使用以下命令：

function findEdges(img){
    var result = [];
    result["left"] = parseInt(img.style.left, 10);
    result["top"] = parseInt(img.style.top, 10);
    result["right"] = result["left"] + parseInt(img.style.width, 10);
    result["bottom"] = result["top"] + parseInt(img.style.height, 10);
    return result;
}

您可以看到，我们使用的是先前设置的width和height以及已用于渲染的top和left的内联样式。

扰流板...

将所有部分放在一起可能看起来像：

function PlayerCaught(){
    if (detectImgCollision(_PokeBall, _Mew)){
        window.alert("Mew Has Been Captured!")
    }
}

function detectImgCollision(imgA, imgB){
    var A = findEdges(imgA);
    var B = findEdges(imgB);
    return detectRectCollision(A, B);
}

function detectRectCollision(A, B){
    return (
        isBetween(A.left, B.left, A.right)
        || isBetween(A.left, B.right, A.right)
    ) && (
        isBetween(A.top, B.top, A.bottom)
        || isBetween(A.top, B.bottom, A.bottom)
    );
}

function isBetween(low, middle, high){
    return (low <= middle && middle <= high);
}