javascript - 无法在 setInterval 函数中仅返回一次输出

Question

我正在尝试制作一款宇宙飞船射击游戏。在其中，当子弹击中移动条时，它应该在控制台中返回“击中”。

我已经使用了 setInterval 方法，我正在获取项目符号和栏的位置，并在项目符号击中栏时比较它们。但由于我使用的是 setInterval，它会多次返回“Hit”。如果我在 setInterval 之外编写条件，它就无法正常工作。

我希望它在子弹击中横杆时只返回一次“击中”。

宇宙飞船用方向键移动，用空格开火。

$(document).ready(function() {
  var keyLeft = 37,
    keyRight = 39,
    keyDown = 40,
    keyTop = 38,
    keySpace = 32;
  var spaceship = $("#spaceship");
  var bullet = $("#bullet");
  var speed = 5;
  var bar = $('#bar');
  var bulletPosTop;
  var win_Ht = $(window).height();
  var win_calc = win_Ht - 70;
  var barPos, barPosBottom;

  spaceship.css({
    "position": "absolute",
    "left": 10
  });
  bullet.css({
    "display": "none",
    "position": "absolute"
  });

  bar.css({
    "position": "absolute",
    "top": 0,
    "right": 10
  });

  direction = {
    left: false,
    right: false,
    top: false,
    down: false
  }
  bulletSpeed = 1;
  bulletState = {
    state: "available"
  }

  //When Key is Pressed
  $(document).on("keydown", function(e) {
    e.preventDefault();
    var pressedKey = e.keyCode;
    if (pressedKey == keyLeft) {
      direction.left = true;
    }
    if (pressedKey == keyRight) {
      direction.right = true;
    }
    if (pressedKey == keyTop) {
      direction.top = true;
    }
    if (pressedKey == keyDown) {
      direction.down = true;
    }
    if (pressedKey == keySpace && bulletState.state === "available") {
      bulletState.state = "fire";
    }
  });

  //When key is released
  $(document).on("keyup", function(e) {
    e.preventDefault();
    var releaseKey = e.keyCode;
    if (releaseKey == keyLeft) {
      direction.left = false;
    }
    if (releaseKey == keyRight) {
      direction.right = false;
    }
    if (releaseKey == keyTop) {
      direction.top = false;
    }
    if (releaseKey == keyDown) {
      direction.down = false;
    }
  });


  //Move function for Spaceship and Bullet
  function move() {
    if (direction.left) {
      spaceship.css(
        'left', (spaceship.position().left - speed) + "px"
      );
    }
    if (direction.right) {
      spaceship.css(
        'left', (spaceship.position().left + speed) + "px"
      );
    }
    if (direction.top) {
      spaceship.css(
        'top', (spaceship.position().top - speed) + "px"
      );
    }
    if (direction.down) {
      spaceship.css(
        'top', (spaceship.position().top + speed) + "px"
      );
    }
    if (bulletState.state == "fire") {
      bulletState.state = "unavailable";
      bullet.css({
        "display": "block",
        "left": spaceship.position().left + 50 + "px",
        "top": spaceship.position().top + 50 + "px",
      }).animate({
        "left": "1500"
      }, 1000 / bulletSpeed, function() {
        bullet.css({
          "display": "none",
        })
        bulletState.state = "available";
      });

      //Check Bullet Position with Bar Position
      setInterval(function() {
        bulletPosTop = bullet.css("top").replace("px", "");
        barPos = bar.position().top;
        barPosBottom = bar.position().top + 70;
        if ((bulletPosTop >= barPos) && (bulletPosTop <= barPosBottom)) {
          console.log("Hit");
        }
      }, 100);

    }

  }

  const obstacleMove = () => {
    if (bar.position().top == 0) {
      bar.animate({
        "top": win_calc
      }, 1000);
    } else if (bar.position().top == win_calc) {
      bar.animate({
        "top": 0
      }, 1000);
    }
  }

  setInterval(obstacleMove, 1000);

  setInterval(function() {
    move();
  }, 10);


});

body {
  overflow: hidden;
}

#spaceship {
  width: 50px;
  height: 50px;
  background-image: url('http://www.pngmart.com/files/3/Spaceship-PNG-File.png');
  background-size: contain;
  transform: rotate(90deg);
}

#bullet {
  width: 60px;
}

#bar {
  width: 10px;
  height: 70px;
  background-color: #000;
}

<div id="spaceship">SpaceShip</div>
<div id="bullet">---></div>
<div id="bar"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

请帮忙。

Answer 1

有许多可能的解决方案可以解决该问题。其中之一是在击中目标时将子弹移出可播放屏幕:

if ((bulletPosTop >= barPos) && (bulletPosTop <= barPosBottom)) {
    console.log("Hit");
    // Move outside of playable screen.
    bullet.css({
        "top":"-100px",
    });
}

打开下面的代码片段进行测试:

$(document).ready(function() {
  var keyLeft = 37,
    keyRight = 39,
    keyDown = 40,
    keyTop = 38,
    keySpace = 32;
  var spaceship = $("#spaceship");
  var bullet = $("#bullet");
  var speed = 5;
  var bar = $('#bar');
  var bulletPosTop;
  var win_Ht = $(window).height();
  var win_calc = win_Ht - 70;
  var barPos, barPosBottom;

  spaceship.css({
    "position": "absolute",
    "left": 10
  });
  bullet.css({
    "display": "none",
    "position": "absolute"
  });

  bar.css({
    "position": "absolute",
    "top": 0,
    "right": 10
  });

  direction = {
    left: false,
    right: false,
    top: false,
    down: false
  }
  bulletSpeed = 1;
  bulletState = {
    state: "available"
  }

  //When Key is Pressed
  $(document).on("keydown", function(e) {
    e.preventDefault();
    var pressedKey = e.keyCode;
    if (pressedKey == keyLeft) {
      direction.left = true;
    }
    if (pressedKey == keyRight) {
      direction.right = true;
    }
    if (pressedKey == keyTop) {
      direction.top = true;
    }
    if (pressedKey == keyDown) {
      direction.down = true;
    }
    if (pressedKey == keySpace && bulletState.state === "available") {
      bulletState.state = "fire";
    }
  });

  //When key is released
  $(document).on("keyup", function(e) {
    e.preventDefault();
    var releaseKey = e.keyCode;
    if (releaseKey == keyLeft) {
      direction.left = false;
    }
    if (releaseKey == keyRight) {
      direction.right = false;
    }
    if (releaseKey == keyTop) {
      direction.top = false;
    }
    if (releaseKey == keyDown) {
      direction.down = false;
    }
  });


  //Move function for Spaceship and Bullet
  function move() {
    if (direction.left) {
      spaceship.css(
        'left', (spaceship.position().left - speed) + "px"
      );
    }
    if (direction.right) {
      spaceship.css(
        'left', (spaceship.position().left + speed) + "px"
      );
    }
    if (direction.top) {
      spaceship.css(
        'top', (spaceship.position().top - speed) + "px"
      );
    }
    if (direction.down) {
      spaceship.css(
        'top', (spaceship.position().top + speed) + "px"
      );
    }
    if (bulletState.state == "fire") {
      bulletState.state = "unavailable";
      bullet.css({
        "display": "block",
        "left": spaceship.position().left + 50 + "px",
        "top": spaceship.position().top + 50 + "px",
      }).animate({
        "left": "1500"
      }, 1000 / bulletSpeed, function() {
        bullet.css({
          "display": "none",
        })
        bulletState.state = "available";
      });

      //Check Bullet Position with Bar Position
      setInterval(function() {
        bulletPosTop = bullet.css("top").replace("px", "");
        barPos = bar.position().top;
        barPosBottom = bar.position().top + 70;
        if ((bulletPosTop >= barPos) && (bulletPosTop <= barPosBottom)) {
          console.log("Hit");
          // Move outside of playable screen.
          bullet.css({
            "top":"-100px",
          });
        }
      }, 100);

    }

  }

  const obstacleMove = () => {
    if (bar.position().top == 0) {
      bar.animate({
        "top": win_calc
      }, 1000);
    } else if (bar.position().top == win_calc) {
      bar.animate({
        "top": 0
      }, 1000);
    }
  }

  setInterval(obstacleMove, 1000);

  setInterval(function() {
    move();
  }, 10);


});

body {
  overflow: hidden;
}

#spaceship {
  width: 50px;
  height: 50px;
  background-image: url('http://www.pngmart.com/files/3/Spaceship-PNG-File.png');
  background-size: contain;
  transform: rotate(90deg);
}

#bullet {
  width: 60px;
}

#bar {
  width: 10px;
  height: 70px;
  background-color: #000;
}

<div id="spaceship">SpaceShip</div>
<div id="bullet">---></div>
<div id="bar"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

但是，您还有其他问题我没有解决，因为您的问题没有答案。

但您还应该检查子弹和目标的垂直位置，以测试两者之间的碰撞。目前，命中 仅 当您的子弹的 y 位置位于目标的上下边界之间时，就会记录命中。您还需要检查子弹的 x 位置是否在目标的左右边界之间。