kornerr
/
MMMemory

<!DOCTYPE html>
<html>
  <head>
    <title>Память | Memory</title>
  </head>
  <body>
  </body>
  <script>
    function memorySide() {
      return 50
    }

    function memorySpace() {
      return 20
    }

    function memoryGap() {
      return memorySide() + memorySpace()
    }

    function memoryItemPositions(M) {
      var pos = [];
      for (var i = 0; i < M.itemsCount; i++) {
        let row = Math.floor(i / 4)
        let x = memoryGap() + (i - row * 4) * memoryGap()
        let y = memoryGap() + row * memoryGap()
        pos.push([x, y])
      }
      return pos
    }
  </script>
  <script>
    var items = []

    // Section16Buttons.
    for (var i = 0; i < 16; i++) {
      let item = document.createElement("div")
      document.body.appendChild(item)
      items.push(item)
      item.id = `${i}`
    }

    // SectionGrid.
    var M = {
      itemsCount: items.length
    };
    let positions = memoryItemPositions(M);
    for (var id in positions) {
      var p = positions[id]
      var item = items[id];
      item.style.left = `${p[0]}px`
      item.style.top = `${p[1]}px`
      item.style.width = `${memorySide()}px`
      item.style.height = `${memorySide()}px`
      item.style.position = "absolute"
      item.style.background = "blue"
    }

    // SectionSelection.
    for (let id in items) {
      var item = items[id]
      item.onclick = function() {
        console.log("ИГР select id:", id)
      }
    }
  </script>
</html>