title: Move kineticJS shape with keyboard
body: <p>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.</p>
  
  <pre><code>&lt;div id="fullscreenDiv"/&gt;
  
  &lt;script defer="defer"&gt;
      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();
      });
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>Edit</strong></p>
  
  <p>This is picture of the webpage, and I want to move the rectandgles with that's white inside.</p>
  
  <p><img src="https://i.stack.imgur.com/KpAIf.png" alt="enter image description here"></p>