How to check whether a craftyjs entity has fallen out of crafty area?

Question

 <script>
      Crafty.init(450,350, document.getElementById('game'));
     var sledge=   Crafty.e('Floor, 2D, Canvas, Color')
  .attr({x: 0, y: 250, w: 150, h: 10})
  .color('green');

  var hero =Crafty.e('Canvas, 2D, Image, Twoway, Gravity')
  .attr({x: 0, y: 0, w: 50, h: 50})
  .image("jerry.png")
  .twoway(150)
  .gravity('Floor');

    </script>

For example in this case how do I get an alert saying that that the last entity, hero has gone out of area of crafty initialized to?

Answer 1

The simplest way would be to compare the entities position each frame, like this:

hero.bind("EnterFrame", function(e) {
    if (hero.x < 0 
     || hero.y < 0 
     || hero.x > Crafty.viewport._width 
     || hero.y > Crafty.viewport._height) {
        // Whatever logic you're wanting
    }
});

This assumes the viewport is fixed, but that seems implied by the nature of the question.