键盘
Crafty 提供了简单的组件让你非常容易的通过键盘控制游戏角色:
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;
}
});