var width = 400, height = 300, points = 0; Crafty.init(width, height); Crafty.c("Box", { init: function() { this.addComponent("2D, Canvas, Color"); }, makeBox: 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("MovableBox", { init: function(){ this.addComponent("Box, Fourway, Collision"); this.fourway(2); this.collision(); this.onHit("Box", function(target) { points++; $("#points").text(points); target[0].obj.destroy(); }); } }); $("#addBox").bind("click", function(){ var box = Crafty.e("Box").makeBox("#FF0000"); }); $("#addMovableBox").bind("click", function(){ var box = Crafty.e("MovableBox").makeBox("#00FF00"); });
<h1>Demo 5: Collision</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>