Events

• For the next bit of code we will be drawing some sprites.
  • This is not the best way to do this, but it will do for now.
• In the book he gives this example
• Let's work our way up slowly.
  • Breaking out the Functions.
    • An event is something that can happen.
      • A reference.
      • In our code right now, we are interested in load event.
        • Browsers appear to be threaded.
        • They load resources at different times in different threads.
        • This means that the page might be loaded and parsed before the pictures are.
        • You see this sometimes as text jumps around when loading.
      • An event handler is called when an event occurs.
        • But only to something that has an event handler registered.
      • We need to load an image.

        • img = document.createElement("img");
          img.src = "img/player.png";

        • The first line creates an image.
        • The second line loads that image from a file.
        • This file is on the machine with the javascript file.
        • or url.
      • In this code, an event handler is added to the image.

        • img.addEventListener("load",SetTimer); 

        • When the image is loaded, we call SetTimer
      • We need to call a function regularly so
        • reference
        • An interval is a timer that repeatedly creates an event.
        • A timer is more like an alarm, one shot and done.
        • You give the function to call when creating the timer.

        • setInterval( DrawFunc , 120); 

        • So this will call DrawFunc() every 120 milliseconds.
        • If you save a reference (avar = setInterval()) you can cancel it with clearInterval
        • Or setTimeout and clearTimeout for one shot timers.
      • Drawing the Sprite:
        • For this sprite, all of the images are in a single .png file.
        • They are 24x30.
        • So in drawImage
          • reference.
          • image,
          • startx, starty (start location in the image)
          • width, height
          • destx, desty (start location in the canvas)
          • width, height
    • So after the image is loaded, we repeatedly draw different portions of the image on the screen.
  • A sprite class
    • A single walker
    • Multiple Sprites
    • Some notable parts
      • The constructor loads the image and initializes all variables.
      • handleEvent can be registered for any callback.
        • This is the required name.

        • this.image.addEventListener("load", this, false); 

        • A reference
        • This simplifies catching the events.
        • It just marks the image as drawable for the sprite and draws it.
      • The Pos getter and setter allow easy access to the position.
      • The Bounds getter is currently unused and might need modified.
      • Draw
        • Erases the old image.
        • Updates the coordinates for the old image to be the new image.
        • Draws the new image.
        • increments the cycle.
      • DoMove
        • This is for animation.
        • Checks to see if the new position is valid, update coords if so.
          • Do you understand the how the bounds checking works?
        • Draws the image.
        • Resets variables if it is time to stop moving.
        • Or resets the timer if we need to keep drawing.
      • Move starts a move.
        • Only works if it is not moving.
        • Sets up the variables for a move.
        • Sets up the initial timer.
    • Javascript is a little odd with the handling of the this pointer.
      • You can get into a member function with this pointing at the wrong thing.
      • bind makes sure that you have the correct this when you get in the callback.
      • bind reference
      • There are other alternatives, but I like this one best.
    • There probably should be a way to set the timeout speed so he can run.
      • But all of my code is currently hand pasted and I don't want to redo all of the pages.