Ajax-loader-large-white
jQuery Events
Filling Out the Cases

Great work! Now it's time to animate our character based on the user's input from the keyboard.

Every key press on a keyboard is translated into a number for the computer to use. Don't worry about memorizing them, for now we've given you the basics in script.js

// Left arrow key pressed
case 37:
  ('img').animate({left: "-=10px"}, 'fast');
  1. The left arrow key on our keyboards translates to number 37 to the computer. When that key is pressed, we animate our image to the left by subtracting 10px
  2. To move up we subtract 10px from the top
  3. To move right we add 10px to the left
  4. Finally, to move down we add 10px to the top

Can you fill in Up, Down, and Right? What happens if you add pixels +=10px instead of subtracting?

Instructions

Let's make our image move!

  1. Complete the code for Up, Right, and Down
  2. Have fun!
?
Stuck? Get a hint! Hint
Get live, fast support from Codecademy Advisors when you get stuck. Learn more.

Your three lines of code should look very similar to what's on line 5.

Remember,

left: "+=10px"

will move your character 10 pixels to the right, and is the same as

right: "-=10px"
index.html
stylesheet.css
script.js
project
View Preview