Как сделать так чтобы обьект не мог заходить на другой в игре JS?

Question

[Михаил]

У меня есть код:

<p id="moto" style="position:absolute; top:100px; left:0px">1</p>
<input type="button" value="|" onclick="car_down()" style="color: #fff;
  text-decoration: none;
  user-select: none;
  background: rgb(212,75,56);
  padding: .7em 1.5em;
  outline: none;
  border: 1px solid black;">
<input type="button" value="^" onclick="car_up()" style="color: #fff;
  text-decoration: none;
  user-select: none;
  background: rgb(212,75,56);
  padding: .7em 1.5em;
  outline: none;
  border: 1px solid black;">
<input type="button" value="<" onclick="car_left()" style="color: #fff;
  text-decoration: none;
  user-select: none;
  background: rgb(212,75,56);
  padding: .7em 1.5em;
  outline: none;
  border: 1px solid black;">
<input type="button" value=">" onclick="car_right()" style="color: #fff;
  text-decoration: none;
  user-select: none;
  background: rgb(212,75,56);
  padding: .7em 1.5em;
  outline: none;
  border: 1px solid black;">
<div id="qwerty">qwerty</div>
<script>
function car_down () {x = 0;
x = document.getElementById("moto").offsetTop;
xn = x + 50;
document.getElementById("moto").style.top = xn+"px"
}
function car_up () {
x = 0;
x = document.getElementById("moto").offsetTop;
xn = x - 50;
document.getElementById("moto").style.top = xn+"px"
}
function car_left () {
x = 0;
x = document.getElementById("moto").offsetLeft;
xn = x - 50;
document.getElementById("moto").style.left = xn+"px"
}
function car_right () {
x = 0;
x = document.getElementById("moto").offsetLeft;
xn = x + 50;
document.getElementById("moto").style.left = xn+"px"
}
</script>

как можно сделать так чтобы перемещаемый текст не мог заходить на div:
<div id="qwerty">qwerty</div>
Я в JS "0" Пожалуеста можете весь код расживать и прокоментировать