Javascript, Crafty, kolizja w grze 2D

Muszę napisać pracę przejściową w formie prostej gry komputerowej. Problem jest taki, że nigdy tego nie robiłem i ciągle mam problemy.
Gra ma zostać napisana w JS z wykorzystaniem biblioteki Crafty. (http://craftyjs.com/)
Stworzyłem dwa kwadraty, czerwony i niebieski. Czerwony to player, a niebieski to zwykła przeszkoda.
Kiedy player uderza w przeszkodę wykrywana jest kolizja (pokazuje to konsola w przeglądarce w postaci komunikatów), ale player nadal może przejść przez przeszkodę. Problem mam taki, że nie mam pojęcia jak napisać to, by gracz zatrzymał się, gdy dotknie przeszkody.
Zupełnie nie rozumiem kodu Crafty. :/ Mam nadzieję, że ktoś z was używał Crafty.

Kod:

Gra = {
  start: function() {
    Crafty.init(600, 400);
    Crafty.background('rgb(249, 223, 125)');

    var player = Crafty.e('2D, Canvas, Color, Fourway, Collision')
    .attr({w: 50, h:50 })
    .color('red')
    .fourway(30)
    .collision()
    .checkHits('2D')
    .bind("HitOn", function() { //Tu wykrywa kolizję
      Crafty.log("Jest kolizja!"); 
      //...
    })
    .bind("HitOff", function() { //Tu kolizja zostaje zakończona
      Crafty.log("Nie ma!"); 
    });

    var box = Crafty.e('2D, Canvas, Color')
    .attr({x: 100, y: 0, w: 50, h: 50})
    .color('blue')
  }
}

Do dokumentacji się nie chce zajrzeć? http://craftyjs.com/api/Collision.html

http://requirebin.com/?gist=4f76e88be389f2fe8f7f

Czytałem dokumentacje, gdybym tego nie zrobił nie pisałbym na forum. Czytałem != zrozumiałem.
Ten drugi link, który podałeś dużo mi nie pomógł, ale do czegoś mnie natchnął. Jednak nie wiem czy idę w dobrą stronę.

Gra = {
  start: function() {
    Crafty.init(600, 400);
    Crafty.background('rgb(249, 223, 125)');

    var box = Crafty.e('box, 2D, Canvas, Color')
    .attr({x: 100, y: 100, w: 50, h: 50})
    .color('blue');

    var player = Crafty.e('2D, Canvas, Color, Fourway, Collision')
    .attr({x: 0, y:0, w: 50, h:50 })
    .color('red')
    .fourway(60)
    .collision()
    .onHit('box', function(){
        if(this.x >= box.x) //prawa
        {
            this.x = box.x + box.w ;
        }
        else if(this.x <= box.x) // lewa
        {
            this.x = box.w ;
        }
      })
    }
  }

Działa kolizja z prawym i lewym bokiem, ale nie wiem jak zrobić dolny i górny bok oraz czy w ogóle te ify mają sens.