JavaScript Animation

Create a single web page (split in to separate HTML and JS files) with buttons that demonstrate each of the following. NOTE: As alluded to above, there are only a few "concrete design" requirements for this application... it's mainly an exercise in creativity and putting together something that might be fun for you personally.

Have one object on the screen which moves up, down, left, and right with each mouse-click of "direction" buttons on the screen.

If you want, try using small images instead of just simple boxes.

Have one object on the screen which moves up, down, left, and right with each click of the up, down, left, right arrow keys on the keyboard.

Start and Stop the animated movement of at least two objects on the screen.

Note: Prevent "doubling up" on animation timers (when starting an object more than once "doubles" it's speed).

Animate multiple objects simultaneously.

Have object "bounce" around the screen, changing direction automatically if they reach the edge of the screen.

TIP: Since reacting to the actual window size is a little tricky (though certainly possible), you can just assume the screen is 500px X 500px if desired.

If you feel really ambitious, try having the objects bounce off of each other if they collide!

Virtually any other idea utilizing the above topics can be done use your own imaginations to create an application utilizing the above ideas. Examples:

Move things with keys: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

Move things with the mouse: https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

NOTE (An OPTION): For more more "accurate" timing in animation, you may use the requestAnimationFrame() function instead of setTimeOut() or setInterval() which is used in the posted examples. However, requestAnimationFrame() is designed for fairly fine-grained control over "real" animation/object movement that might occur in a real game, video display, etc., so it a bit more involved to use properly and requires some knowledge of animation techniques, frame-rates, etc.