The Essential Guide to HTML5: Using Games to Learn HTML5 and JavaScript

Chapter 3. Bouncing Ball

• creating programmer-defined objects

• using setInterval for animation

• drawing images

• form input and validating form input

• for loops

• drawing with gradients

Introduction

Animation, whether at the movies, using a flipbook, or generated by computer, involves displaying a sequence of still images fast enough so that we interpret what we see as movement, as life. In this chapter, I'll show you how to produce animated scenes by simulating a ball bouncing in a 2-dimensional box, with horizontal and vertical speeds that can by changed by a player. The first iteration of our program calculates new positions for the ball at fixed intervals ...