如何正确使用 setTimeout 和立即调用的函数？

Question

我正在制作一个游戏，如果玩家从顶部击中敌人，在 1 秒后（即显示死亡动画），敌人将拼接出阵列。

一个一个击杀敌人的时候没问题，但是当两个敌人同时被击杀时，问题就出现了。

例如，如果敌人被杀死时在阵列的2和3位置。拼接好后3位就到了2位
第二个拼接不起作用，因为位置已经改变。

这个方法或其他方法是否有修复方法，或者我的逻辑完全无效。

   for (var i = 0; i < enemies.length; i++) {
     var collWithPlayer= that.collisionCheck(enemies[i], player);

         if (collWithPlayer == 't') { //kill enemies if collision is from top
          enemies[i].state = 'dead';
          player.velY = -((player.speed));

          score.totalScore += 1000;
          score.updateTotalScore();

          //immediately-invoked function for retaining which enemy died
          (function(i){
            setTimeout(function() { //show squashed enemy for a brief moment then splice
              enemies.splice(i, 1);
            }, 1000);
          })(i);

Answer 1

使用反向循环。

for (var i = enemies.length; i--;){
   // your stuff here
   // hopefully the timeout isn't necessary, or this still has a chance of not working, considering race conditions
   enemies.splice(i, 1);
}
// if it is, do the timeout outside of the for loop

这样，当你拼接时，你拼接在你身后，而不是在你面前。

Answer 2

您也可以像下面这样过滤数组。

function myfunc(){
  var enemies = [1,2,3,4,5];
  var elementToRemove = 3;
  enemies = enemies.filter(function(val){
    return (val !== elementToRemove ? true : false);
  },elementToRemove);
  alert('[' + enemies.join(' , ') + ']');
 }

<button id="btn" onclick="myfunc();">Go</button>

Answer 3

所以我所做的是在敌人数组上使用过滤函数，returns一个新数组只包含还活着的敌人，或者只死了一小会儿。

在 'dead' 和 'remove' 之间创建延迟可以通过在对象上使用 'decay' 属性来完成。您可以 update/increase 每个 game-tick.

这个 decay-property 的值

// inside a gametick loop

var enemyCollisions = [];

enemies = enemies.filter(function (item) {
  collisionWithPlayer = that.collisionCheck(item, player);
  
  if (collisionWithPlayer === 't') {
    item.state = 'dead';
    item.decay = 0;
    
    enemyCollisions.push({
      direction: collisionWithPlayer,
      with: item
    });
  }
  
  if (typeof item.decay === 'number') {
    item.decay = item.decay + 1;
  }
  
  return (item.state !== 'dead' && item.decay > 62);
});


enemyCollisions.forEach(function (item) {
  if (item.direction === 't') {
    player.velY = -((player.speed));

    score.totalScore += 1000;
    score.updateTotalScore();
  } else {
    //TODO deal with collisions other then 't'
  }
});

Answer 4

您可以简单地捕获实际的 enemies[i] 对象而不是 i，以便在 post-mortem 显示完成后将其从数组中正确删除，无论索引是什么时间：

(function(e){
    setTimeout(function(){
        enemies.splice(enemies.indexOf(e), 1);
    }, 1000);
 })(enemies[i]);

如何正确使用 setTimeout 和立即调用的函数？

How to properly use setTimeout with immediately invoked function?

javascript

arrays

iife