Question

我试图用画布作为作业制作一个js游戏。我应该在画布上画蚂蚁，他们应该去吃饭。我的代码可以扩展。出于某种原因，只有一个虫子去寻找食物，但真正的问题是，在吃了两个食物之后，当蚂蚁进入第三个时，js就会崩溃。定时器停止，我的按钮停止工作。我真的很困惑，无法弄清楚为什么这样做。我调用requestAnimationFrame移动蚂蚁和我一直调用的函数移动它们是：

function repeatOften() {
  var cur_time = Date.now();
  var delta_time = (cur_time - last_frame) / 1000;
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  //ctx.fillRect(0, 0, canvas.width, canvas.height);

  //update each bug
  for (var i = 0; i < bugArray.length; i++) {
    if (foodArray.length != 0) {
      bugArray[i].cur_target = foodArray[0];
      var shortest_dist = Math.sqrt(((foodArray[0].xpos - bugArray[i].xpos) * (foodArray[0].xpos - bugArray[i].xpos)) + ((foodArray[0].ypos - bugArray[i].ypos) * (foodArray[0].ypos - bugArray[i].ypos)));

      for (var a = 0; a < foodArray; a++) {
        if (Math.sqrt(((foodArray[a].xpos - bugArray[i].xpos) * (foodArray[a].xpos - bugArray[i].xpos)) + ((foodArray[a].ypos - bugArray[i].ypos) * (foodArray[a].ypos - bugArray[i].ypos))) < shortest_dist) {
          bugArray.cur_target = foodArray[a];
          shortest_dist = Math.sqrt(((foodArray[a].xpos - bugArray[i].xpos) * (foodArray[a].xpos - bugArray[i].xpos)) + ((foodArray[a].ypos - bugArray[i].ypos) * (foodArray[a].ypos - bugArray[i].ypos)));
        }
      }

      // go towards the cur_target
      if ((((bugArray[i].xpos - bugArray[i].cur_target.xpos) >= 0) && ((bugArray[i].xpos - bugArray[i].cur_target.xpos) < 10)) && (((bugArray[i].ypos - bugArray[i].cur_target.ypos) >= 0) && ((bugArray[i].ypos - bugArray[i].cur_target.ypos) < 10))) {
        removeFood(bugArray[i].cur_target);
      }

      if ((bugArray[i].xpos - bugArray[i].cur_target.xpos) > 0) {
        bugArray[i].xpos -= bugArray[i].speed * delta_time;
      } else if ((bugArray[i].xpos - bugArray[i].cur_target.xpos) < 0) {
        bugArray[i].xpos += bugArray[i].speed * delta_time;
      }

      if ((bugArray[i].ypos - bugArray[i].cur_target.ypos) > 0) {
        bugArray[i].ypos -= bugArray[i].speed * delta_time;
      } else if ((bugArray[i].ypos - bugArray[i].cur_target.ypos) < 0) {
        bugArray[i].ypos += bugArray[i].speed * delta_time;
      }
    }
    //draw foods

    for (var i = 0; i < foodArray.length; i++) {
      drawFood(foodArray[i]);
    }
  }

  //update time

  time -= delta_time;
  last_frame = cur_time;
  var timespan = document.getElementById("time");
  timespan.innerHTML = Math.round(time) + " seconds";
  if (Math.round(time) == 0 || foodArray.length == 0) {
    DisplayScore();
    pause();
  } else {
    drawBugArray();
    GlobalID = requestAnimationFrame(repeatOften);
    if (Math.round(time) % ((Math.round(Math.random() * 300) + 1)) == 0) {
      spawnBug();
    }
  }
}

我的drawfood和drawbugarray函数只是在画布上绘制食物和虫子的模板，我的删除食物功能如下：

function removeFood(food) {
  for (var i = 0; i < foodArray.length; i++) {
    if (foodArray[i] == food) {
      var temp = foodArray[i];
      foodArray[i] = foodArray[foodArray.length - 1];
      foodArray.pop();
      return temp;
    }
  }
}

我非常感谢任何帮助！提前谢谢你：）

Answer 1

我修好了伙计！显然是为每个bug绘制了所有食物的问题我把它带到了“for（var i = 0; i＆lt; bugArray.length; i ++）{}”循环之外并修复了它

JS在chrome上崩溃了

1 个答案: