碰撞检查不起作用

Question

我试图在没有画布的情况下进行突破游戏，因为那是作业。

当我的球击中砖块时（在我的代码中，名称是无效的），应该在该特定索引处移除它。

删除balk的代码似乎有效，但是if语句中的检查似乎是错误的，这导致第一个balk被删除而不是被触摸的balk。

＆＃13;

＆＃13;

'use strict';
var k = '',
    i = 0,
    lijnbreedte = 0,
    blockbreedte = 25,
    balk = document.getElementById('bewegendebalk'),
    size = window.innerWidth,
    size2 = window.innerHeight,
    widthball = window.innerWidth * 0.015,
    heightball = window.innerHeight * 0.03,
    positonBalkx = 0,
    direction = 25,
    ball = document.getElementById("bal"),
    x = 0,
    y = 0,
    dx = 5,
    dy = 5,
    q = -1,
    counter = 0,
    b = 0,
    balkArray = [],
    ballRight,
    ballLeft,
    ballTop,
    ballBottom,
    beweegBalkTop,
    beweegBalkBottom,
    beweegBalkLeft,
    beweegBalkRight,
    staticBalkTop,
    staticBalkBottom,
    staticBalkLeft,
    staticBalkRight;

$(document).ready(function () {
    testbord();
});


function StartGame() {
    $('#player').remove();
    animate();
    loses();
}


function test() {
    alert("ok");
}

// lijntop start op de waarde 0 min zichzelf zodat bij de start van de lus deze waarde terug op 0 komt te staan.
var lijnTop = -25;
var lijnHoogte = 25;

function testbord() {
    for (i = 0; i < 6; i++) {
        lijnbreedte = 0;

        lijnTop += lijnHoogte;
        do {
            q++;

            blockbreedte = Math.ceil(Math.random() * 5) + 3;
            if (lijnbreedte + blockbreedte > 90) {
                blockbreedte = 90 - lijnbreedte;
            }
            $('#bord').append('<div id=' + "balk" + q + ' class="balk" style="background: rgb(' + Math.ceil(Math.random() * 255) + ',' + Math.ceil(Math.random() * 255) + ',' + Math.ceil(Math.random() * 255) + ');width:' + blockbreedte + 'vw"></div>');
            lijnbreedte += blockbreedte;

            var balkElement = document.getElementById("balk" + q);

            balkElement.style.height = lijnHoogte + "px";
            balkElement.style.top = lijnTop + "px";
            balkElement.style.bottom = eval(lijnTop + "+" + lijnHoogte) + "px";
            balkElement.style.left = lijnbreedte + "px";
            balkElement.style.right = eval(lijnbreedte + "+" + blockbreedte) + "px";

            console.log(lijnTop);
            storArray(balkElement);
        }
        while (lijnbreedte < 90);
    }
    lijnTop += 25;
}

function storArray(balkElement) {

    balkArray.push({
        id: balkElement.id,
        removed: false,
        balktop: ExtractNumber(balkElement.style.top),
        balkBottom: ExtractNumber(balkElement.style.bottom),
        balkLeft: ExtractNumber(balkElement.style.left),
        balkRight: ExtractNumber(balkElement.style.right)
    });

}


function update() {
    var ball = document.getElementById("bal");
    ballTop = Math.round(ball.top);
    ballLeft = Math.round(ball.left);
    ballBottom = Math.round(ball.bottom);
    ballRight = Math.round(ball.right);
    document.getElementById("ballTops").innerHTML = ballTop;
    document.getElementById("ballLeft").innerHTML = ballLeft;
    document.getElementById("ballBottom").innerHTML = ballBottom;
    document.getElementById("ballRight").innerHTML = ballRight;


    var beweegBalk = document.getElementById("bewegendebalk");
    beweegBalkTop = Math.round(beweegBalk.top);
    beweegBalkLeft = Math.round(beweegBalk.left);
    beweegBalkBottom = Math.round(beweegBalk.bottom);
    beweegBalkRight = Math.round(beweegBalk.right);
    document.getElementById("beweegBalkTop").innerHTML = beweegBalkTop;
    document.getElementById("beweegBalkLeft").innerHTML = beweegBalkLeft;
    document.getElementById("beweegBalkBottom").innerHTML = beweegBalkBottom;
    document.getElementById("beweegBalkRight").innerHTML = beweegBalkRight;
    document.getElementById("test5").innerHTML = lijn;

    if (ballBottom >= beweegBalkTop &&
        ballLeft >= beweegBalkLeft &&
        ballRight <= beweegBalkRight) {
        dy = -dy;
    }
}


function beweeg(e) {
    var BalkLeft = beweegBalkLeft;
    if (e.keyCode === 39) {
        if (beweegBalkRight < window.innerWidth) {
            update();
            BalkLeft += direction;
            balk.style.left = BalkLeft + "px";
        }
    }

    if (e.keyCode === 37) {
        if (beweegBalkLeft > 0) {
            update();
            BalkLeft -= direction;
            balk.style.left = BalkLeft + "px";
        }
    }

}

var score = 0;

function collisionStaticBalk() {


    var baltopGroterDanBalkBottom;
    var balleftGroterDanBalkLeft;
    var balRightKleinerDanBalkRight;
    var balbottomkleinerDanBalkBottom;
    var balbottomGroterDanBalkTop;
    var baltopGroterDanBalkTop;


    var ballTop = ExtractNumber(ball.style.top);
    var ballBottom = ExtractNumber(ball.style.bottom);
    var ballLeft = ExtractNumber(ball.style.left);
    var ballRight = ExtractNumber(ball.style.right);

    for (i = 0; i < balkArray.length; i++) {

        if (balkArray[i].removed) {
            continue;
        }

        baltopGroterDanBalkBottom = ballTop >= balkArray[i].balkBottom; //top bal met bottom balk
        balleftGroterDanBalkLeft = ballLeft >= balkArray[i].balkLeft; // ball left groter/ofg left balk
        balRightKleinerDanBalkRight = ballRight >= balkArray[i].balkRight; // ball right kleiner/ofg balk right
        balbottomkleinerDanBalkBottom = ballBottom >= balkArray[i].balkBottom;
        balbottomGroterDanBalkTop = ballBottom >= balkArray[i].balktop;
        baltopGroterDanBalkTop = ballTop >= balkArray[i].balktop; //ball top groter/ofg balk top
        baltopGroterDanBalkBottom = ballTop >= balkArray[i].balkBottom;

        if ((balleftGroterDanBalkLeft && balRightKleinerDanBalkRight) &&
            ((balbottomGroterDanBalkTop && balbottomkleinerDanBalkBottom)) ||
            (baltopGroterDanBalkTop && baltopGroterDanBalkBottom) &&
            (baltopGroterDanBalkBottom && balRightKleinerDanBalkRight) &&
            (baltopGroterDanBalkBottom && balleftGroterDanBalkLeft)) {
            dy = -dy;
            //balkArray.splice(i, 1);
            $("#" + balkArray[i].id).css("background-color", "transparent");
            balkArray[i].removed = true;
            //$("#balk" + i).css("background-color", "transparent");
            //document.getElementById("test2").innerHTML = score;
            break;
        }
    }
}

document.onkeydown = beweeg;

var lijn = window.innerHeight * 0.2;

var fps = 144;


ball.style.width = '20px';
ball.style.height = '20px';
ball.style.top = '200px';
ball.style.bottom = eval(ExtractNumber(ball.style.top) + '+' + ExtractNumber(ball.style.width)) + 'px';
ball.style.left = '200px';
ball.style.right = eval(ExtractNumber(ball.style.left) + '+' + ExtractNumber(ball.style.height)) + 'px';

function animate() {
    requestAnimationFrame(animate);
    update();


    ballTop = parseInt($("#bal").css("top")) + dy;
    ballBottom = parseInt($("#bal").css("bottom")) + dy;
    ballLeft = parseInt($("#bal").css("left")) + dx;
    ballRight = parseInt($("#bal").css("right")) + dx;

    ball.style.top = ballTop + 'px';
    ball.style.bottom = ballBottom + 'px';
    ball.style.left = ballLeft + 'px';
    ball.style.right = ballRight + 'px';

    //grootte voor pc scherm
    if (ballBottom <= 0) {
        dy = -dy;
        console.log("Touched Top edge");
    }
    if (ballTop >= window.innerHeight) {
        dy = -dy;
        console.log("Touched Bottom edge.");
    }
    if (ballRight <= 0) {
        dx = -dx;
        console.log("Touched Left edge.");
    }
    if (ballLeft >= window.innerWidth) {
        dx = -dx;
        console.log("Touched Right edge.");
    }
    if (ballTop <= lijnTop) {
        collisionStaticBalk();
        console.log("Line crossed.");
    }

}


function reset() {
    string = "";
    //document.location.href;
    window.location.reload(true);
}

var lives = 1;
var lose = window.innerHeight * 0.05;

function loses() {
    if (ballBottom <= lose) {
        lives--;
        alert("lose");
    }
}

function ArrayPlayer() {
    var xc = [];
    var input = $("#playerName").val();
    xc.push(input);
    //alert(xc[0]);
}

//This function removes the 'px' from a string so it becomes an integer.
function ExtractNumber(stringValue = "") {
    let output = stringValue.substring(0, (stringValue.length - 2));
    return parseInt(output);
}

＆＃13;

html {
    height: 100%;
    width: 100%;
    font-family: sans-serif;
    background-color: azure
}

body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;

}

h1 {
    text-transform: uppercase;
    font-size: 18px;
}

.balk {
    height: 25px;
    width: 25px;
    float: left;
    margin: 0;
    border: 1px solid #fff;
    box-sizing: border-box;
    border-radius: 5px;
}

.first {
    clear: left
}

#bord {
    margin-left: 5%;
    margin-right: 5%;
}

#bewegendebalk {
    width: 5%;
    height: 2%;
    background-color: red;
    top: 90vh;
    position: absolute;
    left: 47.5%;
    border-radius: 5px;

}

#bal {
    /*right: 49.25vw;*/
    /*top: 86.8vh;*/
    background-color: black;
    width: 3%;
    height: 3%;
    position: absolute;
    border-radius: 82%;

}

#player {
    position: absolute;
    width: 15%;
    height: 15%;
    background-color: cornsilk;
    border-radius: 5%;
    left: 42.5%;
    box-shadow: 0px 0px 1em black;
    animation-fill-mode: forwards;
    -webkit-animation-name: animatiePlayer;
    -webkit-animation-duration: 2s;

}

@keyframes animatiePlayer {
    0% {
        top: 0%;
    }

    100% {
        top: 35%;
    }
}

#Name {
    margin-top: 5%;
    text-align: center;
}

#divinput {
    margin: 2em, auto;
    height: 5%;

}

input {
    margin-left: 25%;
    width: 50%;
    text-align: center;
}

#start {
    margin-top: 4%;
    margin-left: 42%;
}


#number {
    background-color: orange;
    position: absolute;
    margin-top: 86vh;
    margin-left: 2%;
}

#number2 {
    background-color: orange;
    position: absolute;
    margin-top: 86vh;
    margin-left: 8%;
}

＆＃13;

<!DOCTYPE html>
<html lang="nl">

<head>
    <meta charset="utf-8" />
    <title>Casse brique game</title>
    <meta name="description" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="cssgame.css">
    <link rel="stylesheet" href="320to800.css" media="screen and (min-width:320px) and (max-width:800px)">
    <script src="https://code.jquery.com/jquery.min.js"></script>
    <style>
    </style>
</head>

<body id="body">
    <div id="bord"></div>
    <div id="player" class="test">
        <h2 class="test" id="Name">Player</h2>
        <div class="test" id="divinput"><input type="text" id="playerName" name="playerName" placeholder="U naam">
        </div><br>
        <button class="test" id="start" type="button" onclick="ArrayPlayer(), StartGame()">start</button>
    </div>
    <div id="number32"></div>
    <div id="bewegendebalk"></div>
    <div id="bal"></div>
    <div id="number"></div>
    <div id="number2"></div>
    <div id="test"></div>
    <div id="list"></div>
    <div id="test2"></div>
    <div id="test3"></div>
    <div id="test4"></div>
    <div id="test5"></div>
    <div id="ballTops"></div>
    <div id="ballLeft"></div>
    <div id="ballBottom"></div>
    <div id="ballRight"></div>
    <div id="beweegBalkTop"></div>
    <div id="beweegBalkLeft"></div>
    <div id="beweegBalkBottom"></div>
    <div id="beweegBalkRight"></div>
    <script src="mijnscript.js"></script>

</body>

</html>

＆＃13;

＆＃13;

＆＃13;