Resources

• //HTML: Converting to unicode characters


• //INPUT: Read element positions
• //INPUT: Reading keypresses


• //PROCESS: if...else conditionals


• //OUTPUT: Changing an element's position
• //OUTPUT: Changing an image


• //STYLE: Use descriptive variable names


• More image resources here.


• -  http://drapak.ca/cpg/img/link-up.png
• -  http://drapak.ca/cpg/img/link-down.png
• -  http://drapak.ca/cpg/img/link-left.png
• -  http://drapak.ca/cpg/img/link-right.png

Hint: you will start with one image of link, and then change the .src to make it face a new direction.

Saving your work

Use Save as... to save the empty template as "2.09H-KeyboardMotionControl-LastName.html" in your Computer Programming 12 directory.

The assignment

Create a program that allows moves an image around the screen and changes the image using the keyboard. Check out the example below. Or check out a vehicle counter. Or a pacman shooter.

Hint: Remember NOT to use .offsetBottom or .offsetRight.

Evaluation

• ___/10 INPUT: including ANY FOUR of:
  1. make things happen when you click on them
  2. make things happen an input changes
  3. listen for keypresses
  4. read which key is pressed
  5. read current top position
  6. read current left position
• ___/10 PROCESS: including ANY FOUR of:
  1. declaring a variable
  2. finding the integer or floating decimal of a string
  3. use math to determine positions
  4. use if...else statements to control flow of code
  5. use string addition to combine things
  6. have up and down movement working correctly
  7. have left and right movement working correctly
• ___/10 OUTPUT: including ANY FOUR of:
  1. set the position mode so things can move
  2. change the left position of something
  3. change the top position of something
  4. change a image
  5. output information with innerHTML
• ___/10 STYLE:
  
  1. add your name to the filename
  2. write your name as the author
  3. update the change log
  4. correctly indent everything
  5. use lowercase for all your HTML tags
  6. use camelCase for all your ids and classes
  7. avoid lines greater than 96 characters in length
  8. restrict your style code to the head of your HTML file
  9. space out your mathematical operators
  10. write comments for your if statements
  11. use descriptive variable names

For example