Delimit area animate Jquery

My suggestion taking into account your current method of moving the doll:

Give position: relative in div.cenario :

.cenario {
  /* ... */
  position: relative;
}

So, since the doll has a position: absolute , it will be automatically delimited inside the box.

So, just store the sizes of the two main elements in variables:

var PM_width = $('.pacman').width();
var PM_height = $('.pacman').height();
var Cenario_width = $('.cenario').width();
var Cenario_height = $('.cenario').height();

• The maximum to the right will be:

  Cenario_width - PM_width 
  

• The maximum left will be 0

• The maximum downwards will be:

  Cenario_height - PM_height
  

• The maximum upward will also be 0

Demo:

$(document).ready(function() {
  $(document).keydown(function(x) {
  	x.preventDefault()
    var PM_width = $('.pacman').width();
    var PM_height = $('.pacman').height();
    var Cenario_width = $('.cenario').width();
    var Cenario_height = $('.cenario').height();

    if (x.which == 39 || x.keyCode == 39) {
      $('.pacman')
        .animate({
          left: Cenario_width - PM_width + "px"
        }, 'slow', 'linear')
        .css({
          transform: 'rotate(360deg)'
        });
    }

    if (x.which == 40 || x.keyCode == 40) {
      $('.pacman')
        .animate({
          top: Cenario_height - PM_height + "px"
        }, 'slow', 'linear')
        .css({
          transform: 'rotate(90deg)'
        });
    }

    if (x.which == 37 || x.keyCode == 37) {
      $('.pacman')
        .animate({
          left: '0'
        }, 'slow', 'linear')
        .css({
          transform: 'rotate(180deg)'
        });
    }

    if (x.which == 38 || x.keyCode == 38) {
      $('.pacman')
        .animate({
          top: '0'
        }, 'slow', 'linear')
        .css({
          transform: 'rotate(270deg)'
        });
    }


  }).keyup(function() {
    $('.pacman').stop();
  });
});

.pacman {
  position: absolute;
}
.cenario {
  border: 5px solid black;
  width: 500px;
  height: 500px;
  margin-left: 400px;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="cenario">
  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTWuBaJWq9UP_ILy5Tgz5-5Z6dMm8f7URRSh8Pr2pMU0LZfvPEG"class="pacman" />
</div>

Note: I'd advise you to leave % of the animation in linear

Basically, you need to define in javascript the limits that the doll can move around. In this case it will be width and height .

Before calling .animate() you need to check whether top and left of the doll are within limits.

To know left and top you can use .offset() that will return both properties of the element.

Example

var limits = {
    left: 500,
    top: 500
};

$(document).keydown(function(x){
    if(x.which == 39 || x.keyCode == 39){
        var offset = $('.pacman').offset();

        if (offset.left > limits.left) {
            return false;
        }

        $('.pacman')
            .animate({left: '1180px'}, 'slow')
            .css({ transform : 'rotate(360deg)'});               
    }
});

This is a very rough example, but it is possible to have a basis for what you need.

I've been trying for some time here and I still can not. The suggestion of @Samir Braga came very close, in fact it worked, however, when the doll touches the edge of the div, it gives a kind of delay and it gets nailed, it takes a long time to obey another command (gets out of control)