<h2>Adding Sounds 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]
      }
    }
  },
  "audio": {
    "back_music": ["http://opengameart.org/sites/default/files/audio_preview/%5E.ogg.mp3"],
    "gun_shot": ["http://opengameart.org/sites/default/files/audio_preview/8bit_gunloop_explosion.wav.mp3"]
  }
};

Crafty.load(game_assets);

//Crafty.audio.play("back_music", -1, 0.5);

var platform = Crafty.e('Floor, 2D, Canvas, Color, WiredHitBox').attr({
  x: 0,
  y: 280,
  w: 600,
  h: 120
}).color('black');

var walking_hero = Crafty.e('2D, Canvas, hero_walking, SpriteAnimation, Twoway, Gravity, Keyboard').attr({
  x: 260,
  y: 200
}).twoway(100)
  .gravity('Floor')
.crop(0, 10, 85, 76);

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

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

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

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

walking_hero.bind('AnimationEnd', function() {
  if(this.getReel().id=='jumping') {
    console.log(this.getReel().id);
    walking_hero.animate("walking", -1);
  }
});