Game Design with Crafty.js – Part 7

Custom Keys

Let’s learn to do some more things with our Keyboard!

So far all we can do is move the characters with the Keyboard. Let’s create some custom behaviors using the Keyboard.

Crafty.e('2D, DOM, Color, Fourway, Collision, , Gravity, SubZero')
.gravity('Floor')
.attr({x: 250, y: 300, w: 40, h: 99})
.fourway(3)
.bind('KeyDown', function(e) {
if(e.key == Crafty.keys.E) {
this.sprite(410,439, 70, 99);
}
})
.bind('KeyUp', function(e) {
//Change back to the default sprite
this.sprite(410,6, 40, 99);
})
.collision();

Use this pen to get Started.

Pick your own Sprites

Let’s change the character in the game to be whatever you’d like!

  • Find a Sprite Sheet using Google Images.
  • Save the Sprite Sheet to your computer.
  • Open the Sprite Sheet in SpriteCow.com to find the Sprite coordinates.
SpriteCow can help you find the XY coords for each sprite in a sprite sheet.

SpriteCow can help you find the XY coords for each sprite in a sprite sheet.

sprites-codepen

Add the coordinates from SpriteCow into your code.