KineticJS move shape

Question

I'm new to kineticjs and I'm trying to make a circle shape move on player input. The alerts on the event listener are firing, but the circle is not moving. Help ?

Here's the code:

   (function () {
        var stage = new Kinetic.Stage({
            container: "the-container",
            width: 800,
            height: 600,
        });
        var layer = new Kinetic.Layer();

        var playerCircle = new Kinetic.Circle({
            x: 50,
            y: 50,
            radius: 10,
            fill: "black",
        });

        var leftArrowCode = 37;
        var rightArrowCode = 39;
        var upArrowCode = 38;
        var downArrowCode = 40;

        document.addEventListener('keydown', function (event) {
            if (event.keyCode == leftArrowCode) {
                playerCircle.move({ x: -10, y: 0 });
                alert("left pressed");
            }
            if (event.keyCode == rightArrowCode) {
                playerCircle.move({ x: 10, y: 0 });
                alert("right pressed");
            }
            if (event.keyCode == upArrowCode) {
                playerCircle.move({ x: 0, y: -10 });
            }
            if (event.keyCode == downArrowCode) {
                playerCircle.move({ x: 0, y: 10 });
            }
        });

        layer.add(playerCircle);
        stage.add(layer);
    }());

Answer 1

You will need to redraw the circle(notice the stuff I added at the end of the event listener. Maybe try to use transitionTo(), or add a delay to make it smoother.

    document.addEventListener('keydown', function (event) {
    if (event.keyCode == leftArrowCode) {
    playerCircle.move({ x: -10, y: 0 });
    alert("left pressed");
    }
    if (event.keyCode == rightArrowCode) {
        playerCircle.move({ x: 10, y: 0 });
        alert("right pressed");
    }
    if (event.keyCode == upArrowCode) {
        playerCircle.move({ x: 0, y: -10 });
    }
    if (event.keyCode == downArrowCode) {
        playerCircle.move({ x: 0, y: 10 });
    }
    layer.add(playerCircle);
    stage.add(layer);
    return stage;
});