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

我一直在学习我们在课堂上完成的一项作业，但我在检测部分感到困惑

我希望我的猫咪站在口袋球上方时被“抓到”，玩家移动键盘控制猫咪，口袋球在一个时间延迟内随机重新定位

我如何创建一个函数来检测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";
}

var\u 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=“黑色”；
_stage.style.marginLeft=“自动”；
_stage.style.marginRight=“自动”；
_Mew.style.position=“相对”//使用父对象的顶部和左侧
_PokeBall.style.position=“相对”//使用父对象的顶部和左侧
var leftPressed=false；
var-rightspressed=false；
var upPressed=假；
var-downPressed=false；
var player=[400300]；//左上角
var PokeBall=[100100]；//左上角
var uIval=setInterval（更新，22.22）；//30fps更新循环
变量映射=[]；//空映射数组
window.addEventListener（“keydown”，onKeyDown）；
window.addEventListener（“keyup”，onKeyUp）；
var Pval=设定间隔（MovePokeball，2000年）；
函数生成器映射（）
{
对于（变量行=0；行<2；行++）
{
对于（变量col=0；col=\Mew.height/2）
玩家[1]=10；
如果（按下==true&&player[1]<600-新宽度/2）
玩家[1]+=10；
}
函数render（）
{
_Mew.style.left=播放器[0]-\u Mew.width/2+“px”；
_Mew.style.top=播放器[1]-\u-Mew.width/2+“px”；
}
函数PlayerCaught（）
{
如果（_PokeBall[100100]=玩家[100100]）
window.alert（“Mew已被捕获！”）
}
函数MovePokeball（）
{
_PokeBall.style.left=Math.floor（Math.random（）*801）+“px”；
_PokeBall.style.top=Math.floor（Math.random（）*601）+“px”；
}

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

首先，我们需要两幅图像的高度和宽度，这样我们就可以实现几何魔术。这可以用JavaScript轻松设置，就像您为

\u stage

所做的那样。但是，您已经在其他地方（可能是HTML）定义了图像的

src

，因此最好在那里定义高度和宽度

HTML示例：

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

将其转换为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;
}

您可以看到，我们正在使用前面为

宽度

和

高度

以及已用于渲染的

顶部

和

左侧

设置的内联样式

扰流板

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

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);
}

function PlayerCaught（）{
如果（检测聚合（_PokeBall，_Mew））{
window.alert（“Mew已被捕获！”）
}
}
函数检测聚合（imgA、imgB）{
var A=最终收益（imgA）；
var B=findEdges（imgB）；
返回检测碰撞（A，B）；
}
函数检测冲突（A，B）{
返回(
isBetween（A.左，B.左，A.右）
||isBetween（A.左，B.右，A.右）
) && (
isBetween（A.顶部，B.顶部，A.底部）
||isBetween（A.顶部，B.底部，A.底部）
);
}
功能介于（低、中、高）之间{
返回（这是我在添加您的添加内容后运行代码时遇到的错误。更改的Java/HTML：感谢您迄今为止的帮助，虽然函数仍然有点让我不知所措，但我可以理解它们在做什么，这让我有点头晕，无法继续工作。我可能会尝试添加记分牌计数器和r捕获后重新启动游戏功能。一旦我完成了所有操作，我会尝试升级它，以便每次触球都会增加X Math的捕获概率。随机（1-20），这样你就可以接受命中并继续躲避随机值。当然，还有间隔的额外Pokeball。。。
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);
}