Как сделать чтобы при касании двух элементов внутри body они не давали друг другу пройти на Jquery?

Question

Сергей @seven_8959

Пытаюсь выучить js

JavaScript

Как сделать чтобы при касании двух элементов внутри body они не давали друг другу пройти на Jquery?

Всем добрый вечер.
есть код jquery, типа игра.
Событие передвижения стоит на клавиатуре.
Как сделать, так, чтобы элементы, не выходили за границы экрана, сейчас они уходят в любую из сторон, до бесконечности. А хотелось бы, чтобы при достижения к примеру верхней точки, элемент дальше не шел.
И второе - как сделать так, что бы элементы при касании друг к другу, с любой стороны, отскакивали в противоположные стороны, и чтобы между ними, появлялся какой то эффект, или в том месте появлялась картинка.
Заранее всем спасибо.

PS. Все это на JQuery

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" href="css/style.css">
	<script src="https://code.jquery.com/jquery-3.5.1.js"
  			integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  			crossorigin="anonymous">
	</script>
</head>
<body>

<img class="batman" src="https://www.seekpng.com/png/small/1006-10065000_batman-transparent-by-batman-transparent.png" alt="batman">
<img class="joker" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT2j2QMSoA-U-UJjzGEzcs0XeJ157wfnTXU3Q&usqp=CAU" alt="joker">

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

</html>

img {
	position: absolute;
	width: 10%;
	top: calc(50% - 10%);
}

.batman {
	left: 0;
}

.joker {
	right: 0;
}

$(document).ready(function() {

$docHeight = $(document).height();
$docWidth = $(document).width();


$joker = $('.joker');
$jokerHeight = $joker.height();
$jokerWidth = $joker.width();

$batman = $('.batman');
$batmanHeight = $batman.height();
$batmanWidth = $batman.width();

  $(document).keydown(function(key) {
    switch(parseInt(key.which)) {

      case 39:
        $joker.animate({
          left:'+=100px'
        },'fast')
        break;

      case 37:
        $joker.animate({
          left:'-=100px'
        },'fast')
        break;

      case 38:
        $joker.animate({
          top:'-=100px'
        },'fast')
        break;

      case 40:
        $joker.animate({
          top:'+=100px'
        },'fast')
        break;
    }

    $jokerOffset = $joker.offset();

    switch(parseInt(key.which)) {

      case 68:
        $batman.animate({
          left:'+=100px'
        },'fast')
        break;

      case 65:
        $batman.animate({
          left:'-=100px'
        },'fast')
        break;

      case 87:
        $batman.animate({
          top:'-=100px'
        },'fast')
        break;

      case 83:
        $batman.animate({
          top:'+=100px'
        },'fast')
        break;
    }

    $batmanOffset = $batman.offset();

    console.log($jokerOffset);


  });

  
});