JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    
    <head>
        <title>Brick Destroyer</title>
        <!--links-->
        <link rel="stylesheet" href="bootstrap.min.css" />
        <link rel="stylesheet" href="brickslayer.css" />
    </head>
    
    <body>
        <div id="container">
            <!--Main page for game-->
            <!--bricks-->
            <div class="row">
                <!--First Row-->
                <div class="sqaure col-md-1 sq1"></div>
                <div class="sqaure col-md-1 sq1"></div>
                <div class="sqaure col-md-1 sq1"></div>
                <div class="sqaure col-md-1 sq1"></div>
                <div class="sqaure col-md-1 sq1"></div>
                <div class="sqaure col-md-1 sq1"></div>
                <div class="sqaure col-md-1 sq1"></div>
            </div>
            <div class="row">
                <!--Second Row-->
                <div class="sqaure col-md-1 sq2"></div>
                <div class="sqaure col-md-1 sq2"></div>
                <div class="sqaure col-md-1 sq2"></div>
                <div class="sqaure col-md-1 sq2"></div>
                <div class="sqaure col-md-1 sq2"></div>
                <div class="sqaure col-md-1 sq2"></div>
                <div class="sqaure col-md-1 sq2"></div>
            </div>
            <div class="row">
                <!--Third Row-->
                <div class="sqaure col-md-1 sq3"></div>
                <div class="sqaure col-md-1 sq3"></div>
                <div class="sqaure col-md-1 sq3"></div>
                <div class="sqaure col-md-1 sq3"></div>
                <div class="sqaure col-md-1 sq3"></div>
                <div class="sqaure col-md-1 sq3"></div>
                <div class="sqaure col-md-1 sq3"></div>
            </div>
            <!--Player-->
            <div id="ball"></div>
            <div id="player"></div>
        </div>
        <script src="jq.js"></script>
        <script src="physics.js"></script>
        <script...

CSS

/*Games Canvas*/
 div#container {
    height: 300px;
    width: 75c0px;
}
body {
    height: 100%;
    margin: 15px 15px 15px 15px;
    overflow: hidden;
    padding: 15px 15px 15px 15px;
    width: 100%;
}
/*main for all squares*/
 .sqaure {
    margin-left: 5px;
    height: 25px;
    border-radius: 15%;
    width:75px;
    border: solid black 2px;
    left: 100px;
}
/*main bricks*/
 .sq1 {
    background-color: blue;
}
.sq2 {
    background-color: red;
}
.sq3 {
    background-color: green;
}
/*ball*/
 #ball {
    border-radius: 50%;
    width: 20px;
    height: 20px;
    position: absolute;
    background-color: black;
    left: 325px;
    top: 275px;
}
/*player*/
 #player {
    height:25px;
    width: 100px;
    border: solid black 1px;
    background-color: rgb(109, 102, 102);
    position: absolute;
    left: 300px;
    top: 300px;
    border-radius: 10%;
}

JavaScript

$(function () {
    $(document).keydown(function (e) {
        var Playerposition = $("#player").position();
        var Ballposition = $("#ball").position();
        switch (e.keyCode) {
            case 37:
                //Left Movement
                $("#player").css('left', Playerposition.left - 20 + 'px');
                break;
            case 39:
                //Right movement   
                $("#player").css('left', Playerposition.left + 20 + 'px');
                break;
        }
    });
    var top = 275;
    var left = 325;
    var interval = 5; // time interval in milliseconds
    var increment = 1;
    var move = function () {
        if (left > 750) {
            increment = -increment;
        }
        if (left < 0) {
            increment = -increment
        }
        if (top > 325) {
            increment = -increment;
        }
        if (top < 0) {
            increment = -increment;
        }
        top = top + increment;
        left = left + increment;
        $('#ball').css('left', left + 'px');
        $('#ball').css('top', top + 'px');
    };
    setInterval(move, interval)
});