// Init Crafty: Crafty.init(); Crafty.canvas.init(); // green box Crafty.e("2D, Canvas, Color, green_box") .attr({x: 0, y: 0, w: 50, h: 50}) .color("rgb(0,255,0)"); // main gui component, put all your static gui stuff in here var gui = document.createElement("div"); gui.setAttribute("id", "gui"); // set id! // one of the gui components: score text var scoreText = document.createElement("div"); scoreText.setAttribute("id", "scoreText"); // set id! scoreText.appendChild(document.createTextNode("2")); Crafty.bind("Score", function(newValue) { scoreText.innerHTML = newValue; }); gui.appendChild(scoreText); Crafty.stage.elem.appendChild(gui); Crafty.bind("EnterFrame", function() { Crafty.viewport.x += 1; // all entites will move but gui won't Crafty.trigger("Score", Crafty.viewport.x); });
#gui { position: relative; text-align: center; z-index: 6000000; } #scoreText { float: left; color: blue; font-size: x-large; }