像这样

null

console.clear()
{
// Make own object with many smilies
  const smilies = {};
  smilies.smile1 = [
      [0, 4],[0, 5],[0, 6],[0, 7],
      [1, 2],[1, 3],[1, 8],[1, 9],
      [2, 1],[2, 10],
      [3, 1],[3, 10],
      [4, 0],[4, 4],[4, 7],[4, 11],
      [5, 0],[5, 4],[5, 7],[5, 11],
      [6, 0],[6, 11],
      [7, 0],[7, 3],[7, 8],[7, 11],
      [8, 1],[8, 4],[8, 5],[8, 6],[8, 7],[8, 10],    
      [9, 1],[9, 10],
      [10, 2],[10, 3],[10, 8],[10, 9],    
      [11, 4],[11, 5],[11, 6],[11, 7]
  ];

  smilies.smile2 = [
      [0, 4],[0, 5],[0, 6],[0, 7],
      [1, 2],[1, 3],[1, 8],[1, 9],
      [2, 1],[2, 10],
      [3, 1],[3, 10],
      [4, 0],[4, 3],[4, 4],[4, 6],[4, 7],[4, 11],
      [5, 0],[5, 4],[5, 7],[5, 11],
      [6, 0],[6, 11],
      [7, 0],[7, 8],[7, 11],
      [8, 1],[8, 3],[8, 4],[8, 5],[8, 6],[8, 7],[8, 10],    
      [9, 1],[9, 10],
      [10, 2],[10, 3],[10, 8],[10, 9],    
      [11, 4],[11, 5],[11, 6],[11, 7]
  ];
  
  var menu = document.getElementById("container");

  for (var i = 0; i < 144; i++) {
    var cell = document.createElement("div");

    menu.appendChild(cell);
  }

  var smi1 = document.getElementById("select");

  smi1.addEventListener("change", myFunction);

  function myFunction(e) {
    var x = document.getElementById("container").querySelectorAll("div");
    
    
    // get the smily from the selected value
    var smilie = smilies[e.target.value];
    // clean the grid
    for (var i = 0; i < 144; i++) {
      x[i].style.backgroundColor = 'transparent'
    }
    for (var i = 0; i < smilie.length; i++) {
      // HTML elements are in sequence, not in a grid. To calculate the grid item wo choose you have to 
      // multiplicate the row number by 12, because there are 12 items per row and add the column number
      x[smilie[i][0] * 12 + smilie[i][1]].style.backgroundColor = "yellow";
    }
  }
}

body {
  padding: 30px;
}

.black {
  background-color: black;
}

.blue {
  background-color: blue;
}

.yellow {
  background-color: yellow;
}

.white {
  background-color: white;
}

section#container {
  display: grid;
  grid-template-columns: repeat(12, 30px);
  grid-template-rows: repeat(12, 30px);
}

div {
  border: 1px solid black;
}

<section>
  <h1>Select the pixelated image you want to see
    <form>
      <select name="image" id="select">
        <option value='' readonly>Select one option</option>
        <option value='smile1'>Smiley 1</option>
        <option value='smile2'>Smiley 2</option>
      </select>
    </form>
  </h1>
</section>
<section id="container">

</section>