The XML Query Working Group has published a Proposed Recommendation of XQueryX 3.0. XQueryX is an XML representation of an XQuery. It was created by mapping the productions of the XQuery grammar into XML productions. The result is not particularly convenient for humans to read and write, but it is easy for programs to parse, and because XQueryX is represented in XML, standard XML tools can be used to create, interpret, or modify queries. Comments are welcome through 25 February 2014. Learn more about the Extensible Markup Language (XML) Activity.

A complete Working Draft of Website Accessibility Conformance Evaluation Methodology (WCAG-EM) 1.0 was published today by the Web Content Accessibility Guidelines Working Group (WCAG WG) and Evaluation and Repair Tools Working Group (ERT WG), through the joint WCAG 2.0 Evaluation Methodology Task Force (Eval TF). WCAG-EM describes an approach for evaluating how websites, including Web applications and websites for mobile devices, conform to WCAG 2.0. Comments are welcome through 28 February 2014. After the comments from this review period are addressed, WAI expects to publish this as an informative (that is, non-normative) W3C Working Group Note. Learn more from the WCAG-EM Overview and about the Web Accessibility Initiative (WAI).

The Web Applications Working Group has published a Working Draft of XMLHttpRequest Level 1. The XMLHttpRequest specification defines an API that provides scripted client functionality for transferring data between a client and a server. Learn more about the Rich Web Client Activity.

Everybody loves a good riddle, but when you design one, you never know how it will be perceived until you try it out. The new Smashing Mystery Riddle didn’t emerge over night, and after weeks of fine adjustments and many — many — test runs, we prepared some coffee, pressed that shiny “Publish” button and, you know, started waiting for tweets. And now, exactly two days later, it’s time to reveal the mystery and announce the winners. Oh, you want to figure it out first? Well, then please close this tab since there are (obviously) spoilers in this post.

The Mystery Riddle

Admittedly, the new riddle turned out a bit harder than the previous one. Again, we didn’t want it to make it easy and we also didn’t want to make it too hard since most people would just drop it at some point. We did want to challenge you to be creative and think hard though, and finding this sweet spot of complexity took time and patience. So within the five weeks since the initial idea was conceived, we ran 17 various tests on various variations of various animated GIFs.

Well, obviously we got some of the testers totally confused and disoriented, and probably also annoyed and frustrated, and perhaps even angry since they had to stare at the infinitely looped GIFs for quite some time. Over the first two weeks of testing, out of 14 people not even one single person could solve the riddle! Now, that did not make for happy testers for sure! (Oh those poor, poor souls!).

In fact, once you start running tests and introduce little variations of GIFs, and edit the hints and change file names, you start interpreting things that are just not there, and you start seeing animated GIFs all over the place. At some point we started thinking about running looped animated GIFs within looped animated GIFs within looped animated GIFs (“Inception”), and we even created prototypes for that. (Seriously.)

The Inception idea was interesting to explore, but failed miserably in our tests, confusing testers. Large view.

Guillaume, the designer of the GIFs, wasn’t happy with this idea, and we weren’t sure what the heck we were doing. Also, testers went insane and complained about massive headaches and eye strain. That’s not a feeling you want to explore. Well, most of you at least. Going back and forth in our prototypes and drawing boards, by the end we had something that we felt was just right, and on average took around 38 minutes to solve.

Level 1: The Flying Voyage

Well, the rules were the same, and the game wasn’t much different either. We presented a mysterious animated GIF that contained a hidden message which had to be found. Once you resolved the mystery, you’d see a Twitter hashtag displayed in plain text. So again, just like last time, there wouldn’t be any room for vague interpretations. The solution would be displayed in plain text. And the only hint was to watch out for the file name. And just like the last time, the main difficulty was finding the right idea to pass level 1.

Level 1: The only hint was to watch out for the file name.

So how does it work? Well, if you look very closely at the animation, you’ll notice a steaming cup of coffee on the table with a sign: “Do Not Drink Hot”. Is there a way to cool down the cup of coffee? Initially, we wanted to have something like a responsive animated GIF, which would change depending on the screen resolution, and which would kind of simulate the cooling down of the coffee with JavaScript and/or media queries. However, this would be a bit too easy to detect for our smart audience, so it was a no-go.

Surprisingly, you can see many clicks outside the image on the right side — perhaps this is where the birds were supposed to fly out? We’ll never find out. Large view.

Now, if you watch out for the file name like you are asked to, you’ll discover that you are expected to catch the birds. Since it’s an animated GIF and it isn’t linked, clicking on any area of the image won’t help at all. Neither would an analysis of the color levels or frames lead you anywhere. Some readers noticed that a Twitter hashtag potentially could be a hex color code, so we started receiving lots of very… well, interesting tweets containing various hex values for the Twitter birds and surroundings in the room. It must have taken quite some time, but this was the wrong direction to take. Sorry about that!

So, how can you catch the birds? Well, since nothing is clickable, you have to change something else. Ah! Right. Let’s try changing the file name of the image to something like… open-the-window.gif?..

Changing the file names doesn’t really help. You still have to catch the birds.

Aha! So that’s a blind alley. Well, there is a steaming coffee pot on the table. Are you getting closer? Or is it just a distraction? Well, there is a note at the bottom. Changing image URLs won’t get you anywhere. That’s a bummer. But you are now supposed to look outside the window and notice what kind of birds you see. Well, they look like… Twitter birds, right? And according to the file name, you still have to catch them.

Okay, so you could just head over to Twitter and do a simple search for “Catch the birds”. Well, it isn’t particularly helpful. (Except that there are quite a few frustrated readers like us, though, so that’s probably a good thing. Well, at least we aren’t alone out there!). But wait: could #catchthebirds be the hidden hashtag? Well, potentially, yes, but the riddle clearly says that the hashtag will be hidden in plain text, so probably not.

But wait a second. If the hashtag doesn’t seem to be right, what about the Twitter handles? Let’s try to @CatchTheBirds. Bingo!

@CatchTheBirds would help bring you to Level 2.

Landing on “The Flying Voyage”, it looks like you are on the right path, and you’ve passed level 1. It wasn’t too easy, so a coffee break is probably well-deserved before we proceed to the next level. Oh wait, the coffee — what about that sign on the table saying “Do Not Drink Hot”? Could it be a key as well? @DoNotDrinkHot. Right on! At this point you are supposed to start feeling pretty awesome.

Indeed, the hints for each level are hidden somewhere on Twitter, so the question now is how to use the clues in animated GIFs and file names to pass the levels. Well, this will involve quite a bit of work.

Level 2: The Book Jungle

So, you are brought to another animated GIF, and it looks like the main character already got his coffee and is now reading the book. The file name says that “something is wrong here” but there’s nothing wrong with a cat being afraid of thunder… right? So what else could it be?

Level 3: The file name says there’s “something wrong here”… but what could it be?

The couch? Check. The window? Check. The tree? Check. The table? Check. The portraits on the wall? Check. The book? Wait a second. Isn’t the Smashing Book held upside down? The cover of the book is displayed on the right page so how can the character actually read it? Could it be that we have to flip the book somehow or turn it around? Perhaps with, well, @FlipTheBook, @TurnTheBook, @TurnOverTheBook or @RotateTheBook?

@TurnTheBook would help bring you to Level 3.

Excellent. You’ve reached level 3 and apparently you are halfway through! You deserve warm milk, cookies, and probably a donut as well. Apparently, that cat afraid of thunder was just a sneaky distraction—you better watch out for those! Let’s proceed to level 3.

Level 3: The Broadway

Okay, the book is now in order, and that mysterious person keeps drinking coffee and reading the book. The file name says that “these donuts are making me thirsty…” Now this sounds familiar. Isn’t it a reference to Seinfeld? Maybe that’s where you should look, or maybe it’s just yet another distraction. In fact, if you think about it, that character can’t be that thirsty since he keeps drinking all the time. Could it be that it’s the cat who is thirsty? Let’s try to @FeedTheCat. Oh, well. It was worth a shot.

Level 3: These donuts are making me thirsty…

But what do we know now? We know that @CatWantsMilk, so what if we @GiveCatSomeMilk? Alternatively, we could @FeedTheBlackCat as well. But doesn’t the cat look a bit bored? And since it’s playing with the ball of wool, perhaps it just wants to be distracted? Indeed, that cat is a @BoredBlackCat, so we could also try @PlayWithTheCat, right?

@PlayWithTheCat would help bring you to Level 4.

Right! But wait a second. Different Twitter handles contain tweets leading to different URLs, and yes, it was intentional. Some handles lead to smashed.by/map while others lead to smashed.by/journey. However, both handles lead to the final level 4.

Now that was a tough one. At this point you should start feeling proud of yourself. Time to get your donuts, and move to the final level.

Level 4: The Dome

So, we can see a similar scene, but it looks like it isn’t about the book any longer. The mysterious character seems to be busy examining the New York map, so he must be preparing for the trip already. Now there is something really weird about that clock making quick rounds on the wall. Could it be somehow connected with time travel, or time ticking too fast, or something like that? Or is it a just another distraction?

The final round in the mystery wasn’t necessarily the most difficult one, but it took quite some time to get your head around.

The clue in the file name is the question “Where are you going?”. Well, obviously you are going to New York, but there really is nothing you could do with “New York” alone. The main prize for solving the riddle is a trip to New York as well as a SmashingConf NY ticket.

So where exactly will the conference take place? Oh, okay, the TimesCenter, right off Times Square. Wait a second. Times. Square. Could it be a hint? On the wall, we have a clock showing the time, and we have a square and something that looks like a map. Could @TimeSquareMap be a solution? It is indeed! Now obviously, @TimesSquareMap would be a solution as well (and so would @TimeSquareLine and @TimesSquareLine), but your path will probably cross Times Square as well, so you could just go @ToTimesSquare as well.

“Nothing like a good ol’ cake”. But you know, cake is a lie, right? An alternative final GIF animation in the Smashing Mystery.

If you followed another path, you’d land at a different URL with a different animated GIF. You won’t find a map on the wall but instead a chocolate cake with a cherry on top. But wait a moment. The cake is a lie, so is it another distraction or isn’t it? If you follow the same train of thought as with the alternative animated GIF, you probably will end up with @TimeSquareCake or @TimesSquareCake. Could it be…? Is it…?

Phew! @TimesSquareMap revealed one of the final hashtags: #TimeSquareCircle.

Yes! Now you solved the mystery, and as it turns out you really are awesome! The secret hashtag is now displayed in plain text in the tweets from these accounts. Now that was quite a journey, wasn’t it?

Mystery Solved! And The Winners Are…

You didn’t have to discover all the secret hashtags, but potentially you could find #TimeSquareLine, #TimeSquareCircle and #TimeSquareCenter. In fact, within two days over 400 readers found at least one of these hashtags which we didn’t really expect.

Some of you were quicker than others. While the first riddle back in November was solved within four minutes (!), this one took more time to crack. The first correct hashtag was tweeted by @typeform 53 minutes after we hit that shiny “Publish” button, with more and more tweets containing the right answer shortly after that. In fact, it turned out that our dear readers are absolutely smashing indeed: #TimeSquareCenter, #TimeSquareCircle and #TimeSquareLine.

The first place was earned by the person who was the quickest to solve the riddle. We allocated prizes to the other lucky winners randomly, though the requirement was that at least one of the hashtags had to be found. The winners can select any prize of their choice (be it a bag, a Smashing Library account, printed books or anything else). And they all get the Smashing Cody Stress-Relief Ball, too. All winners have been contacted. The winners are:

• Typeform has won a roundtrip to New York and the full Smashing package (took 53 mins to find the solution),
• Indri Kenens
• Alecsandru
• José Luis Almagro
• Gregor Terrill
• Emanuela
• inkterina
• Chuck Moulton
• Velja Matic
• Mark Senff

Congratulations! And thanks to everyone who participated! We hope we didn’t waste too much of your productive work time (and didn’t cause too many headaches either).

Behind The Scenes

Guillaume Kurdjian is a 22-year-old freelance illustrator and animator from Nantes, France. Guillaume likes to experiment with stuff on his computer and climb trees.

Just like the last time, we worked with talented Guillaume Kurdjian on a series of animated GIFs for the riddle. This time the thread was a bit longer, and after thorough discussions and prototypes, we ended up with over 30 different GIFs, drafts, and ideas that were thrown away, as well as the ones that made it to the final stage.

All designs were a series of iterations to make the overall riddle not necessarily perfect, but just right. So a big “thank you!” to Guillaume for following through and being so enthusiastic and kind about all the changes made.

At almost every point throughout the design process we wondered if Twitter might suspend some of the accounts. With 42 Twitter accounts registered over five weeks (we considered using different synonyms), we are still receiving lots of notification emails every single day. And, oh my, it really wasn’t easy to find meaningful Twitter handles that were still available.

Guillaume designed the scenery first; it was a starting point for the mystery riddle.

Besides, you have to work within Twitter restrictions on the accepted characters and the number of characters per Twitter handle (15 chars). It took quite a lot of testing and playing around on the Twitter registration page, and lots of alias emails to make it all work, and lots of CAPTCHAs to be filled in, and obviously, lots of coffee to stay sane! Since we had already played with file names for the first riddle, we had to be a bit more creative about how readers moved between the levels. The critical point was the clue given if the reader changed the image URL in the browser, and it took a lot of experimentation to get it right.

Actually, we wanted to use TimeSquareCircle as a final Twitter handle, but we couldn’t register it due to Twitter’s length restrictions. So we tried TimeSquareLine, TimeSquareMap and TimeSquareCake instead.

Initially we wanted to use Mystery: Level 1, Mystery: Level 2, etc. as Twitter names, but that would make it searchable via Twitter, so we decided to use code names for each level, according to the King Kong storyline that we’ve used throughout Smashing Conference New York, so the user journey went from The Voyage, to the Book Jungle, to Broadway, to the Dome.

Are we waiting for round 3 already?

So this is it! It was quite a journey, but we hope it was worth it. We are really sorry about all the unproductive hours that you spent solving the riddle. Well, kind of. Now, are you ready for the third round? ;-) Stay tuned!

© Vitaly Friedman for Smashing Magazine, 2014.

In the last post, we introduced the idea of spriting, an easy way to animate in JavaScript that works in all browsers. We also walked through how to set up the sprite as a background image for a div and then use a line of JavaScript to change the background position to make it appear as if the image has moved.

In this post, we will use this technique to animate both running and jumping motions. In order to create the animation, we will need to quickly change the background position at a regular interval. Take a look again at the sprite we are using.

Meet J, the mascot for my company, Joust Multimedia.

In our example, we have ten total images: one of J standing facing right, three of J running to the right and one of J jumping while facing right (with the same number of each frame facing left). Let's start with making him run to the right. In order to make our image look like it is running, we will need to do two things: change the sprite to a different image and move the div towards the right.

Running to the Right Animation

We certainly won't want to be stuck clicking different buttons to cycle through the sprites, so we will need to create some functions that do this automatically.

For our running function, we want to:

1. Move the div towards the right slightly
2. Move to the next frame of animation
3. Pause for a fraction of a second (to preserve the "persistence of vision" illusion)
4. Loop the function again

Fortunately, there is an easy way to loop with functions. A native command in JavaScript called setTimeout will allow us to create a timed delay, after which we will call the function again (from inside the function).

function run_right(){
      // Move slightly to the right ...
      // Change to the next frame of animation ...
    
      // this will call 'run_right' again after 200 milliseconds
      setTimeout(function(){run_right();}, 200); 
    }

So now we have a function that will call itself again five times a second (which will be fast enough to create animation for our purposes). Remember here that browsers are not terribly accurate with their timers. You can specify timing to the millisecond, but that doesn't mean your script will run at that timing exactly!

Our next problem to tackle is how is our function going to know which sprite to change to? In our example, we will need to cycle back and forth through our three images (to have four total frames of animation). To do this, we are going to pass our function a bit of information to tell it which slide to switch to. Once in the function, we will do a test that will check which slide we should be on, then switch the background position to the correct sprite. When we call the function again, we will pass the next slide as the argument.

function run_right(slide){
      // Move slightly to the right ...
      switch (slide){ // this switch statement checks for different possibilities for 'slide'
        case 1: // if 'slide' equals '1' ...
          document.getElementById('j').style.backgroundPosition = "-40px 0px";
          setTimeout(function(){run_right(2);}, 200);
          break;
        case 2: // if 'slide' equals '2' ...
          document.getElementById('j').style.backgroundPosition = "-80px 0px";
          setTimeout(function(){run_right(3);}, 200);
          break;
        case 3: // if 'slide' equals '3' ...
          document.getElementById('j').style.backgroundPosition = "-120px 0px";
          setTimeout(function(){run_right(4);}, 200);
          break;
        case 4: // if 'slide' equals '4' ...
          document.getElementById('j').style.backgroundPosition = "-80px 0px";
          setTimeout(function(){run_right(1);}, 200);
          break;
      }
    }

And now when we call the function for the first time, we will need to make sure we pass the starting slide.

<input type="button" value="Run Right" onclick="run_right(1);" />

Similarly, to move our div to the right slightly, we can pass the initial left attribute of the div, then move the div slightly each time the function is called.

function run_right(slide, left){
      
      left = left + 15; // Increase his left attribute by 15px
      document.getElementById('j').style.left = left+"px";
      
      switch (slide){ // this switch statement checks for different possibilities for 'slide'
        case 1: // if 'slide' equals '1' ...
          document.getElementById('j').style.backgroundPosition = "-40px 0px";
          setTimeout(function(){run_right(2, left);}, 200);
          break;
        case 2: // if 'slide' equals '2' ...
          document.getElementById('j').style.backgroundPosition = "-80px 0px";
          setTimeout(function(){run_right(3, left);}, 200);
          break;
        case 3: // if 'slide' equals '3' ...
          document.getElementById('j').style.backgroundPosition = "-120px 0px";
          setTimeout(function(){run_right(4, left);}, 200);
          break;
        case 4: // if 'slide' equals '4' ...
          document.getElementById('j').style.backgroundPosition = "-80px 0px";
          setTimeout(function(){run_right(1, left);}, 200);
          break;
      }
    }

And when we initially call the function, we need to make sure we pass the current left position of our div.

<input type="button" value="Run Right" onclick="run_right(1, document.getElementById('j').offsetLeft);" />

Stopping the Animation

So, now we have a function that, when called, will animate J to run to the right. Unfortunately, we have no way to stop it. First of all, we will need to make the function stop calling itself if J runs to the edge of our stage. To do that, every time the function runs, we will check an if statement to see if J has room to keep running. If so, we will run the function like normal. If not, we will stop calling the function and return him to the standing sprite.

function run_right(slide, left){
      // If we can add 15 pixels to the left and have J's right edge not be at the stage's right edge ...
      if ((left + 15) < (document.getElementById('stage').offsetWidth - document.getElementById('j').offsetWidth)){
        // We have room! Continue like normal here
      } else { // if we are on the right edge, we need to stop calling the function and return to standing
        document.getElementById('j').style.backgroundPosition = "0px 0px";
      }
    }

Finally, we will want to have a way to stop the function, when needed. We can set the setTimeout() command to a variable, then stop it with the clearTimeout() command. In order to do this, we will need to declare that variable outside of the function, so that we will be able to refer to it later. For now, we will declare it as a global variable. This is terrible coding practice, but we will correct this in the next post. This is what our function looks like.

var timer;
    
    function run_right(slide, left){
      if ((left + 15) < (document.getElementById('stage').offsetWidth - document.getElementById('j').offsetWidth)){
        left = left + 15; // Increase his left attribute by 15px
        document.getElementById('j').style.left = left+"px";
      
        switch (slide){ // this switch statement checks for different possibilities for 'slide'
          case 1: // if 'slide' equals '1' ...
            document.getElementById('j').style.backgroundPosition = "-40px 0px";
            setTimeout(function(){run_right(2, left);}, 200);
            break;
          case 2: // if 'slide' equals '2' ...
            document.getElementById('j').style.backgroundPosition = "-80px 0px";
            setTimeout(function(){run_right(3, left);}, 200);
            break;
          case 3: // if 'slide' equals '3' ...
            document.getElementById('j').style.backgroundPosition = "-120px 0px";
            setTimeout(function(){run_right(4, left);}, 200);
            break;
          case 4: // if 'slide' equals '4' ...
            document.getElementById('j').style.backgroundPosition = "-80px 0px";
            setTimeout(function(){run_right(1, left);}, 200);
            break;
        }
      } else {
        document.getElementById('j').style.backgroundPosition = "0px 0px";
      }
    }

And we can create another function to stop the running timer and return the sprite to the standing image.

function stop_running(){
      document.getElementById('j').style.backgroundPosition = "0px 0px";
      clearTimeout(timer);
    }

Running to the Left Animation

Now by borrowing the code from our run_right function, we can create another function to make a run_left function, with just a few modifications.

function run_left(stage, left){
      if ((left - 15) > 0){
        left = left - 15;
        document.getElementById('j').style.left = left+"px";
        switch (stage){
          case 1:
            document.getElementById('j').style.backgroundPosition = "-40px -50px";
            timer = setTimeout(function(){run_left(2, left);}, 200);
            break;
          case 2:
            document.getElementById('j').style.backgroundPosition = "-80px -50px";
            timer = setTimeout(function(){run_left(3, left);}, 200);
            break;
          case 3:
            document.getElementById('j').style.backgroundPosition = "-120px -50px";
            timer = setTimeout(function(){run_left(4, left);}, 200);
            break;
          case 4:
            document.getElementById('j').style.backgroundPosition = "-80px -50px";
            timer = setTimeout(function(){run_left(1, left);}, 200);
            break;
        }
      } else {
        document.getElementById('j').style.backgroundPosition = "0px -50px";
      }
    }

Jumping Animation

Finally, we need to create a jump function. We will pass two arguments to this function, one that will track whether the div is currently moving up or down and another that will track the current top attribute of the div. Between the two, we will determine which direction the div needs to move next, and how far (we will move the div less distance near the arc of the jump to simulate acceleration with gravity).

function jump(up, top){
      /*
       * We change J to his jumping sprite ...
       */
      document.getElementById('j').style.backgroundPosition = "-160px 0px";
      /*
       * Here, we need to decide whether he should be traveling up or down...
       */
      if (up && (document.getElementById('j').offsetTop > 20)){
        // if he is currently moving up, and he is more than 20 pixels from the top of the stage ...
        top = top - (top * .1); // This gives us a slight arc in the jump, rather than a constant movement like running
        document.getElementById('j').style.top = top+"px"; // Change his position
        timer = setTimeout(function(){jump(up, top);}, 60); // Then call the function again
      } else if (up) {
        // if he is currently moving up, but he is almost at the top of the stage and needs to come back down...
        up = false; // we switch the 'up' variable so he will be falling in the next loop
        timer = setTimeout(function(){jump(up, top);}, 60);
      } else if (!up && (document.getElementById('j').offsetTop < 115)){
        // if he is moving down, but is more than 5px from the ground, he will continue to fall...
        top = top + (top * .1); // His fall will slightly accelerate
        document.getElementById('j').style.top = top+"px";
        timer = setTimeout(function(){jump(up, top);}, 60);
      } else {
        // If he is moving down, and he is within 5px of the ground...
        document.getElementById('j').style.top = "120px"; // Place him on the ground
        document.getElementById('j').style.backgroundPosition = "0px 0px"; // return to standing sprite
        // We do not call the loop anymore since he is standing still at this point
      }
    }

Now we can put all four of our functions into buttons and have a working prototype of a running and jumping animation! Please check out the source code for this page with comments and download the sprite sheet that I used, if you'd like.

Conclusion

Now, although we have a working prototype here, you may notice it is a little buggy. When you click on more than one button at a time, the script will try to run both at once. Or, if you click the jump button again on the way down, J will continue to fall forever. Also, as I mentioned earlier, we have global variables in our script, which means it might be difficult to add this code into an existing page without crashing other JavaScript (which is also why I didn't try to run this code within this blog page). In our next post, we will clean up all of these bugs and talk about the concept of encapsulation and why it is important to write good code in the real world.

In the last post, we introduced the idea of spriting, an easy way to animate in JavaScript that works in all browsers. We also walked through how to set up the sprite as a background image for a div and then use a line of JavaScript to change the background position to make it appear as if the image has moved.

In this post, we will use this technique to animate both running and jumping motions. In order to create the animation, we will need to quickly change the background position at a regular interval. Take a look again at the sprite we are using.

Meet J, the mascot for my company, Joust Multimedia.

In our example, we have ten total images: one of J standing facing right, three of J running to the right and one of J jumping while facing right (with the same number of each frame facing left). Let’s start with making him run to the right. In order to make our image look like it is running, we will need to do two things: change the sprite to a different image and move the div towards the right.

Running to the Right Animation

We certainly won’t want to be stuck clicking different buttons to cycle through the sprites, so we will need to create some functions that do this automatically.

For our running function, we want to:

1. Move the div towards the right slightly
2. Move to the next frame of animation
3. Pause for a fraction of a second (to preserve the “persistence of vision” illusion)
4. Loop the function again

Fortunately, there is an easy way to loop with functions. A native command in JavaScript called setTimeout will allow us to create a timed delay, after which we will call the function again (from inside the function).

function run_right(){
      // Move slightly to the right ...
      // Change to the next frame of animation ...
    
      // this will call 'run_right' again after 200 milliseconds
      setTimeout(function(){run_right();}, 200); 
    }
    

So now we have a function that will call itself again five times a second (which will be fast enough to create animation for our purposes). Remember here that browsers are not terribly accurate with their timers. You can specify timing to the millisecond, but that doesn’t mean your script will run at that timing exactly!

Our next problem to tackle is how is our function going to know which sprite to change to? In our example, we will need to cycle back and forth through our three images (to have four total frames of animation). To do this, we are going to pass our function a bit of information to tell it which slide to switch to. Once in the function, we will do a test that will check which slide we should be on, then switch the background position to the correct sprite. When we call the function again, we will pass the next slide as the argument.

function run_right(slide){
      // Move slightly to the right ...
      switch (slide){ // this switch statement checks for different possibilities for 'slide'
        case 1: // if 'slide' equals '1' ...
          document.getElementById('j').style.backgroundPosition = "-40px 0px";
          setTimeout(function(){run_right(2);}, 200);
          break;
        case 2: // if 'slide' equals '2' ...
          document.getElementById('j').style.backgroundPosition = "-80px 0px";
          setTimeout(function(){run_right(3);}, 200);
          break;
        case 3: // if 'slide' equals '3' ...
          document.getElementById('j').style.backgroundPosition = "-120px 0px";
          setTimeout(function(){run_right(4);}, 200);
          break;
        case 4: // if 'slide' equals '4' ...
          document.getElementById('j').style.backgroundPosition = "-80px 0px";
          setTimeout(function(){run_right(1);}, 200);
          break;
      }
    }
    

And now when we call the function for the first time, we will need to make sure we pass the starting slide.

<input type="button" value="Run Right" onclick="run_right(1);" />
    

Similarly, to move our div to the right slightly, we can pass the initial left attribute of the div, then move the div slightly each time the function is called.

function run_right(slide, left){
      
      left = left + 15; // Increase his left attribute by 15px
      document.getElementById('j').style.left = left+"px";
      
      switch (slide){ // this switch statement checks for different possibilities for 'slide'
        case 1: // if 'slide' equals '1' ...
          document.getElementById('j').style.backgroundPosition = "-40px 0px";
          setTimeout(function(){run_right(2, left);}, 200);
          break;
        case 2: // if 'slide' equals '2' ...
          document.getElementById('j').style.backgroundPosition = "-80px 0px";
          setTimeout(function(){run_right(3, left);}, 200);
          break;
        case 3: // if 'slide' equals '3' ...
          document.getElementById('j').style.backgroundPosition = "-120px 0px";
          setTimeout(function(){run_right(4, left);}, 200);
          break;
        case 4: // if 'slide' equals '4' ...
          document.getElementById('j').style.backgroundPosition = "-80px 0px";
          setTimeout(function(){run_right(1, left);}, 200);
          break;
      }
    }
    

And when we initially call the function, we need to make sure we pass the current left position of our div.

<input type="button" value="Run Right" onclick="run_right(1, document.getElementById('j').offsetLeft);" />
    

Stopping the Animation

So, now we have a function that, when called, will animate J to run to the right. Unfortunately, we have no way to stop it. First of all, we will need to make the function stop calling itself if J runs to the edge of our stage. To do that, every time the function runs, we will check an if statement to see if J has room to keep running. If so, we will run the function like normal. If not, we will stop calling the function and return him to the standing sprite.

function run_right(slide, left){
      // If we can add 15 pixels to the left and have J's right edge not be at the stage's right edge ...
      if ((left + 15) < (document.getElementById('stage').offsetWidth - document.getElementById('j').offsetWidth)){
        // We have room! Continue like normal here
      } else { // if we are on the right edge, we need to stop calling the function and return to standing
        document.getElementById('j').style.backgroundPosition = "0px 0px";
      }
    }
    

Finally, we will want to have a way to stop the function, when needed. We can set the setTimeout() command to a variable, then stop it with the clearTimeout() command. In order to do this, we will need to declare that variable outside of the function, so that we will be able to refer to it later. For now, we will declare it as a global variable. This is terrible coding practice, but we will correct this in the next post. This is what our function looks like.

var timer;
    
    function run_right(slide, left){
      if ((left + 15) < (document.getElementById('stage').offsetWidth - document.getElementById('j').offsetWidth)){
        left = left + 15; // Increase his left attribute by 15px
        document.getElementById('j').style.left = left+"px";
      
        switch (slide){ // this switch statement checks for different possibilities for 'slide'
          case 1: // if 'slide' equals '1' ...
            document.getElementById('j').style.backgroundPosition = "-40px 0px";
            setTimeout(function(){run_right(2, left);}, 200);
            break;
          case 2: // if 'slide' equals '2' ...
            document.getElementById('j').style.backgroundPosition = "-80px 0px";
            setTimeout(function(){run_right(3, left);}, 200);
            break;
          case 3: // if 'slide' equals '3' ...
            document.getElementById('j').style.backgroundPosition = "-120px 0px";
            setTimeout(function(){run_right(4, left);}, 200);
            break;
          case 4: // if 'slide' equals '4' ...
            document.getElementById('j').style.backgroundPosition = "-80px 0px";
            setTimeout(function(){run_right(1, left);}, 200);
            break;
        }
      } else {
        document.getElementById('j').style.backgroundPosition = "0px 0px";
      }
    }
    

And we can create another function to stop the running timer and return the sprite to the standing image.

function stop_running(){
      document.getElementById('j').style.backgroundPosition = "0px 0px";
      clearTimeout(timer);
    }
    

Running to the Left Animation

Now by borrowing the code from our run_right function, we can create another function to make a run_left function, with just a few modifications.

function run_left(stage, left){
      if ((left - 15) > 0){
        left = left - 15;
        document.getElementById('j').style.left = left+"px";
        switch (stage){
          case 1:
            document.getElementById('j').style.backgroundPosition = "-40px -50px";
            timer = setTimeout(function(){run_left(2, left);}, 200);
            break;
          case 2:
            document.getElementById('j').style.backgroundPosition = "-80px -50px";
            timer = setTimeout(function(){run_left(3, left);}, 200);
            break;
          case 3:
            document.getElementById('j').style.backgroundPosition = "-120px -50px";
            timer = setTimeout(function(){run_left(4, left);}, 200);
            break;
          case 4:
            document.getElementById('j').style.backgroundPosition = "-80px -50px";
            timer = setTimeout(function(){run_left(1, left);}, 200);
            break;
        }
      } else {
        document.getElementById('j').style.backgroundPosition = "0px -50px";
      }
    }
    

Jumping Animation

Finally, we need to create a jump function. We will pass two arguments to this function, one that will track whether the div is currently moving up or down and another that will track the current top attribute of the div. Between the two, we will determine which direction the div needs to move next, and how far (we will move the div less distance near the arc of the jump to simulate acceleration with gravity).

function jump(up, top){
      /*
       * We change J to his jumping sprite ...
       */
      document.getElementById('j').style.backgroundPosition = "-160px 0px";
      /*
       * Here, we need to decide whether he should be traveling up or down...
       */
      if (up && (document.getElementById('j').offsetTop > 20)){
        // if he is currently moving up, and he is more than 20 pixels from the top of the stage ...
        top = top - (top * .1); // This gives us a slight arc in the jump, rather than a constant movement like running
        document.getElementById('j').style.top = top+"px"; // Change his position
        timer = setTimeout(function(){jump(up, top);}, 60); // Then call the function again
      } else if (up) {
        // if he is currently moving up, but he is almost at the top of the stage and needs to come back down...
        up = false; // we switch the 'up' variable so he will be falling in the next loop
        timer = setTimeout(function(){jump(up, top);}, 60);
      } else if (!up && (document.getElementById('j').offsetTop < 115)){
        // if he is moving down, but is more than 5px from the ground, he will continue to fall...
        top = top + (top * .1); // His fall will slightly accelerate
        document.getElementById('j').style.top = top+"px";
        timer = setTimeout(function(){jump(up, top);}, 60);
      } else {
        // If he is moving down, and he is within 5px of the ground...
        document.getElementById('j').style.top = "120px"; // Place him on the ground
        document.getElementById('j').style.backgroundPosition = "0px 0px"; // return to standing sprite
        // We do not call the loop anymore since he is standing still at this point
      }
    }
    

Now we can put all four of our functions into buttons and have a working prototype of a running and jumping animation! Please check out the source code for this page with comments and download the sprite sheet that I used, if you’d like.

Conclusion

Now, although we have a working prototype here, you may notice it is a little buggy. When you click on more than one button at a time, the script will try to run both at once. Or, if you click the jump button again on the way down, J will continue to fall forever. Also, as I mentioned earlier, we have global variables in our script, which means it might be difficult to add this code into an existing page without crashing other JavaScript (which is also why I didn’t try to run this code within this blog page). In our next post, we will clean up all of these bugs and talk about the concept of encapsulation and why it is important to write good code in the real world.