title: Move element in a grid layout with arrow keys
body: <p>I'm in the process of creating a turn-based game. For the moment I have a 16*16 grid. I have an event listener for all four arrow keys. I have placed a circle in the first grid item.
  I want to move circle with arrow key one grid cell at a time.
  I can't get my head around how can I do this. I think I should have a variable that will keep track of the circle. But how to move it to another cell on key-down?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const container = document.querySelector(".grid");
  const gridNodes = document.querySelectorAll(".grid-item");
  const gridArray = Array.from(gridNodes);
  let circle = document.createElement("div");
  
  
  function makeGrid(rows, cols) {
    container.style.setProperty("--grid-rows", rows);
    container.style.setProperty("--grid-cols", cols);
    for (let c = 0; c &lt; rows * cols; c++) {
      let cell = document.createElement("div");
      container.appendChild(cell).className = "grid-item";
    }
  }
  const keys = {
    left: 37,
    up: 38,
    right: 39,
    down: 40
  };
  makeGrid(16, 16);
  circle.style.width = "20px";
  circle.style.height = "20px";
  circle.style.backgroundColor = "#000";
  let firstGridItem = document.querySelector(".grid-item");
  firstGridItem.appendChild(circle);
  function moveRight(e) {
    console.log(gridArray);
  }
  function handleKey(e) {
    switch (e.keyCode) {
      case keys.left:
        console.log("left ");
        break;
      case keys.up:
        console.log("up ");
        break;
  
      case keys.right:
        moveRight(e);
        break;
  
      case keys.down:
        console.log("down ");
        break;
    }
  }
  window.addEventListener("keydown", handleKey);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>:root {
    --grid-cols: 1;
    --grid-rows: 1;
  }
  
  .container {
    display: grid;
    grid-template-rows: repeat(var(--grid-rows), 1fr);
    grid-template-columns: repeat(var(--grid-cols), 1fr);
  }
  
  .grid-item {
    
    padding: 1em;
    border: 1px solid #ddd;
    text-align: center;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="UTF-8" /&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge" /&gt;
      &lt;title&gt;Turn Base Game&lt;/title&gt;
  
      &lt;link rel="stylesheet" href="bundle.css" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1 class="text-center text-white"&gt;Turn Based Board Game&lt;/h1&gt;
      &lt;main class="map"&gt;
        &lt;div class="container grid"&gt;&lt;/div&gt;
      &lt;/main&gt;
      &lt;script src="bundle.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>