stop image from moving when reaching the border of a container

Question

i have this fiddle : http://jsfiddle.net/ps4t9/4/

$(window).keydown(function (e) {
        if (e.which == 38) { player.animate({ top: '-=20px' }); shuriken.animate({ top: '-=20px' }); } // up
        if (e.which == 40) { player.animate({ top: '+=20px' }); shuriken.animate({ top: '+=20px' }); } // down
        if (e.which == 32) { shuriken.animate({ left: '+=280px' });} // space bar hit

    });

how can i prevent the player from moving outside the border of the container ?

add a boundary condition before each move , ie .. check new position is in between LeftWall and rightWall or topWall and bottomWall , else retain the same position — Sarath, Jul 20 '13 at 07:27
it's giving me a weird behavior : http://jsfiddle.net/ps4t9/9/ — Sora, Jul 20 '13 at 07:53

Richard · Answer 1 · 2013-07-20T08:05:27.993

Try this: http://jsfiddle.net/ps4t9/11/

$(document).ready(function () {
  var player = $("#Player"),
      shuriken = $("#Shuriken"),
      container = $("#Container"),
      w = container.width() - shuriken.width();

  $(window).keydown(function (e) {
    if (e.which == 38) {
      if (parseInt(player.css('top')) > 10) {
        player.animate({ top: '-=20px' });
        shuriken.animate({ top: '-=20px' });
      }
    } // up
    if (e.which == 40) {
      if (parseInt(player.css('top')) < 270) {
        player.animate({ top: '+=20px' });
        shuriken.animate({ top: '+=20px' });
      }
    } // down
    if (e.which == 32) { 
      if (shuriken.css('left') != '249px') {
        shuriken.animate({ 'left' : '+=280px' });
      }
    }
  });
});

It breaks when holding down the key and moving too fast though. You may also have to adjust the values a bit.

but that now what i want exactly my question is when i move the player up and down if he reach the border i want to stop him — Sora, Jul 20 '13 at 07:30
didn't work as you can see the player is still crossing the border of the container onkeydown :/ — Sora, Jul 20 '13 at 08:12

score 1 · Answer 2 · answered Jul 20 '13 at 07:27

1

You can use an if statement

if (e.which == 32){ 
if(shuriken.css('left') != '249px'){
shuriken.animate({ 'left' : '+=280px' });
}
}

Fiddle: http://jsfiddle.net/Hive7/ps4t9/5/

answered Jul 20 '13 at 07:27

score 1 · Answer 3 · answered Jul 20 '13 at 08:18

Demo http://jsfiddle.net/u6vXK/1/

the condition what you want is

   var wallT = 0,//top
       wallB =269,//bottpm
       wallL = 0,//left
       wallR =269;//right
  function checkBoundUpDw(pos) {                
              if(pos > wallT && pos < wallB){
               return true;
              }
              return false;
   }
 function checkBoundleftRight(pos) {
              if(pos > wallL && pos <wallR){
               return true;
              }
              return false;
   }

If you press hold it wont work , pres key one by one , means press and wait for animation finish and press again , you have to add isanimating condition and other predominance tips.

score 0 · Answer 4 · answered Jul 20 '13 at 07:43

here is the link for your answer

http://jsfiddle.net/bDMnX/7/

    var pane = $('#pane'),
    box = $('#box'),
    w = pane.width() - box.width(),
    d = {},
    x = 3;

function newv(v,a,b) {
    var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
    return n < 0 ? 0 : n > w ? w : n;
}

$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });

setInterval(function() {
    box.css({
        left: function(i,v) { return newv(v, 37, 39); },
        top: function(i,v) { return newv(v, 38, 40); }
    });
}, 20);

score 0 · Answer 5 · answered Jul 20 '13 at 09:52

thank you all for your help but after a deep Meditation and searching hehe i managed to make it work here is the final jsfiddle : http://jsfiddle.net/ps4t9/15/ thank you

 function newv(v, a, b) {
            var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);

            return n < 0 ? 0 : n > w ? w : n;
        }



        $(window).keydown(function (e) {
            d[e.which] = true;
            if (e.which == 32) {

                if (!shurikenHitBorder) {
                    shuriken.animate({ left: '+=280px' }, 'fast');

                    shuriken.fadeIn(100);
                }
                shurikenHitBorder = true;
            }


          });
        $(window).keyup(function (e) { d[e.which] = false; });

        setInterval(function () {
            box.css({top: function (i, v) { return newv(v, 38, 40); }});
        }, 20);

score -1 · Answer 6 · answered Jul 20 '13 at 08:04

-1

I have edited your JSFiddle with the necessary modifications. Does this help you? Ask me if you need more explanations...

I haved added these to help you calculate optimum bounds...

posDelta = 20, // amount of change in position
playerOffset = player.height() * 0.5,
playerPos = player.position().top,
maxTop = posDelta,
maxBottom = container.height() - (posDelta + playerOffset);

answered Jul 20 '13 at 08:04

Van Dame

150
4
12

It definitely works on my screen. Is there any error you see in the console? – Van Dame Jul 20 '13 at 08:07
Created a separate JSFiddle with same code... http://jsfiddle.net/Van_Dame/3Dy4j/ – Van Dame Jul 20 '13 at 08:08
@Sora can you check if the above fiddle solves your bounds problem? – Van Dame Jul 20 '13 at 08:16
Well, now you have to implement throttling. I will help you further if you are unable to... :) – Van Dame Jul 20 '13 at 08:20

stop image from moving when reaching the border of a container

6 Answers6

Linked