I'm don't have a lot of CraftyJS experience yet, so don't take this as the best way to do it, but...
Some references I found in the API documentation:
- Apply the Collision component to the player and tree
- use onHit() for the player. When fired, this is passed a collection of hitDatas. Found definition of hitData in the description for hit()
Here's an example -- when the entity tagged with "Player" component collides with any component tagged "Tree", will back the player object's x position off by the amount it is overlapping with the tree.
<html>
<body>
<div id="game"></div>
<script type="text/javascript" src="https://rawgithub.com/craftyjs/Crafty/release/dist/crafty-min.js"></script>
<script>
Crafty.init(640,100, document.getElementById('game'));
Crafty.e('2D, Canvas, Color, Twoway, Player, Collision')
.attr({x: 0, y: 50, w: 50, h: 50})
.color('#00F')
.twoway(400)
.onHit('Tree', function(hitDatas) {
hitData = hitDatas[0];
this.x -= hitData.overlap * hitData.nx;
});
Crafty.e('2D, Canvas, Color, Tree, Collision')
.attr({x: 300, y:0, w: 40, h: 100})
.color('#873');
</script>
</body>
</html>