砖块与球之间的碰撞检测（使用一系列数字）

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条件需要解析为布尔值。所以数值转换为布尔值。并且任何非零值都将转换为true。