Edit in JSFiddle

var width = 400,
    height = 300,
    points = 0;

Crafty.init(width, height);

Crafty.sprite(24, "http://i.imgur.com/vQuTM.png", {
    person: [0,0,1,1.5]
});

Crafty.c("Coin", {
    init: function() {
      this.addComponent("2D, Canvas, Color, Collision, Tween");
      this.collision();
      this.collected = false;
        
      this.onHit("Person", function() {
          if(!this.collected){
              points++;
              $("#points").text(points);
              this.tween({ y: 0, alpha: 0.0 }, 30);
              this.collected = true;
          }
      });
    },
    
    makeCoin: function(color){
      var x = Math.random() * 100 >> 0;
      var y = Math.random() * 100 >> 0;
        
      this.attr({x: x, y: y, w: 20, h: 20}).color(color);
      return this;
    }
});

Crafty.c("Person", {
    init: function(){
      this.addComponent("2D, Canvas, Fourway, person");
      this.fourway(2);  
        
      var x = Math.random() * 100 >> 0;
      var y = Math.random() * 100 >> 0;
        
      this.attr({ x: x, y: y });
      return this;  
    } 
});

$("#addBox").bind("click", function(){ 
    var coin = Crafty.e("Coin").makeCoin("#FF0000");
});

$("#addMovableBox").bind("click", function(){ 
    var me = Crafty.e("Person");
});

<h1>Demo 7: Sprites</h1>
<button id="addBox">Add Box</button>
<button id="addMovableBox">Add Movable Box</button>
<p>Points: <span id="points">0</span></p>

<div id="cr-stage"></div>