带Keydown的KineticJS形状运动

Question

I have made a shape that I move with the help of arrow keys (keydown event) using transitionTo from KineticJS.

I have 2 problems:

1. After pressing the key the movement of the shape has a short delay. How do I remove the delay?

2. How do I make the shape move diagonally with two arrow keys pressed at the same time?Here is the javascript:

var stage = new Kinetic.Stage({
    container: 'container',
    width: screen.width,
    height: 500
});
var layer = new Kinetic.Layer();

var circle = new Kinetic.Circle({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    radius: 70,
    fill: 'yellow',
    stroke: 'black',
    strokeWidth: 4
});

// add the shape to the layer
layer.add(circle);

// add the layer to the stage
stage.add(layer);

window.addEventListener('keydown', function(e) {
    if (e.keyCode == 37) { //Left Arrow Key
        setTimeout(function () {
            circle.transitionTo({
                x: circle.getX() - 10,
                y: circle.getY(),
                duration: 0.01
            })
        }, 0);
    }
    if (e.keyCode == 38) { //Up Arrow Key
        setTimeout(function () {
            circle.transitionTo({
                x: circle.getX(),
                y: circle.getY() - 10,
                duration: 0.01
            })
        }, 0);
    }
    if (e.keyCode == 39) { //Right Arrow Key
        setTimeout(function () {
            circle.transitionTo({
                x: circle.getX() + 10,
                y: circle.getY(),
                duration: 0.01
            })
        }, 0);
    }
    if (e.keyCode == 40) { //Top Arrow Key
        setTimeout(function () {
            circle.transitionTo({
                x: circle.getX(),
                y: circle.getY() + 10,
                duration: 0.01
            })
        }, 0);
    }
});

Fiddle: http://jsfiddle.net/uUWmC/1/

Answer 1

For the delay, you can unwrap setTimeout and transitionTo like the following;

window.addEventListener('keydown', function(e) {
    if (e.keyCode == 37) //Left Arrow Key
        circle.attrs.x -= 10;
    if (e.keyCode == 38) //Up Arrow Key
        circle.attrs.y += 10;
    if (e.keyCode == 39) //Right Arrow Key
        circle.attrs.x += 10;
    if (e.keyCode == 40) //Top Arrow Key
        circle.attrs.y -= 10;
    layer.draw();
});

For the diagonal move, you cannot press two arrow keys at the same time. This is your operating system limit. You can press it with alt key, ctrl key ... etc though.

Answer 2

The best way to detect diagonal movement to keep track of which keys have been pressed/released. I use a jQuery addon called "key_status.js" which allows you to check any key's status with something like:

if (keydown.left) {
  console.log("left arrow is down")
}
if (keydown.left && keydown.up) {
  console.log("Left/Up Diagonal!")
}

Of course to do something like this you will need to wrap all the input checking in a setTimeout or requestAnimFrame.

I discovered this script and method at the excellent html5 game tutorial here: http://www.html5rocks.com/en/tutorials/canvas/notearsgame/

Direct Link To script: ( http://strd6.com/space_demo/javascripts/key_status.js )

Answer 3

There are libraries that can help you identify key combinations. Check out:

• http://dmauro.github.io/Keypress/
• http://robertwhurst.github.io/KeyboardJS/