JSFiddle - React, Tailwind, and code Playground

HTML

<div id="echo"></div>
<div id="echo2"></div>
<div id="echo3"></div>

<div id="layer2"></div>
<div id="wall2"></div>

<div id="otladka"></div>

<div id="k_hor"></div>
<div id="k_ver"></div>
<div id="collision"></div>

CSS

#layer2 {
    position: absolute; background: #33FFCC;
    top: 60px;     left: 0px;
    width: 10px;   height: 10px;
}
#wall2 {
    position: absolute; background: #CC3300;
    top: 40px;     left: 360px;
    width: 10px;   height: 300px; 
}

JavaScript

var num = 1;
var lim = 0;          var toplim = 0;
var way = 'forward';  var topway = 'go';

// По вертикали
var SizeH = document.documentElement.clientHeight;
var red = document.getElementById("wall2");
var SizeTop = window.getComputedStyle(red,null).getPropertyValue("top");
    SizeTop = SizeTop.replace("px", "");
	
var WallHeight = window.getComputedStyle(red,null).getPropertyValue("height");
    WallHeight = WallHeight.replace("px", "");
    
// По горизонтали
var SizeViewPort = document.documentElement.clientWidth;
var block = document.getElementById("layer2");
var left = window.getComputedStyle(block,null).getPropertyValue("left");
    left = left.replace("px", "");
var width = window.getComputedStyle(block,null).getPropertyValue("width");
    width = width.replace("px", "");

var timerId = setInterval(function() {

  if(topway == 'go'){
	
      SizeTop = +SizeTop + +2; 							 
      var css2 = document.getElementById("wall2"); // получаем блок
      css2.style.top = SizeTop+'px';
	
	  toplim = +SizeTop + +WallHeight;    // определим предел для двигающегося блока
	  if(toplim >= SizeH){ // меняем путь на обратный
		topway = 'no';
	  }
  }
  else{
      SizeTop = +SizeTop - +2; 
      var css2 = document.getElementById("wall2");
      css2.style.top = SizeTop+'px';
	    if(SizeTop <= 0){ topway = 'go'; }
  }

  if(way == 'forward'){
	
      left = +left + +2; 							 
      var css = document.getElementById("layer2"); // получаем блок
      css.style.left = left+'px';
	
	  lim = +left + +width;    // определим предел для двигающегося блока
	  if(lim >= SizeViewPort){ // меняем путь на обратный
		way = 'back';
	  }
  }
  else{
      left = +left - +2;
      var css = document.getElementById("layer2");
      css.style.left = left+'px';
	    if(left <= 0){ way = 'forward'; }
  }

  document.getElementById('echo').innerHTML=SizeViewPort+' '+left;
  document.getElementById('otladka').innerHTML=SizeH+' '+SizeTop;
  
  var one = layer2.getBoundingClientRect();
 ...