• Choose a category
• All
• Classic-Fiction

Moving Between Two Points: The Distance of a Line

Drawing the ball

Tracing movement: A path of points

Moving on a Vector

Bouncing Off Walls

Bouncing a Single Ball

Multiple Balls Bouncing Off Walls

Multiple Balls Bouncing with a Dynamically Resized Canvas

Multiple Balls Bouncing and Colliding

Ball interactions in physics

Making sure the balls don’t start on top of each other

Circle collision detection

Separating the code in drawScreen()

Updating positions of objects

Better interaction with the walls

Collisions with balls

Ball collisions in depth

Multiple Balls Bouncing with Friction

Curve and Circular Movement

Uniform Circular Motion

Moving in a Simple Spiral

Cubic Bezier Curve Movement

Moving an Image

Creating a Cubic Bezier Curve Loop

Simple Gravity, Elasticity, and Friction

Simple Gravity

Simple Gravity with a Bounce

Gravity with Bounce and Applied Simple Elasticity

Simple Gravity, Simple Elasticity, and Simple Friction

Easing

Easing Out (Landing the Ship)

Easing In (Taking Off)

What’s Next?

6. Mixing HTML5 Video and Canvas

HTML5 Video Support

Theora + Vorbis = .ogg

H.264 + $$$ = .mp4

VP8 + Vorbis = .webm

Combining All Three

Converting Video Formats

Basic HTML5 Video Implementation

Plain-Vanilla Video Embed

Video with Controls, Loop, and Autoplay

Altering the Width and Height of the Video

Dynamically scaling a video

Preloading Video in JavaScript

A Problem with Events and Embedded Video in HTML5

Video and the Canvas

Displaying a Video on HTML5 Canvas

Video must still be embedded in HTML

Video is displayed like an image

Set an interval to update the display

HTML5 Video Properties

Video on the Canvas Examples

Using the currentTime Property to Create Video Events

Canvas Video Transformations: Rotation

Canvas Video Puzzle

Setting up the game

Randomizing the puzzle pieces

Drawing the screen

Detecting mouse interactions and the canvas

Creating hit test point-style collision detection

Swapping two elements in a two-dimensional array

Testing the game

Creating Video Controls on the Canvas

Creating video buttons

Preloading the buttons

Placing the buttons

Listening for the button presses

Animation Revisited: Moving Videos

What’s Next?

7. Working with Audio

The Basic

Audio Formats

Supported Formats

Audacity

Example: Using All Three Formats

Audio Tag Properties, Functions, and Events

Audio Functions

Important Audio Properties

Important Audio Events

Loading and Playing the Audio

Displaying Attributes on the Canvas

Playing a Sound with No Audio Tag

Dynamically Creating an Audio Element in JavaScript

Finding the Supported Audio Format

Playing the Sound

Look Ma, No Tag!

Creating a Canvas Audio Player

Creating Custom User Controls on the Canvas

Loading the Button Assets

Setting Up the Audio Player Values

Mouse Events

Sliding Play Indicator

Play/Pause Push Button: Hit Test Point Revisited

Loop/No Loop Toggle Button

Click-and-Drag Volume Slider

Volume slider variables

Volume slider functionality

Case Study in Audio: Space Raiders Game

Why Sounds in Apps Are Different: Event Sounds

Iterations

Space Raiders Game Structure

State machine

Initializing the game: no global variables

Preloading all assets without global variables

Resetting the game

Mouse control

Bounding box collision detection

Playing the game

Iteration #1: Playing Sounds Using a Single Object

Iteration #2: Creating Unlimited Dynamic Sound Objects

Iteration #3: Creating a Sound Pool

Iteration #4: Reusing Preloaded Sounds

Other stuff you could do to improve the game

The final code for Space