javascript - 在 Javascript `Component` IF/ELSE 语句内隐藏 `` 图像

Question

嗨，所以我目前正在为学校的编码科目设计一个 Javascript 游戏，但遇到了一些小问题。目前的重点是拿到 key 并到达终点区域，以便在尽可能短的时间内停止计时器...当您此时触摸 key 时，由于 IfTouching 语句只是循环，所以如果按键被触摸，我想隐藏它，但我不知道该怎么做？这是相关的代码段；

function startGame() {
    myGameArea.start();
    cleararray()
    myBackground = new component(650, 375, "img/MAP.png", 0, 0, "image");
    myGamePiece = new component(60, 60, "img/forward.gif", 38, 160, "image");
    myHitBox = new component(275, 20, "img/hitbox.png", 250, 240, "image");
    myHitBox1 = new component(30, 180, "img/hitbox.png", 250, 240, "image");
    myHitBox2 = new component(280, 25, "img/hitbox.png", 0, 115, "image");
    myHitBox3 = new component(30, 140, "img/hitbox.png", 120, 111, "image");
    myHitBox4 = new component(145, 25, "img/hitbox.png", 375, 115, "image");
    myHitBox5 = new component(30, 140, "img/hitbox.png", 375, 0, "image");
    item1 = new component(50,50, "img/key.png", 430,40, "image");
}

要隐藏的项目 ID 是 item1(最后一个)，其图像路径为 img/key.png

命中检测是这样的:

this.touching = function(otherthing) {
    var myleft = this.x;
    var myright = this.x + (this.width);
    var mytop = this.y;
    var mybottom = this.y + (this.height);
    var otherleft = otherthing.x;
    var otherright = otherthing.x + (otherthing.width);
    var othertop = otherthing.y;
    var otherbottom = otherthing.y + (otherthing.height);
    var touch = true;
    if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) {
        touch = false;
    }
    return touch;

}

然后这里是 If 语句(这是隐藏函数需要去的地方)

else if (myGamePiece.touching(item1))  {

        alert("You have the KEY!!!! Head to the gate and stop the timer!");
        addTurnToArray(); 
     }

如果您知道如何执行此操作，请帮忙<3

Answer 1

您可以向对象添加可见性标志:

function component( /* ... */ ) {
  // ...
  this.visible = true;
}

然后在 HitTest 中检查可见性:

else if (myGamePiece.touching(item1) && item1.visible)  {
    item1.visible = false;    // hide
    alert("You have the KEY!!!! Head to the gate and stop the timer!");
    addTurnToArray(); 
}

当代码渲染帧时，会使用相同的标志来排除它。