JSFiddle - React, Tailwind, and code Playground

HTML

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

JavaScript

var size = 64;
var mapSize = 5;
Crafty.init(size * mapSize, size * mapSize);

for (var i = 0; i < mapSize; i++) {
  for (var j = 0; j < mapSize; j++) {
    var color;
    if (i === 0 || j === 0 || i === mapSize - 1 || j === mapSize - 1)
      Crafty.e("2D, Canvas, Collision, Color, Solid, WiredHitBox")
            .attr({x: i*size, y: j*size, w: size, h: size, z: 1})
            .color('lime');
    else
      Crafty.e("2D, Canvas, Collision, Color, WiredHitBox")
            .attr({x: i*size, y: j*size, w: size, h: size, z: 1})
            .color('gray');
  }     
}

Crafty.e("2D, Canvas, Collision, Color, Tween, SolidHitBox")
      .attr({x: 2*size - size/4, y: 2*size - size/4, w: size + size/2, h: size + size/2, z: 10})
      .color('blue')
      .collision(
        [size/4,size/4], [size+size/4, size/4], [size+size/4,size+size/4], [size/4, size+size/4]
      )
      .bind("KeyDown", function(e) {
        if (e.key === Crafty.keys.UP_ARROW && this.y / size > 1)
          this.tween({y: this.y - size}, 500);
        else if (e.key === Crafty.keys.DOWN_ARROW && this.y / size < mapSize - 3)
          this.tween({y: this.y + size}, 500);
        else if (e.key === Crafty.keys.LEFT_ARROW && this.x / size > 1)
          this.tween({x: this.x - size}, 500);
        else if (e.key === Crafty.keys.RIGHT_ARROW && this.x / size < mapSize - 3)
          this.tween({x: this.x + size}, 500);
      })