Keyboard movement without Canvas
The HTML Canvas is not the only way to achieve element motion in response to keyboard input. This demo takes user input and applies movement to a DOM element using CSS via JS.
Handling Key Events
Key Events can be handled in multiple ways. These demos show the different between updating on key event and constantly updating.
Handling Mouse Events
Mouse Events can be handled in multiple ways. These demos show uses of mouse click as well as mouse move and scroll events on canvas.
Event Propagation
Event Propagation is the way events are handled through the DOM hierarchy. Events such as mouse and keyboard inputs are first registered at the browser level, after which they are propagated to child elements until the event reaches the target (capturing phase). After which, events propagate back up the hierarchy to the browser (bubbling phase).
Event Focus
Element focus is a great way to tell if user input is relevant to certain website functionality. By applying event listeners to specific elements we can be sure the user is providing input for that element.
Game Engine Mouse Input
Game Engines provide more complex ways to create dynamic animated systems. This demo shows how a barebones game engine can be used to create and manage moving game entities with collision logic.
Sound
Sound is a powerful asset medium for multimedia applications. This demo shows how sound can be played in both continuous and isolated ways to achieve different results.
Exercise: DVD Animation
DVD pause menu animation created using images and canvas animation.