键盘

Crafty 提供了简单的组件让你非常容易的通过键盘控制游戏角色：

• Twoway
• Fourway
• Multiway

Fourway 和 Multiway

使用 Fourway 组件，你需要调用 fourway() 方法来调整运动的速度。

Crafty.init();
Crafty.e('2D, Canvas, Fourway, Color')
  .attr({x: 10, y: 10, h: 30, w: 30})
  .color('red')
  .fourway(5)

这里我们创建了一个红色方块，它将响应 WASD 和方向键进行运动。"Fourway" 是 "Multiway" 的包装类型,你可以使用它定义更加复杂的运动。

Twoway

当你创建平台游戏时（例如马里奥）,你可能需要使用 Twoway 组件， 这样你可以从任何一边移动，跳上跳下。

Crafty.init();
Crafty.e('2D, Canvas, Twoway, Color')
  .attr({x: 10, y: 10, h: 30, w: 30})
  .color('red')
  .twoway()

大多数情况下，你会觉得加入 Gravity 组件会更好!

键盘组件

你可能需要比上面组件提供的还要多的控制。为了响应特定的键盘事件，需要给实体添加一个 "Keyboard" 组件。下面，我们将创建一个按任意键转为蓝色方块的红色方块。

Crafty.init();
Crafty.e('2D, Canvas, Color, Keyboard')
  .attr({x: 10, y: 10, h: 30, w: 30})
  .color('red')
  .bind("KeyDown", function() {
    this.color("blue");
  })

各种 键盘事件 会传递关于原始DOM事件信息。Crafty 提供了一个便于使用的 按键字典。在接下来的例子中, 我们将创建一个使用方向键移动的方块：

Crafty.e("2D, Canvas, Color, Keyboard")
  .attr({x: 10, y: 10, w: 30, h: 30})
  .color("red")
  .bind('KeyDown', function(e) {
    if(e.key == Crafty.keys.LEFT_ARROW) {
      this.x = this.x - 1;
    } else if (e.key == Crafty.keys.RIGHT_ARROW) {
      this.x = this.x + 1;
    } else if (e.key == Crafty.keys.UP_ARROW) {
      this.y = this.y - 1;
    } else if (e.key == Crafty.keys.DOWN_ARROW) {
      this.y = this.y + 1;
    }
  });