1.16 Hand-in: Controlling motion

Controlling motion with a keyboard

In this lesson we are going to learn how to make a program so that you can move something around with a keyboard. Obviously this is fundamental to certain kinds of games. And no, I am not going to teach you how to crouch or toggle maps. [youtube]

In order to make this work, you will have to combine several strategies:

jQuery and using libraries

Javascript is a full and capable language with pretty good (although not perfect) fundamentals. It compares well with other languages. However, while it is possible to do a great many things with Javascript, it is often a lot of work to do it. Programmers will often create sets of functions and procedures that will automate repetitive, programming intensive tasks. For example, if you are constantly programming maps into your programs, you will want to make one great set of code that you can then borrow and use in many of your other programs.

This set of code is called a library. Code libraries can share a set of useful programming functions to more than one program. I have made dozens of code libraries in the past to support large or repetitive projects. For example, if I am constantly validating user security among a couple hundred web pages, I will write one shared library that will help apply security consistently and with less effort. Writing one library to use with many programs means less work and less repetition.

Introducing jQuery

jQuery is a set of libraries developed by Google to help make and run Google web apps. The home of the jQuery community is at: jquery.com.

jQuery's libraries allow you to do things like:

In this lesson, we will be using jQuery to simplify animation.

Linking the jQuery library to your code

In the head of your document, you can add the jQuery library by adding this before your <script>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Every time your page is loaded, it will now contact a google webserver, and download the library so that your browser can use it. This slows down the load speed of your page a little. Some people download their own copy of the library and point the <script src="..."> to their downloaded copy. Sometimes this actually slows things down more — it all depends on internet traffic and server power.

OK - let's animate something...

How'd you do that?

Pretty easily!

Animating things in jQuery works in a few steps:

  1. link to the jQuery library:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  2. give the thing that you want to animate an id: <p id="animateID">Animate this!</p>
  3. make sure that the thing to animate has CSS <style> settings to:
    • position: relative;
      (which keeps the element in it's normal place, but movable) or
    • position: fixed;
      (which fixes the element, overlapping, moveable, but not scrollable) or
    • position: absolute;
      (which fixes the element, overlapping, moveable, scrollable)
  4. You need to choose the CSS-style code to use, such as moving the element 100px from the top:
    top: "100px"
  5. trigger the animation as Javascript code:
    $("#animateID").animate({top: "100px"});

Caution about selecting IDs with jQuery!

jQuery uses $("#animateID") instead of document.getElementById("animateID").

You have to use $("#animateID")animate({});.
document.getElementById("animateID").animate({}); will not work.

Other animations with jQuery

Font size changes

$("#animateID").animate({fontSize: "50px"});
$("#animateID").animate({fontSize: "30px"});
$("#animateID").animate({fontSize: "100px"});
$("#animateID").animate({fontSize: "16px"});

Image size changes

$("#animateImageID").animate({width: "100px"}); // goes BIG
$("#animateImageID").animate({width: "34px"}); // and back to normal

Relative movement

$("#animateID").animate({top: "+=50px"}); // moves "animateID" DOWN

$("#animateID").animate({top: "-=50px"}); // moves "animateID" UP

$("#animateID").animate({left: "+=50px"}); // moves "animateID" RIGHT

$("#animateID").animate({left: "-=50px"}); // moves "animateID" LEFT

Saving your work

Download the template and rename it to your last name, such as "1.16H-ControllingMotion-LastName.html".

The assignment

In this assignment you will use arrow keys on the keyboard to move an element around the screen.

Do it with style

Develop things in small chunks that work

By now, you have had the experience of typing in a large chunk of code and... nothing. Just a bunch of errors. And a really frustrating time figuring out where the errors are coming from.

There is a way around this. If you develop your code in very small chunks at a time and get each chunk working, it is much, much, MUCH easier to debug your mistakes.

So if you are not trying out your code every five minutes or less, you are probably doing it the hard way. I would recommend building your assignment in the following steps:

  1. Get the basics working:
    Look at the code at the top of this example, type it in and get it working. Pay special attention to:
    • the jQuery linking code
    • the animateHeading function
    • the CSS code for #animateID
    • and the HTML code for the body

  2. Get the program recognizing keystrokes:
    Remember the first example from Keyboard control? Steal the Javascript and HTML code from it, and incorporate it into the <script> and <body> areas of your code.
  3. Get different actions happening for different keys:
    Then add the code from the if () statement from the next part of the lesson, but change the functions for the different key codes. (Perhaps animateUp();, etc.?)
  4. Define the different action functions:
    Look at the last part of Keyboard control. Use this as inspiration to organize your action functions.
  5. Add the jQuery animation:
    In particular, look at the last example on this page that refers to relative movement.
  6. Clean it up and submit:
    Check you code for good style, indentation, modular functions, intelligent commenting (including INPUT, PROCESS, and OUTPUT labels), etc. Then hand it in...

Evaluation (out of 10)

Extend and expand

Can you modify the code so that it moves an arrow around in the same direction that it is pointing?
(Hint: &uarr;=↑

Can you change or rotate a graphic depending on which way the element is heading?

Of course motion is nice, but motion should be blocked by obstacles. Like, travelling through a maze. How would you do this?
For one simple solution, you will have to know how arrays work, which is our next topic.