Keyboard 使用键盘移动kineticJS形状

我想用键盘箭头移动一些形状。我读过一些教程，但到目前为止似乎没有任何帮助。我想问题在于我是如何处理键盘事件的，所以请看一看

<div id="fullscreenDiv"/>

<script defer="defer">
    var stage = new Kinetic.Stage({
        container: 'fullscreenDiv',
        width: 1180,
        height: 700
    });

    var layer = new Kinetic.Layer();

    var gamepart = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: 1180,
        height: 500,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4
    });

    var statuspart = new Kinetic.Rect({
        x: 0,
        y: 500,
        width: 1180,
        height: 100,
        fill: 'blue',
        stroke: 'black',
        strokeWidth: 4
    });

    var box1 = new Kinetic.Rect({
        x: 100,
        y: 225,
        width: 130,
        height: 90,
        fill: 'white',
        stroke: 'black',
        strokeWidth: 3
    });

    var box2 = new Kinetic.Rect({
        x: 400,
        y: 225,
        width: 130,
        height: 90,
        fill: 'white',
        stroke: 'black',
        strokeWidth: 3
    });

    var line12 = new Kinetic.Line({
        points: [230, 270, 400, 270],
        stroke: 'black',
        strokeWidth: 3
    });

    var box3 = new Kinetic.Rect({
        x: 1400,
        y: 225,
        width: 130,
        height: 90,
        fill: 'white',
        stroke: 'black',
        strokeWidth: 3
    });

    var line23 = new Kinetic.Line({
        points: [530, 270, 1400, 270],
        stroke: 'black',
        strokeWidth: 3
    });

    // add the shape to the layer
    layer.add(gamepart);
    layer.add(statuspart);
    layer.add(box1);
    layer.add(box2);
    layer.add(line12);
    layer.add(box3);
    layer.add(line23);

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

    layer.draw();


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

        stage.draw();
    });


</script>

var阶段=新的动力学阶段({
容器：“fullscreenDiv”，
宽度：1180，
身高：700
});
var layer=新的动能层（）；
var gamepart=new dynamic.Rect({
x:0,，
y:0，
宽度：1180，
身高：500，
填充：“红色”，
笔画：“黑色”，
冲程宽度：4
});
var statuspart=new dynamic.Rect({
x:0,，
y:500，
宽度：1180，
身高：100，
填充：“蓝色”，
笔画：“黑色”，
冲程宽度：4
});
var box1=新的动能.Rect({
x:100，
y:225，
宽度：130，
身高：90，
填充：“白色”，
笔画：“黑色”，
冲程宽度：3
});
var box2=新的动能.Rect({
x:400，
y:225，
宽度：130，
身高：90，
填充：“白色”，
笔画：“黑色”，
冲程宽度：3
});
var line12=新的动能线({
分数：[230270400270]，
笔画：“黑色”，
冲程宽度：3
});
var box3=新的动能.Rect({
x:1400，
y:225，
宽度：130，
身高：90，
填充：“白色”，
笔画：“黑色”，
冲程宽度：3
});
var line23=新的动能线({
积分：[530、270、1400、270]，
笔画：“黑色”，
冲程宽度：3
});
//将形状添加到层中
层。添加（游戏部件）；
图层添加（状态部分）；
添加图层（框1）；
添加图层（第2框）；
图层。添加（第12行）；
添加图层（第3框）；
图层。添加（第23行）；
//将层添加到舞台
阶段。添加（层）；
layer.draw（）；
window.addEventListener（'keydown'，函数（e）{
if（e.keyCode==37）//左箭头键
框1.属性x-=10；
if（e.keyCode==38）//向上箭头键
框1.属性y+=10；
if（e.keyCode==39）//右箭头键
box1.x+=10；
if（e.keyCode==40）//顶部箭头键
框1.attributes.x-=10；
stage.draw（）；
});

编辑

这是网页的图片，我想移动里面是白色的矩形

---

你非常接近。只需使用其他API更改属性：

    if (e.keyCode == 37) //Left Arrow Key
        box1.x(box1.x() - 10);
    if (e.keyCode == 38) //Up Arrow Key
        box1.y(box1.y() + 10);
    if (e.keyCode == 39) //Right Arrow Key
        box1.x(box1.x() + 10);

---

棒 极 了移动多个形状的最佳方式是什么？让我们说每一个白盒子和它们之间的线条？我知道我可以对每个形状使用这种方法，但是我可以做一些分组并移动它吗，或者我应该做一个具有每个形状的函数吗？将来任何人都可以参考，即使用上面的代码