<h2>Move the Black Box Using Arrow Keys</h2>
<div id="crafty-game"></div>

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Lato';
  margin: 20px auto;
  width: 600px;
  text-align: center;
}

h2 {
  margin: 20px 0;
}

#crafty-game {
  background: #efefef;
}

Crafty.init(600, 400, document.getElementById('crafty-game'));

var playerBox = Crafty.e("2D, Canvas, Color, Fourway")
.attr({ x: 50, y: 50, w: 50, h: 50 })
.color("black")
.fourway(200);

var foodBox = Crafty.e("2D, Canvas, Color")
  .attr({ x: 150, y: 250, w: 10, h: 10 })
  .color("red");

playerBox.z = 2;
foodBox.attr({ z:1, rotation:45 });