Ace Editor Bootstrap

by ukkpower

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/ace/1.1.01/ace.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://ingemit.com/html5-game/data/level.tmx"></script>
<script src='http://cdn.html5quintus.com/v0.2.0/quintus-all.js'></script>
<div class="container">
    <div class="col-md-6">
<div id="editor">function foo(items) {
    var x = "All this is syntax highlighted";
    return x;
}</div>
    </div>
    <div class="col-md-6">---End of editor---</div>
</div>

CSS

#editor {
    /** Setting height is also important, otherwise editor wont showup**/
    height: 300px;
}

JavaScript

var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/javascript");

var Q = window.Q = Quintus()
    .include("Scenes, Sprites, Anim,2D, Input, Touch, UI, TMX, Audio")
    .setup({maximize: true});

Q.input.keyboardControls();
Q.input.joypadControls();
Q.gravityY = 0;
Q.gravityX = 0;

/*upon collision with flower move_collision vaiables will be used
 for moving to next box, in correct dirction*/
var move_collision = "";

Q.component("PlayerControls", {
    // default properties to add onto our entity
    defaults: {speed: 32, direction: 'null'},

    // called when the component is added to
    // an entity
    added: function () {
        var p = this.entity.p;

        // adding default properties
        Q._defaults(p, this.defaults);

        // every time our entity steps, call its step method
        this.entity.on("step", this, "step");
    },

    step: function (dt) {
        // entity's properties
        var p = this.entity.p;

        var total_points = Q.state.get("points");
        if (total_points >= 4) {
            Q.state.set("points", 4);
            Q.stageScene("GameOverMsg", 2);//display game over message
        }//inner if

        // direction from the input will help in animation
        p.direction =   Q.inputs['left'] ? 'left' :
                        Q.inputs['right'] ? 'right' :
                        Q.inputs['up'] ? 'up' :
                        Q.inputs['down'] ? 'down' : null;


        window.onkeyup = function (e) {
            if (e.keyCode == 37)//left
            {
                p.x -= p.speed;
                move_collision = "left";
            }
            else if (e.keyCode == 38)//up
            {
                if (!(p.y <= 36)) {
                    p.y -= p.speed;
                    move_collision = "up";
                }
            }
            else if (e.keyCode == 39)//right
            {
                p.x += p.speed;
               ...