var width = 400, height = 300, points = 0; Crafty.init(width, height); Crafty.c("Box", { init: function() { this.addComponent("2D, Canvas, Color, Collision, Tween"); this.collision(); this.collected = false; this.onHit("MovableBox", function() { if(!this.collected){ points++; $("#points").text(points); this.tween({ y: 0, alpha: 0.0 }, 30); this.collected = true; } }); }, 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"); this.fourway(2); } }); $("#addBox").bind("click", function(){ var box = Crafty.e("Box").makeBox("#FF0000"); }); $("#addMovableBox").bind("click", function(){ var box = Crafty.e("MovableBox").makeBox("#00FF00"); });
<h1>Demo 6: Animation</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>