Question

好的我有2张图片，其中一张是我跳跃的玩家，另一张是向玩家滚动的一个桶。我在谷歌搜索得到了我在一起的所有代码。问题是我无法找到可以检测冲突的代码。我需要那些代码，所以当枪管击中玩家的游戏时。

GamePlay按下开始按钮，滚筒朝向播放器滚动，按下屏幕上的任意位置以使玩家跳跃。如果您想尝试使用源代码，请http://sourceforge.net/projects/pfbw/files/Platformer.zip/download感谢您提供的任何帮助。我尝试的每个代码都不适用于碰撞检测。

<!DOCTYPEhtml>

<html>
    <head>
        <script>
        function jump() { // controls player jump
            document.getElementById("m").style.top = "250px";
            setTimeout(function () {
                document.getElementById("m").style.top = "390px";
            }, 1500)
        }

        function moving() { // controls barrel movement
            var pp = document.getElementById("b");
            var left = parseInt(pp.style.left);
            var tim = setTimeout("moving()", 50); // controls the speed
            left = left - 25; // move by 50 pixels
            pp.style.left = left + "px";
        }
        </script>
    </head>
    <body>
        <img src="back.png" onclick="jump()" style="position:absolute;top:0;left:0; height:570px;width:1200px;zdepth:1;" />
        <img id="m" src="Mario.png" style="position:absolute;top:390px;left:75px;height:80px;width:80px;zdepth:2;" />
        <img id="b" src="barrel.png" style="position:absolute;top:390px;left:1000px;height:80px;width:80px;zdepth:2;" />
        <img id="s" src="start.png" onclick="moving()" style="position:absolute;top:0px;left:500px;height:80px;width:80px;zdepth:2;" />
    </body>
</html>

Answer 1

您需要检查它们是否在页面上的position内。您正在使用top和left来设置图片的坐标，因此您需要检查它们是否在同一个top和left } offsets：

var topEq = document.getElementById('m').style.top === document.getElementById('b').style.top;
var leftEq = document.getElementById('m').style.left === document.getElementById('b').style.left;

if(topEq && leftEq){
  //game over
}

或者，您可以在while循环中运行整个游戏：

var playing = true;
while(playing){

  //game

  if(topEq && leftEq){
    playing = false;
  }
}

Answer 2

您需要手动检查项目是否重叠。我知道这样做最简单的方法是测试一个矩形与另一个矩形不重叠。

提供上/下/左/右的

element.getClientRects()。示例碰撞检测功能可能如下所示：

function colides(elem1, elem2){
    var cr1 = elem1.getClientRects()[0]; // get the rectangle for the image
    var cr2 = elem2.getClientRects()[0]; // ''
    var heightOffset = (cr1.bottom - cr2.top); // calculate relative positions vert
    var widthOffset = (cr1.right - cr2.left ); // calculate relative positions horiz
    if ( heightOffset < (elem1.clientHeight + elem2.clientHeight) // bottom of one below top of other
        && heightOffset > 0                                       // and not below bottom of other
        && widthOffset < (elem1.clientWidth + elem2.clientWidth)  // left of one further right than right of other 
        && widthOffset > 0)                                       // and not to the right of it 
             return true;                                         // this is a collision.
    return false; // we didn't return true, so it must be false.
}

这会产生误报，因为你的演员没有占据整个矩形，但这是一个开始。

将上述函数插入到您的代码中，并在moving函数中使用它，如下所示：

function moving() // controls barrel movement
{

    var barrel = document.getElementById("b"); // get the barrel image
        var mario = document.getElementById("m");  // get the mario image
    var left = parseInt(pp.style.left);        // figure out how far left the barrel is
    if (colides(barrel, mario)){               // if there is a collision
        barrel.style.left = "1000px"       // reset position
        alert ("game over");               // notify player
    } else {                                   // else
        var tim = setTimeout("moving()",50);  // run this code again in 50ms
        left = left-25;  // move by 25 pixels // set the left coordinate down by 25px
        if (left < 0) left = 1000;            // if we would go off the screen, reset
        barrel.style.left = left+"px";        // set the position of the image to match our variable
        }

}

修改添加了评论。这些应该解释代码。

javascript如何让<img/>在DOM而不是画布中相互冲突

2 个答案: