<h2>Sprite Animation in Crafty</h2>
<div id="crafty-game"></div>

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Lato';
  margin: 20px auto;
  width: 600px;
  text-align: center;
}

h2 {
  margin: 20px 0;
}

#crafty-game {
  border: 1px solid black;
}

var stageWidth = 600;
var stageHeight = 400;
var gameScore = 0;

Crafty.init(600, 400, document.getElementById('crafty-game'));

var game_assets = {
  "sprites": {
    "http://opengameart.org/sites/default/files/hero_spritesheet.png": {
      tile: 80,
      tileh: 94,
      map: {
        hero_idle: [0, 0],
        hero_walking: [1, 1],
        hero_alert: [0, 3],
        hero_jumping: [2, 3],
        hero_sitting: [0, 4]
      }
    }
  }
};

Crafty.load(game_assets);

var walking_hero = Crafty.e('2D, Canvas, hero_walking, SpriteAnimation').attr({
  x: 260,
  y: 20
});

walking_hero.reel("walking", 1000, [
  [0, 1],
  [1, 1],
  [2, 1],
  [3, 1],
  [4, 1],
  [5, 1]
]);

walking_hero.animate("walking", -1);

var jumping_hero = Crafty.e('2D, Canvas, hero_alert, Keyboard, SpriteAnimation').attr({
  x: 260,
  y: 240
});

jumping_hero.reel("jumping", 1000, [
  [0, 3],
  [1, 3],
  [2, 3],
  [1, 3],
  [0, 3]
]);

jumping_hero.bind('KeyDown', function(evt) {
  if (evt.key == Crafty.keys.UP_ARROW) {
    jumping_hero.animate("jumping", 1);
  }
});