JSFiddle - React, Tailwind, and code Playground

by mkurzweil

HTML

<div id="blok1" class="blok"></div>
<div id="blok2" class="blok"></div>
<div id="blok3" class="blok"></div>
<div id="blok4" class="blok"></div>
<div id="ball" class="ball"></div>
<p></p>

CSS

div#blok1 {
    width: 100px;
    height: 50px;
    position: absolute;
    top: 50px;
    left: 20px;
    outline: 1px solid black;
}
div#blok2 {
    width: 200px;
    height: 50px;
    position: absolute;
    top: 200px;
    left: 40px;
    outline: 1px solid black;
}
div#blok3 {
    width: 300px;
    height: 50px;
    position: absolute;
    top: 400px;
    left: 130px;
    outline: 1px solid black;
}
div#blok4 {
    width: 250px;
    height: 50px;
    position: absolute;
    top: 500px;
    left: 350px;
    outline: 1px solid black;
}
div.ball {
    width: 20px;
    height: 20px;
    position: absolute;
    top: 10px;
    left: 5px;
    border: 1px solid black;
    border-radius: 50%;
    background-color: yellow;
}
div.blok {
    background-color: red;
}
p {
    width: 300px;
    height: 300px;
    position: fixed;
    top: 10px;
    left: 500px;
    border: 1px solid black;
}

JavaScript

$(document).ready(function () {

    var ball = $("#ball");
    ballPos = ball.position();
    ballMoveX = ballPos.left;
    ballMoveY = ballPos.top;
    gravitation = 5;

    var blok1 = $("#blok1").offset();
    blok1Y = blok1.top;
    blok1X = parseInt(blok1.left) + parseInt($("#blok1").css("width"));
    var blok2 = $("#blok2").offset();
    blok2Y = blok2.top;
    blok2X = parseInt(blok2.left) + parseInt($("#blok2").css("width"));
    var blok3 = $("#blok3").offset();
    blok3Y = blok3.top;
    blok3X = parseInt(blok3.left) + parseInt($("#blok3").css("width"));
    var blok4 = $("#blok4").offset();
    blok4Y = blok4.top;
    blok4X = parseInt(blok4.left) + parseInt($("#blok4").css("width"));

    blokPos = blok1Y + '<br>' + blok2Y + '<br>' + blok3Y + '<br>' + blok4Y + '<br>' + '<br>' + blok1X + '<br>' + blok2X + '<br>' + blok3X + '<br>' + blok4X;


    setInterval(function () {
        ball.offset({
            top: ballMoveY += gravitation
        });
        $("p").html(ballMoveX + '<br>' + ballMoveY + '<br><br>' + blokPos + '<br><br>' + gravitation);
        if (ballMoveY > blok4Y + 20) {
            alert('game over');
            return ballMoveY = 0;
            return ballMoveX = 0
        };
        if ((ballMoveY == blok1Y && ballMoveX < blok1X && ballMoveX > 2) || (ballMoveY == blok2Y && ballMoveX < blok2X && ballMoveX > 15) || (ballMoveY == blok3Y && ballMoveX < blok3X && ballMoveX > 110) || (ballMoveY == blok4Y && ballMoveX < blok4X && ballMoveX > 325)) {

            return gravitation = 0;
        } else {
            return gravitation = 5;
        };
    }, 5);




    $(window).keydown(function (e) {
        if (e.which === 39) {
            ball.offset({
                left: ballMoveX += 5
            });
        }
        if (e.which === 37) {
            ball.offset({
                left: ballMoveX -= 5
            });
        }


    })

    $(window).keyup(function (e) {
        if (e.which === 32 && gravitation == 0) {
           ...