Improved Keyhandling Logic
Explore how to enhance keyboard handling in HTML5 canvas to allow moving shapes with multiple keys pressed simultaneously. Understand why switch statements limit movement and how to implement better logic for smooth diagonal motion, improving interactive canvas applications.
We'll cover the following...
When talking about our current logic for dealing with the keyboard events, I mentioned that we are using a less-than-ideal solution. To see why, go back to your example and press and hold the Up and Right arrow keys at the same time. What you would expect to see is your triangle moving diagonally. What you actually see is your triangle moving in only one direction - either right or up. That isn’t what we want!
The reason for this bizarre behavior is because we are using a switch statement to figure out which arrow key was pressed. There is nothing wrong with this general approach, for switch statements are far less verbose than if/else-if statements for checking which condition ...