<h2>Press 'T' to reduce player opacity</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
});

playerBox.bind('KeyDown', function(e) {
  if (e.key == Crafty.keys.T) {
    this.alpha = 0.5;
  }
  if (e.key == Crafty.keys.O) {
    this.alpha = 1;
  }
});

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