Javascript 游戏命中检测仅适用于第一个对象

Question

我已经潜伏了很长时间，但只是在这里注册。该站点对涉及 VBA、PHP、MySQL 和 CSS 的工作和个人项目提供了极大的帮助。我正处于学习 Javascript 的早期阶段，我通过处理实际项目学得最好，所以我正在开发一款名为 Coronaga 的冠状病毒主题的 Galaga 风格游戏。我跟着 w3schools 上的 HTML/JS 游戏教程学习，所以一般框架就像他们的示例游戏一样开始。我希望能够使用对象数组来制作实际冗长且具有挑战性的游戏玩法，而无需大量重复代码，但这是另一场战斗。我有五个“坏人”显示并朝主角向下移动，但尽管对命中检测代码进行了很多摆弄，但我只能让它在最左边的“坏人”上工作。我以前让它在其他“坏人”上工作，但你必须先打左边，所以没用。我正在为对象使用 SVG 图像，因此 CodePen 并不是一个真正有效的演示，但它可以在以下链接中使用：http ://hwmp.hopto.org:100/coronaga/coronaga.html我还将所有代码和资源都放在了 GitHub 上： https ://github.com/jonbuder/coronaga这是游戏区域更新，包括命中检测代码：function updateGameArea() {        myGameArea.clear();    //myScore.text = "SCORE: ";    //myScore.update();        ctx = myGameArea.context;    ctx.font = '20px Consolas';    ctx.fillStyle = '#FFFFFF';    ctx.fillText(("Coronavirus: " + score +"   Humanity: " + peoplePoint), 80, 20);        myGamePiece.speedX = 0;    myGamePiece.speedY = 0;        if (myGameArea.key && myGameArea.key == 37) {myGamePiece.speedX = -4; }    if (myGameArea.key && myGameArea.key == 39) {myGamePiece.speedX = 4; }    if (myGameArea.key && myGameArea.key == 38) {myGamePiece.speedY = -4; }    if (myGameArea.key && myGameArea.key == 40) {myGamePiece.speedY = 4; }    myGamePiece.newPos();        myGamePiece.update();    myBaddie1.newPos();    myBaddie1.update();    myBaddie2.newPos();    myBaddie2.update();    myBaddie3.newPos();    myBaddie3.update();    myBaddie4.newPos();    myBaddie4.update();    myBaddie5.newPos();    myBaddie5.update();    //myVirus.newPos();   if (myGameArea.key && myGameArea.key == 32) {myVirus.launch(); }    myVirus.reloadVirus();    myVirus.newPos();    myVirus.update();        }

Answer 1

OK 所以如果你不介意的话，我会尽量笼统的回答这个问题，制作这个游戏的具体代码可以试着去适应。

基本上，假设您想要进行边界框碰撞（框到框），您需要检查每个的 x 和 y，以及每个的宽度和高度。

意思是，假设我有两个对象，每个对象都有 x、y、width 和 height 属性，x 和 y 在左上角，然后检查它们是否发生碰撞，创建一个函数：

function areBoxesColliding(box1, box2) {

    return (

        box1.x < box2.x + box2.width &&

        box1.x + box1.width > box2.x &&

        box1.y < box2.y + box2.height &&

        box1.y + box1.height > box2.y

    )

}

现在，当您想检查两个对象是否正在命中（无论是子弹还是角色本身）时，首先要确保每个对象都具有与其实际位置相匹配的 x、y、宽度和高度属性和大小，然后在循环中（或无论何时检查），只需检查

if(areBoxesColliding(someObjectLikePlayerOrBullet, someObjectLikeAnEnemy)) doIt();

只需将此基本方法适应您当前的代码，我不知道myVirus.crashWith您的代码是什么样的，但只要确保它基本上是这样的，以及检查您的子弹是否击中敌人的代码。

顺便说一句，您再次提到将您的角色放入数组中，但这真的很简单，只需为每个敌人创建一个类构造函数，在渲染时循环遍历该列表，并在检查碰撞时循环遍历它，当您想添加一个新敌人，只需调用.push数组