Crafty.js

by barbados22

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/crafty/0.5.4/crafty-min.js"></script>

CSS

#gui {
    position: relative;
    text-align: center;
    z-index: 6000000;
}
#scoreText {
    float: left;
    color: blue;
    font-size: x-large;
}

JavaScript

// 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);
});