JSFiddle - React, Tailwind, and code Playground

HTML

<div id="pole">
		<div id="ball"></div>
		<div id="line"></div>
	</div>

	<script src="main.js"></script>

CSS

#pole{
	width: 400px;
	height: 300px;
	border: 1px #000 solid;
	position: relative;
}
#ball{
	width: 40px;
	height: 40px;
	background: #f00;
	position: absolute;
	border-radius: 50%;
	top: 1px;
	left: 1px;
	box-shadow: inset -10px -10px 40px #000;
}
#line{
	width: 50px;
	height: 5px;
	background: #000;
	position: absolute;
	bottom: 5px;

}

JavaScript

var pole = document.getElementById('pole');
var ball = document.getElementById('ball');
var line = document.getElementById('line');
var t = l = true;
var x=y=1;

setInterval(function(){
	if (t==true && l==true) {x+=4; y+=2;}
	if (t && !l) {x-=4; y+=2;}
	if (!t && !l) {x-=4; y-=2;}
	if (!t && l) {x+=4; y-=2;}
	if (x>=400-40) {l=false;}
	if (y>=290-40) {t=false;}
	if (x<=0) {l=true;}
	if (y<=0) {t=true;}

	ball.style.left = x + 'px';
	ball.style.top = y + 'px';
}, 30);

line.style.left = '5px';
document.body.onkeydown = function(e) {
	e = e || event;
	var left = parseInt(line.style.left);
	if(e.keyCode == 37 && left > 10){
		line.style.left = left - 20 + "px";
	}
	if(e.keyCode == 39 && left < 340){
		line.style.left = left + 20 + "px";
	}
}