Book Image

HTML5 Game Development Hotshot

By : Seng Hin Mak, Makzan Makzan (Mak Seng Hin)
Book Image

HTML5 Game Development Hotshot

By: Seng Hin Mak, Makzan Makzan (Mak Seng Hin)

Overview of this book

Table of Contents (15 chapters)
HTML5 Game Development HOTSHOT
About the Author
About the Reviewers

Spritesheet animation

In this task, we will animate the player frame by frame with spritesheet graphics.

Prepare for lift off

Before we start the task, make sure we have the following spritesheet graphics ready in the images folder:

Engage thrusters

In the following steps, we will apply the key frames technique on the player's avatar:

  1. The spritesheet animation is done in CSS. We define the key frames, duration between each frame, and steps in between:

    @-webkit-keyframes running {
       from { background-position:    0px; }
         to { background-position: -200px; }
    #player {
      animation: running .4s steps(2) infinite;
  2. This animation works without the need of JavaScript. However, we will still use JavaScript to update the animation duration so it runs faster from time to time:

    // view animation related
    player.updateAnimationDuration = function(duration) {
      if (duration % 50 === 0) { = duration + 'ms';
  3. We calculated the duration in the tick function...