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

How can I create the detection for this javascript program of mine?

本文关键字:程序 javascript 创建 检测 我的      更新时间:2023-09-26

我一直在构建我们在课堂上做过的作业,我在检测部分被难住了。

我希望当我的new站在pokeball上时被"抓住",玩家移动键盘来控制new, pokeball会在一段时间内随机重新定位。

我如何创建一个函数,将检测当新的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";
}

你问的是碰撞检测。这是通过确定两个多边形是否相交来完成的。由于您的程序非常简化,所以我提供一个非常简化的解决方案。我们将确定图形是否相交。这不是理想的做法。通常,图像和物理是完全分离的。但这是可行的(大多数情况下),希望它能鼓励你继续尝试。

首先,我们需要两个图像的高度和宽度,以便我们可以执行几何魔术。这可以很容易地在JavaScript中设置,就像您为_stage所做的那样。但是,您已经在其他地方(可能在HTML中)定义了图像的src,因此最好在那里定义高度和宽度。

HTML例子:

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

注意:这使用了"inline CSS",这是另一个不好的做法。但这是有效的,我不想现在把简单的事情过于复杂化。

现在你的PlayerCaught方法有了完成它的工作所需的所有信息,那么我们如何检测碰撞?如果我们处理的是矩形,就很简单了。我们只需要确定一个物体的角是否在另一个物体的内部。我们怎么做呢?基本上,我们看它们是否在X轴和Y轴上相交。

取两个矩形:AB。它们都有四条边:top, left, rightbottom。边topbottom为Y值,边leftright为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;
}

你可以看到我们正在使用我们之前为widthheight以及你已经用于渲染的topleft设置的内联样式。

剧透……

把所有的片段放在一起可能看起来像:

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