Обнаружение столкновений между кирпичами и шаром (работа с массивом чисел)

Question

Я хочу обнаружить столкновение между моим шаром и моими кирпичами с массивом из чисел. Он работает, но не полностью.

Если вы посмотрите на мой код, вы увидите массив из чисел от 0 до 5. 0 означает, что не обнаружено кирпича, а остальное сделано из цвета. Проблема в том, что моя функция обнаруживает только столкновение с цветом 1 (черный), но не остальное. В чем проблема?

var canvas = document.getElementById("mijnCanvas"); 
var mijnObject = canvas.getContext("2d"); 

var afbeelding = new Image(); 
var balkX = (canvas.width/2)-50; 
var balkY = canvas.height-40; 

var balX = canvas.width/2; 
var balY = canvas.height-50; 
var radius = 8; 
var balNaarX = 5; 
var balNaarY = 5; 

function makenBalkKort() { 
    mijnObject.drawImage(afbeelding, balkX, balkY, afbeelding.width, afbeelding.height); 
} 
afbeelding.src = "Afbeeldingen/BrickSmasher_Balk_Kort.png"; 

function makenBal() { 
    mijnObject.beginPath(); 
    var mijnBalGradient = mijnObject.createRadialGradient(balX, balY, 0, balX, balY, 6); 
    mijnBalGradient.addColorStop(0, "#000000"); 
    mijnBalGradient.addColorStop(1, "#FFFFFF"); 
    mijnObject.fillStyle = mijnBalGradient; 
    mijnObject.strokeStyle = "#000000"; 
    mijnObject.arc(balX, balY, radius, 0, 2*Math.PI, false); 
    mijnObject.fill(); 
    mijnObject.stroke(); 
    mijnObject.closePath(); 
} 

function tekenenObjecten() { 
    mijnObject.clearRect(0, 0, canvas.width, canvas.height); 
    makenBalkKort(); 
    makenBal(); 
    makenMuur(); 
    collisieMetStenenX(); 

    setTimeout(function() { 
     if(balX+balNaarX < radius || balX+balNaarX > canvas.width-radius) { 
      balNaarX = -balNaarX; 
     } 

     if(balY+balNaarY < radius) { 
      balNaarY = -balNaarY; 
     } 

     if(balY+balNaarY > balkY-radius) { 
      if(balX+balNaarX >= balkX && balX+balNaarX <= balkX+afbeelding.width) { 
       balNaarY = -balNaarY; 
      } 
      else { 
       alert("Game over"); 
       document.location.reload(); 
      } 
     } 
     balX += balNaarX; 
     balY += balNaarY; 
    }, 1000); 
} 
setInterval(tekenenObjecten, 20); 

window.addEventListener("keydown", function LinksOfRechts() { 
    mijnObject.clearRect(balkX, balkY, canvas.width, canvas.height); 
    var balkNaarX = 10; 
    var code = event.which || event.keyCode; 
    if(code == 37) { 
     if(balkX > 0) { 
      balkX -= balkNaarX; 
     } 
    } 
    else if(code == 39) { 
     if(balkX < canvas.width-afbeelding.width) { 
      balkX += balkNaarX; 
     } 
    } 
    mijnObject.drawImage(afbeelding, balkX, balkY, afbeelding.width, afbeelding.height); 
}); 

canvas.addEventListener("click", function balkLangMaken() { 
    mijnObject.clearRect(balkX, balkY, canvas.width, canvas.height); 
    afbeelding.src = "Afbeeldingen/BrickSmasher_Balk_Lang.png"; 
    setTimeout(function() { 
     mijnObject.clearRect(balkX, balkY, canvas.width, canvas.height); 
     afbeelding.src = "Afbeeldingen/BrickSmasher_Balk_Kort.png"; 
    }, 3000); 
}); 

var stenenPerRij = 27;        
var steenHoogte = 20; 
var steenBreedte = canvas.width/stenenPerRij; 

var stenen = [ 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0], 
    [0,1,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,3,2,1,0], 
    [0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0], 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
    [0,1,1,0,0,2,2,2,2,0,0,0,0,0,0,1,0,1,4,4,4,0,1,0,0,0,1], 
    [1,0,0,1,0,2,0,0,0,2,0,0,0,0,0,1,0,1,0,0,0,0,1,1,0,0,1], 
    [1,1,1,1,0,2,2,2,2,0,0,0,0,0,0,1,0,1,4,4,0,0,1,0,1,0,1], 
    [1,0,0,1,0,2,0,2,0,0,0,1,0,0,0,1,0,1,0,0,0,0,1,0,0,1,1], 
    [1,0,0,1,0,2,0,0,2,2,0,0,1,1,1,0,0,1,4,4,4,0,1,0,0,0,1], 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
    [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], 
]; 

function makenMuur() { 
    for(var i = 0; i < stenen.length; i = i+1) { 
     for(var j = 0; j < stenen[i].length; j = j+1) { 
      tekenenStenen(j,i,stenen[i][j]); 
     } 
    } 
} 

function tekenenStenen(x,y,stenen) { 
    switch(stenen) { 
     case 1: 
      mijnObject.fillStyle = "#0d0d0d"; 
      break; 
     case 2: 
      mijnObject.fillStyle = "#333333"; 
      break; 
     case 3: 
      mijnObject.fillStyle = "#595959"; 
      break; 
     case 4: 
      mijnObject.fillStyle = "#808080"; 
      break; 
     case 5: 
      mijnObject.fillStyle = "#a6a6a6"; 
      break; 
     default: 
      mijnObject.clearRect(0, 0, steenBreedte, steenHoogte); 
      break; 
    } 
    if(stenen) { 
     mijnObject.beginPath(); 
     mijnObject.strokeStyle = "#000000"; 
     mijnObject.rect(x*steenBreedte, y*steenHoogte, steenBreedte, steenHoogte); 
     mijnObject.fill(); 
     mijnObject.stroke(); 
     mijnObject.closePath(); 
    } 
} 

function collisieMetStenenX() { 
    for(var i = 0; i < stenen.length; i = i+1) { 
     for(var j = 0; j < stenen[i].length; j = j+1) { 
      if(stenen[i][j] == true) { 
       var steenX = j*steenBreedte; 
       var steenY = i*steenHoogte; 
       if((balX+balNaarX > steenX && balX+balNaarX < steenX+steenBreedte) 
       && (balY+balNaarY > steenY && balY+balNaarY < steenY+steenHoogte)) { 
        balNaarY = -balNaarY; 
       } 
      } 
     } 
    } 
} 

Вот мой HTML-код:

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>BrickSmasher</title> 
<style> 
    canvas { 
     position: relative; 
     margin-left: auto; 
     margin-right: auto; 
     display: block; 
    } 
</style> 
</head> 

<body> 
    <canvas id="mijnCanvas" width="1200" height="600" style="border: 1px solid black"></canvas> 
    <script src="BrickSmasher.js"></script> 
</body> 
</html> 

Answer 1

Замените эту строку:

if(stenen[i][j] == true) { 

с:

if(stenen[i][j] > 0) { 

или просто:

if(stenen[i][j]) { 

Причина в том, что при сравнении с true JavaScript должен выполнить преобразование. Поскольку одна сторона уравнения является числовой, булево выражение с другой стороны преобразуется в числовой эквивалент true, что равно 1. Это означает, что нет никакого равенства, если stenen[i][j] равно 2, 3, ...

последняя альтернатива работает, потому что там конверсия в обратном смысле: условие if необходимо разрешить с помощью логического значения. Таким образом, числовое значение преобразуется в boolean. И там любое ненулевое значение преобразуется в true.