markdown 地图オブジェクトを使ったもぐらたたき

Posted 2021-05-06

function makeMoles(nx, ny) {
  const molesState = new Map();
  const W = 50, SPACE = 10;

  for (let i = 0; i < nx; i++) {
    for (let j = 0; j < ny; j++) {
      const element = document.createElement('div');
      element.style.width = `${W}px`;
      element.style.height = `${W}px`;
      element.style.background = 'black';
      element.style.position = 'absolute';
      element.style.opacity = 0.2;
      element.style.transition = 'transform 0.5s ease-in-out, opacity 0.5s ease';
      document.body.appendChild(element);
      element.style.left = SPACE + i * (W + SPACE) + 'px';
      element.style.top = 2 * SPACE + j * (W + SPACE) + 'px';
      molesState.set(element, { x: i, y: j, opacity: 0.2 });
      element.onclick = function clickEventHandler(e) {
        const element = e.currentTarget;
        const state = molesState.get(element);
        if (state.opacity >= 0.5) {
          document.body.removeChild(element);
          molesState.delete(element);
        }
      };
    }
  }
  return molesState;
}

window.onload = function () {
  const TIME_INTERVAL = 1500, DISPLAY_TIME = 1050;
  const molesState = makeMoles(7, 4);
  const timer = setInterval(function appearMole() {
    if (molesState.size == 0) {
      clearInterval(timer);
      document.body.innerHTML = 'game over';
      return;
    }
    const n = Math.floor(Math.random() * molesState.size);
    const elements = molesState.keys();
    let count = 0;
    for (var element of elements) {
      if (count++ == n) break;
    }
    const state = molesState.get(element);
    element.style.opacity = 1;
    state.opacity = 1;
    element.style.transform = 'translateY(-10px)';
    setTimeout(function hideMole() {
      element.style.opacity = 0.2;
      state.opacity = 0.2;
      element.style.transform = 'translateY(0)';
    }, DISPLAY_TIME);
  }, TIME_INTERVAL);
};

Mapオブジェクトを使ったもぐらたたき
-------------------


A [Pen](https://codepen.io/taquaki/pen/NwzYve) by [Takaaki Sato](https://codepen.io/taquaki) on [CodePen](https://codepen.io).

[License](https://codepen.io/taquaki/pen/NwzYve/license).