JS падает на chrome

Question

Im пытается сделать игру js используя холст как назначение. Я должен нарисовать муравьев на холсте, и они должны были пойти на еду. Мой код работает до конца. По какой-то причине только одна из ошибок идет на пищу, но настоящая проблема заключается в том, что после еды двух предметов пищи, а муравей идет на треть, js просто падает. Таймер останавливается, мои кнопки перестают работать. Я действительно смущен и не могу понять, почему он это делает. Im вызывая 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

Я исправил его, ребята! Видимо, рисование всех продуктов для каждой ошибки было проблемой, я выбрал ее за пределами цикла for (var i = 0; i < bugArray.length; i ++) {} ", и он исправил ее