- Keypresses in OS: I hooked document.onkeydown and document.onkeyup to custom functions that modify the sprite's x/y coordinates on each draw cycle. Originally I was only using onkeydown and moving the character when that specific key is down. However, this method is inaccurate because different browsers interpret key-repeat functionality differently. In Firefox, holding down the right arrow key results in one move, followed by a pause and then a repeat of the key being pressed. Safari and Chrome don't seem to do this. Solution: I'm going to create flags on the sprites for up/down/left/right movement that are set on the first keypress, and unset when that key is released. The Sprite class will handle movement for these flags in the draw() function.
- Double-buffering: In order to prevent flickering, the normal technique is to create two drawing fields, one active and one hidden. During each frame, you draw to the hidden field (a canvas in this case), and then flip the two when the hidden one is complete. I'm not sure if this can be gracefully done with HTML5 canvases, I really hope it can somehow.
In the meantime, I just found this incredible article about color cycling with an HTML5 canvas, and it looks like the author has tackled a lot of the issues I will eventually run into with animation. I've got a business trip to take on Tuesday, and sitting in the airport should give me plenty of time to tackle the two above issues and write an article about the progress. Stay tuned!