<h2>Use Arrow Keys to move the Box</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'));

Crafty.e("2D, Canvas, Color, Fourway")
      .attr({x:200, y:100, w:200, h:50})
      .color("orange")
      .fourway(300);

External CSS

  1. https://fonts.googleapis.com/css?family=Lato

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/crafty/0.7.1/crafty-min.js