<h2>Multiway Motion in Crafty</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 blackBox = Crafty.e("2D, Canvas, Color, Multiway")
  .attr({ x: 200,
    y: 50,
    w: 50,
    h: 50
  })
  .color("black");

var orangeBox = Crafty.e("2D, Canvas, Color, Multiway")
  .attr({ x: 400,
    y: 150,
    w: 50,
    h: 50
  })
  .color("orange");

var purpleBox = Crafty.e("2D, Canvas, Color, Multiway")
  .attr({ x: 100,
    y: 320,
    w: 50,
    h: 50
  })
  .color("purple");

blackBox.multiway({x:150,y:75}, {W: -90, S: 90, D: 0, A: 180});

orangeBox.multiway(150, {I: -90, K: 90, L: 0, J: 180});

purpleBox.multiway(150, {Y: -45, G: -135, B: 135, H: 45});

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