Обнаружение столкновений в javascript

Question

Я реализую пользовательский захват пространства, как в HTML/javascript. Пока все работает нормально, но обнаружение столкновений кажется проблемой. После поиска нескольких решений в Интернете, вот что я до сих пор.

Мои враги представлены в массиве, как это:

function Logo(I){ 
    I = I || {}; 
    I.sprite = new Image(); 
    I.active = true; 

    I.width = 25; 
    I.height = 25; 

    I.explode = function(){ 
     this.active = false; 
    } 

    I.draw = function(){ 
     context.drawImage(I.sprite,this.x,this.y); 
    } 

    I.setRes = function(name){ 
     this.sprite.src = name; 
    } 

    return I; 
} 

который заполняется следующим образом:

var logoArray = []; 
    for(i=0;i<logoData.length;i++){ 
     logoArray.push(Logo({ 
      x: logoData[i].x, 
      y: logoData[i].y 
     })); 
     logoArray[i].setRes("./graphics/logo_slices/logo_" + logoData[i].name + ".png"); 
     console.log(logoArray[i].sprite.src); 
    } 

Столкновение обрабатываются как это (enemy.explode сделать this.active = false):

function handleCollision(){ 
    playerBullets.forEach(function(bullet) { 
     logoArray.forEach(function(enemy) { 
      if (isCollide(bullet, enemy)) { 
      enemy.explode(); 
      bullet.active = false; 
      } 
     }); 
    }); 
} 

function isCollide(a, b) { 
    return a.x < b.x + b.width && 
     a.x + a.width > b.x && 
     a.y < b.y + b.height && 
     a.y + a.height > b.y; 
} 

Проблема в том, что она делает неактивным все, что находится слева от воздействия poi нт. Я понимаю, что довольно сложно изобразить мою проблему, так счастлив прояснить.

Функциональная Жеребьевка фильтры рисовать только активные элементы массива:

logoArray.forEach(function(logo_slice){ 
    logo_slice.draw(); 
}); 

Спасибо за любую помощь вы можете дать!

Answer 1

Что касается вашей логики столкновения, я бы противоположный подход:

Возьмите 4 случая, которые определяют не сталкиваются и свести на нет их. выше, находясь ниже, кроме того, слева и справа. не являясь ни одним из этих 4, это обязательно приводит к столкновению.

Как я и предполагаю, это и есть причина. Остальная часть вашего «двигателя» выглядит разумно и должна работать.

collide = 

!(a.x + a.width < b.x || 
    a.x > b.x + b.width || 

    a.y + a.height < b.y|| 
    a.y > b.y + b.height) 

Кроме того, вы можете определить радиус для каждого объекта, участвующего в столкновениях, и использовать пересечение через радиус. Конечно, для этого вам нужен центр сущностей.

Редактировать: Для получения более подробной информации и подробного примера различных подходов обнаружения столкновения в JS см. https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection.