Help w/ keeping track of constant distance of an object

I’m trying to keep track of the distance of the robot, but I can’t. The text on top is supposed to change when the arrow keys are pressed, also changing the position of the robot. Here is the link to what I am coding:
https://codepen.io/Glaurung/pen/dBEgxw?editors=1010
Pls Help. Thanks.
Here is my code:

var page = 0;
$("#controls").hide();
$("#control-button").on("click",function(){
  $("#controls").slideToggle(1000);
});
$("body").keydown(function(e){
  var key = (e.keyCode || e.which);
    // left arrow
    if (key == 37)
    {   
$("#robot").animate({
  left:"-=100"
});
    }
    // right arrow
    if (key == 39)
    {
       $("#robot").animate({
  left:"+=100"
});
    }   
});
var robot = $( "#robot:last" );
var offset = robot.offset();
$("#story").text( "left: " + offset.left + ", top: " + offset.top );

So the bit where you show the robot’s position? That’s never getting re-run or recalled. It writes the initial position and… thud.

Instead, move that into a function of its own, maybe showRobotPosition(), so you can call it whenever you like. Then, when you move the robot (in they keyup handler), simply call showRobotPosition().

I used your code, made only the change I just mentioned, and here’s the link: https://codepen.io/snowmonkey/pen/RzzEXL?editors=0011

Let us know if that helps.

1 Like

Thanks! that worked. It’s just when another key is pressed, it measures the last position. I modified it so that when a key is pressed and released, it will measure the distance. I just need to keep track of it when the robot is at rest for a few milliseconds.

I’m sorry, but I still have a problem. when I put something like

if(offset.left > 100){
alert("passed 100 px");
}

It doesn’t work. I tried offset.left.val() and offset.left > 100+"px", but they both didn’t work.

1 Like

The tricky thing is, with jQuery’s .animate(), the point in the animation when you pass the 100px mark will vary. A possible solution that sidesteps the issue would be to use the SECOND form of the animate function:


// $("#robot").animate( properties, options );
// options, above, is an object with a number of properties available. One
//  we might want to use is 'complete'

$("#robot").animate({
  "left","+=100"
}, {
  // this is the options object. Let's define a callback for complete:
  complete: () => {
    if($("#robot").offset().left > 100) 
      console.log(`Robot passed 100px! It's now at ${ $("#robot").offset().left }px.`);
  }
} 

There are other properties to that options object, for example step. That one would let you update at various points of your tween (during the animation) for neat effect - the position counter is visibly incrementing/decrementing quickly! Whee! rofl.

To see both the ‘complete’ and teh ‘step’ options in action, here ya go: https://codepen.io/snowmonkey/pen/VJoqde?editors=0010

1 Like

You are really good at this, man!
thanks for helping me out!

1 Like

lol I was one of the original beta testers for the very first jQuery, back in the day. I actually have the Devo t-shirt from the very first jQueryCon, in Cambridge.

I may have been at this a little while. You’re doing fine, just keep challenging yourself. You’re doing amazing things too. Keep it up!

1 Like

No way!
Jquery is actually my favorite coding language.

Ooooo boy. You’re about to get smacked. And flamed. (not by me, by the javascript purists!!)

jQuery is not, in fact, a language. It’s a library, maybe even a framework, but it’s not a language. The language is javascript. jQuery is a very powerful, very useful library for the javascript language, but be very careful to not confuse the two.

1 Like

Hmmm… I tried your way of testing if the robot passed 100 px, but the console didn’t log anything. Very puzzling.

1 Like

That said, over the last few months, I’ve been discovering some GREAT things about the javascript language that I had completely overlooked, that are, in fact, blowing my mind.

I’m learning functional programming in javascript, using lambda or ‘fat-arrow’ functions effectively, and doing a LOT more with design patterns using ES6 classes. SO SO MUCH FUN!!!

Throw me a link to what you got atm.

If you mean the link to my project, it is above at the top of the post, but If you mean something else, I need to know what kind of link it is.

Nope, hadn’t realized you were building on the same project. Cool. So your complete is in the wrong place, just a little. Should be:

      $("#robot").animate(
        // the first object here is the CSS properties we'll transform
        {
          left: "+=100"
        },
        // the second object (below) is the options that our animation can take.
        //   specifically, we want to have a complete callback here.
        {
          complete: () => {
            console.log(`Robot's left is ${$("#robot").offset().left}px`);
            if ($("#robot").offset().left > 100)
              console.log(
                `Robot passed 100px! It's now at ${
                  $("#robot").offset().left
                }px.`
              );
          }
        }
      );

That’s the ONLY change I made to your code, and here’s the pen: https://codepen.io/snowmonkey/pen/RzXvXY?editors=0010

Take a look at https://api.jquery.com/animate/#animate-properties-options to read about this.

1 Like

THANK YOU THANK YOU THANK YOU!!!
THAT IS EXACTLY WHAT I WANTED!
Wish I could give more than one like to your post

1 Like