Session 4 - More Canvas

  

Move the Origin (0,0) of the Canvas and move Sprites.

Save and Refresh whenever code is changed.

1. Moving the Canvas

  1. These four squares are drawn on the normal canvas with a grid included.
  2. These are the same 4 squares with a translated origin.


2. Polygons

  1. Copy code to editor, save in folder and refresh in browser.



  2. Copy code to editor, save in folder and refresh in browser.


3. Moving Sprites

  1. Copy code to editor, save in folder and refresh in browser.


  2. Two Crab images downloaded from Scratch are resized to 60px X 60px, duplicated to point in 4 directions and renamed.

  3. Copy code to move the Crab pointing down with claws closed.
    Make sure the path to crab image is correct.


  4. Modify code to move the Crab across the middle of the canvas.

  5. Create a single sprite called crabs.png (240px X 60px) using 4 crab images.

  6. Download underwater3 from Scratch background and resize to fit canvas.

  7. Modify code to move Crab using buttons.



4. Arrow Keys


To use the keyboard to move an image we use an event handler function that "listens' for keys.

Each key has a unique code.
  1. Modify code to move Crab using arrow keys.


  2. To animate claws change to sprite with 8 crabs and modify EventHandler function.




  3. Add falling starfish and move crab left and right to catch them.




Top Home