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) {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; box1.x < box2.x + box2.width &&&nbsp; &nbsp; &nbsp; &nbsp; box1.x + box1.width > box2.x &&&nbsp; &nbsp; &nbsp; &nbsp; box1.y < box2.y + box2.height &&&nbsp; &nbsp; &nbsp; &nbsp; box1.y + box1.height > box2.y&nbsp; &nbsp; )}现在，当您想检查两个对象是否正在命中（无论是子弹还是角色本身）时，首先要确保每个对象都具有与其实际位置相匹配的 x、y、宽度和高度属性和大小，然后在循环中（或无论何时检查），只需检查if(areBoxesColliding(someObjectLikePlayerOrBullet, someObjectLikeAnEnemy)) doIt();只需将此基本方法适应您当前的代码，我不知道myVirus.crashWith您的代码是什么样的，但只要确保它基本上是这样的，以及检查您的子弹是否击中敌人的代码。顺便说一句，您再次提到将您的角色放入数组中，但这真的很简单，只需为每个敌人创建一个类构造函数，在渲染时循环遍历该列表，并在检查碰撞时循环遍历它，当您想添加一个新敌人，只需调用.push数组