<h2>Sprites 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_jumping: [2, 3],
        hero_sitting: [0, 4]
      }
    }
  }
};

Crafty.load(game_assets);

var idle_hero = Crafty.e("2D, Canvas, hero_idle")
  .attr({
    x: 10,
    y: 10
  });

var small_idle_hero = Crafty.e("2D, Canvas, hero_idle")
  .attr({
    x: 25,
    y: 320,
    w: 48,
    h: 60
  });

var walking_hero = Crafty.e("2D, Canvas, hero_walking")
  .attr({
    x: 150,
    y: 80
  });

var jumping_hero = Crafty.e("2D, Canvas, hero_jumping")
  .attr({
    x: 290,
    y: 170
  });

var sitting_hero = Crafty.e("2D, Canvas, hero_sitting")
  .attr({
    x: 440,
    y: 250
  });