qBdzVYM

index.html

<div id="current"></div>
<div class="container"></div>

qbdzvym.markdown

qBdzVYM

A Pen by swkidd on CodePen.

License.

script.js

let curr = document.querySelector("#current")
let container = document.querySelector(".container")
let goal = ""
let elems = []
const t = ['会',
         '開',
         '兄',
         '姉',
         '新',
         '明',
         '赤',
         '朝',
         '案',
         '歩',
         '相',
         '秋',
         '足',
         '集',
         '雨',
         '青'] 

for (let i = 0; i < t.length; ++i) {
  const div = document.createElement("div")
  div.innerText = t[i]
  div.classList.add("elem")
  div.addEventListener("click", () => check(i))
  container.appendChild(div)
}
elems = document.querySelectorAll(".elem")

let rounds = 0
const reset = () => {
  for (let i = 0; i < Math.max(elems.length, t.length); ++i) {
    elems[i].innerText = t[i]
  }
  goal = ""
  curr.innerText = goal
  setTimeout(() => {
    for (let i = 0; i < Math.max(elems.length, t.length); ++i) {
      elems[i].innerText = " " 
    }
  }, 10000 * (1 - (rounds / 40)))
  goal = t[Math.floor(Math.random() * t.length)]
  curr.innerText = goal
}

const check = n => {
  if (t[n] === goal) {
    reset()
  }
}

reset()

style.css

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #ccc;
  overflow: auto;
}

#current {
  font-size: 2em;
  font-weight: bold;
}

.container {
  display: grid;
  grid-template-columns: repeat(4, 50px);
  grid-template-rows: repeat(4, 50px);
  grid-gap: 5px;
}

.elem {
  background-color: #3dd;
  font-weight: bold;
  text-align: center;
}