How to delimit the area of the ". Animate()" of jQuery?

Asked

Viewed 94 times

1

I would like to move the doll and it just stay inside the div, when I hit the line that bounds the square, it would stop and I couldn’t go beyond.

$(document).ready(function(){
          $(document).keydown(function(x){
            if(x.which == 39 || x.keyCode == 39){               
                 $('.pacman')
                    .animate({left: '1180px'}, 'slow')
                    .css({ transform : 'rotate(360deg)'});               
            }

            if(x.which == 40 || x.keyCode == 40){               
                 $('.pacman')
                    .animate({top: '1180px'}, 'slow')
                    .css({ transform : 'rotate(90deg)'});   
            }

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

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


          }).keyup(function(){
            $('.pacman').stop();
          });
        });         
.pacman{
  position:absolute;
}       
.cenario{
  border:5px solid black;
  width:500px;
  height:500px;
  margin-left:400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cenario">
  <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTWuBaJWq9UP_ILy5Tgz5-5Z6dMm8f7URRSh8Pr2pMU0LZfvPEG" class="pacman" /> 
</div>

jquery jquery-animate
  • 1

    Can you place a demo on JSFIDDLE? https://jsfiddle.net/

  • 1

    This is Samir Braga, man. But it’s simple to understand, I move the doll with the arrow keys on the keyboard, but I would like it to stay just inside this square (div), but if you run the program you can notice that he (the doll) is coming out of the square. I wanted to delimit the area that it can go, in this case only inside the div. I do not know if I understood...

2 answers

4


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

Give a position: relative in div.cenario:

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

Just like the doll has a position: absolute, this will be automatically delimited inside the box.

Thus, simply 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 to the left will be 0

  • The maximum down will be:

    Cenario_height - PM_height

  • The maximum up 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>
<script src="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 advise to leave the easing of animation in linear

1

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

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

To know the left and the top you can use .offset() which will return the two 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 rustic example, but it is possible to have a basis of what you need.

Browser other questions tagged jquery jquery-animate

You are not signed in. Login or sign up in order to post.