Crafty test

HTML

<script src="https://github.com/craftyjs/Crafty/releases/download/0.6.3/crafty.js"></script>
<div id="container"></div>

JavaScript

var tileSize = 43;
var tiles = 36;
var container = document.getElementById('container');

Crafty.init(tileSize * tiles, tileSize * tiles, container);

Crafty.viewport.clampToEntities = false;
Crafty.viewport.init(9 * tileSize, 9 * tileSize, container);
//do i need to set Crafty.viewport.bounds ???

for (var i = 0; i < tiles; i++) {
    for (var j = 0; j < tiles; j++) {
        Crafty.e('2D, DOM, Color, Text')
            .attr({
            x: i * tileSize,
            y: j * tileSize,
            w: tileSize,
            h: tileSize,
            z: 1
        })
            .color(Crafty.math.randomElementOfArray(['#FF0000', '#00FF00', '#0000FF']), 0.5)
            .text(i + '/' + j);
    }
}

var movable = Crafty.e('2D, DOM, Color, Tween')
    .attr({
    x: Crafty.math.randomInt(0, 5 - 1) * tileSize,
    y: Crafty.math.randomInt(0, 5 - 1) * tileSize,
    w: tileSize,
    h: tileSize,
    z: 2
})
    .color('#000000')
    .bind('KeyDown', function (e) {
    if (this.moving) {
        return;
    }

    var newPosition = {
        x: this.x / tileSize,
        y: this.y / tileSize
    };

    var tween = {};

    switch (e.key) {
        case Crafty.keys.UP_ARROW:
            tween.y = this.y - tileSize;
            newPosition.y -= 1;
            break;
        case Crafty.keys.DOWN_ARROW:
            tween.y = this.y + tileSize;
            newPosition.y += 1;
            break;
        case Crafty.keys.LEFT_ARROW:
            tween.x = this.x - tileSize;
            newPosition.x -= 1;
            break;
        case Crafty.keys.RIGHT_ARROW:
            tween.x = this.x + tileSize;
            newPosition.x += 1;
            break;
    }
    tween.rotation=this.rotation+0;
    if (
    newPosition.x < 0 || newPosition.x >= tiles || newPosition.y < 0 || newPosition.y >= tiles) {
        return;
    }

    this.moving = true;

    this.tween(tween, 100);
})
    .bind('TweenEnd', function (e) {
    this.moving = false;
});

//Crafty.viewport.follow(movable, 0, 0);