Question

我是kineticjs的新手，我正试图在玩家输入上做一个圆形的动作。事件监听器上的警报正在触发，但是圆圈没有移动。救命？

以下是代码：

   (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

您需要重绘圆圈（注意我在事件监听器末尾添加的内容。也许尝试使用transitionTo（），或添加延迟以使其更顺畅。

    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;
});

KineticJS移动形状

1 个答案: