Move kineticJS shape with keyboard - keyboard

Question

I want to move some shapes with the keyboard arrows. I've read some tutorials, but nothing have seemed to help me so far. I think the problem is how I've handled the keyboard event, so please take a look.
<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>
Edit
This is picture of the webpage, and I want to move the rectandgles with that's white inside.

Answer 1

You are very close. Just use other API to change attributes:
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);