JavaScript Animations

Simple JavaScript Animations

Click the play button, then "View Source" to see the code. Please note: these simple examples do not demonstrate good object oriented JavaScript programming practices. They just show basic JavaScript animation techniques.

Key press event.

Moving image.

Image rebound.

Random Numbers.

Get screen size, window resize event (with this you can keep your background image the same size as browser window).

Isolating a sprite from a sprite set image (faces).

Changing poses while moving (sprite set of face images).

Using a sprite set image (animated explosion).

Animating Obama.

Jungle animation (wait for it ... )

Paddle game: use left/right arrow keys to rebound the ball (global variables used).

Same paddle game, but using JavaScript objects (much better programming style).

Parallax

Parallax means that various elements on the page move at different rates as you scroll (giving a 3D effect like when you are riding in a car and closer objects move faster).

For W3School's super simple vertical parallax (scroll up/down to see effect).

For W3School's nicer vertical parallax (scroll up/down to see effect).

For github's "not found" page which looks kinda "parallaxy". The images on the page move at different rates, based on the current (x, y) position of the mouse.

For Sally's horizontal parallax (scroll left/right to see effect). Click here for a zip file of images that might be good if you want to play around with horizontal parallax.

Click here for a zip file of all the code examples above (simple animations, parallax).

How to Make a Sprite

A sprite is any image that you animate, but a sprite image needs to have a transparent background so that you are not looking at a moving image that has a white box around it. JPG files do not support transparency, so if you want to use a JPG image, open it in an image editor and save it as "png" format. For instructions about how to do this on a PC using (open source) paint.net, click here (pdf) or here (doc). For instructions about how to do this on a MAC using the terminal, click here (pdf) or here (doc).

For some "ready to use" sprite set images, click here (zip file). These images already have a transparent background so you can begin experimenting right away.

Simple Animations with HTML5 Canvas

Click the play buttons (below) to run the examples, then "View Source" to see the code.

Catch rain.

Stop enemy paratroopers from landing.

Shoot birds.

Bouncing balls.

Colliding balls.

Transparent bubble bounce.

Fish bounce.

Click here for a zip file of all the Canvas examples above.

Click here to see some "ridiculously impressive" HTML5 canvas code (not simple and not Sally's).

Visual JS Object - Review

Click here for a simple animation that provides a good review of:

  • How you can get a reference to a DOM object, e.g. document.getElementById("element_id"), then (dynamically) enhance that object by adding your own properties to it.
  • How a function can create (and return) an object with properties and methods. The "Main Program" then calls this function twice to create two different (ball) objects. The Main Program then proceeds to calls methods on the various objects.
  • How to associate a JavaScript function to a JavaScript event (the example listens for a space to be pressed).
  • How to use a timer to have a function called repeatedly (game loop).

Visual Object Composition

Here are some simple JavaScript examples that use basic object oriented techniques:

  • Click here for a simple page that makes a ball object that moves when you click on it.
  • Click here for code that demonstrates object composition. This code creates a "field" (really just a green div that represents a playing field) then adds a ball to the field. Since the ball is inside of the field, you can code it (with good programming style) so that the ball that will not move outside the field (div) that it's in.
    • Click here to see how the CSS and HTML and javaScript all have to "align" when you start adding more fields with their own balls. This is an ANTI-PATTERN (not to emulate).
    • Click here for this same code, but using document.createElement( ) so that JavaScript makes the balls totally (you no longer need to put the balls inside the field in the HTML and you dont' have to partially style the balls in CSS). It is better programming style to have related code all in one place, not split out in three different places.
  • Click here to see what is involved when you want to animate objects (using "setInterval" and the "this" keyword).
  • Click here for a zip file of the object composition examples above.