パネルに表示された数字を順番に押す動作をさせたい

Question

実現したいこと

数字タッチゲームをつくっています。数字を小さい順に押せるようにしたいです。

前提

ドットインストールで紹介されている数字タッチゲームを自分なりの方法で作ってみましたが、『数字を小さい順番に押す』という部分でつまづきました。

該当のソースコード

<div id ="container">
    <div id="timer">0.0</div>
    <ul id="board">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div id="btn">スタート</div>
  </div>

body {
  background: #ccc;
  color: #fff;
  font-family: 'Courier New', sans-serif;
  font-size: 16px;
  font-weight: bold;
}

#container {
  /* 50px * 2 + 10px * 2 */
  width: 120px;
  margin: 16px auto;
}

#board {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 8px;
  padding: 10px;
  background: #fff;
  border-radius: 4px;
}

#board li {
  background: #00aaff;
  width: 40px;
  height: 40px;
  margin: 5px;
  cursor: pointer;
  border-radius: 4px;
  line-height: 40px;
  text-align: center;
  box-shadow: 0 4px 0 #0088cc;
}

#board li.pressed{
  background: #ccc;
  box-shadow: none;
  margin-top: 9px;
  margin-bottom: 1px;
}


#timer {
  margin-bottom: 8px;
  font-size: 20px;
  text-align: right;
}

#btn {
  cursor: pointer;
  user-select: none;
  background: #f44336;
  padding: 8px;
  border-radius: 4px;
  text-align: center;
  box-shadow: 0 4px 0 #d1483e;
}

#btn:active {
  margin-top: 12px;
  box-shadow: none;
}

  const btn = document.querySelector("#btn");
  const lists = [...document.querySelectorAll("li")];

  // スタート押す前は数字を表示しない動作
  lists.forEach((li) => {
    li.classList.add("pressed");
  });


  // スタートボタンを押した時の動作(ランダムな数字をパネルに表示)
  btn.addEventListener("click", () => {
    const number = [0, 1, 2, 3];
    const liNumber = [];
    for (let i = 0; i < 4; i++) {
      liNumber[i] = number.splice(Math.floor(Math.random() * number.length), 1)[0];
    }
    lists[0].textContent = liNumber[0];
    lists[1].textContent = liNumber[1];
    lists[2].textContent = liNumber[2];
    lists[3].textContent = liNumber[3];


    lists.forEach((li) => {
      li.classList.remove("pressed");
    });


    // 数字を小さい順に押す動作(ここがわかりません)
    lists.forEach((li) => {
      li.addEventListener("click", () => {
        li.classList.add("pressed");
      });
    });
  });

試したこと

クリックする度に増える変数を宣言してみたり、ifの条件式を考えてみましたが、どう書けばうまく動作するのかわかりませんでした、、、

↓追記

let count = 0 ;
lists.forEach((li) => {
li.addEventListener("click", () => {
li[count].classList.add("pressed");
count++;
});
});

Comments

[int32_t]

小さい順ではない順番でliがクリックされたらどうなって欲しいですか?
例: 最初に最大値の数値のliをクリック

[inoyu]

コメントありがとうございます。
小さい順でなければclickできない(pressedのクラスがつかない)ようにしたいです。

Answer 1

ざっくりこんな感じで

<style>
.pressed{
  background-Color:gray;
}
.disabled{
  color:lightgray;
}
</style>
<script>
window.addEventListener('DOMContentLoaded', ()=>{
  const max=100;
  let timerId;
  let d;
  const boardLI=board.querySelectorAll('li');
  document.addEventListener('click',({target})=>{
    if(target.matches('#btn:not(.disabled)')){
      const list=Array(max).fill(null).map((_,x)=>[x,Math.random()]).sort((x,y)=>x[1]-y[1]).map(x=>x[0]).splice(0,boardLI.length);
      boardLI.forEach((x,y)=>{x.textContent=list[y];x.classList.remove('pressed')});
      btn.classList.add('disabled');
      d=new Date();
      timerId=setInterval(()=>{
        timer.textContent=parseInt((new Date()-d)/100)/10;
      },100);
    }
    if(
      target.matches('#board li') &&
      Math.min(...[...board.querySelectorAll('li:not(.pressed)')].map(x=>Number(x.textContent)))==target.textContent
      ){
      target.classList.add('pressed');
    }
    if(board.querySelectorAll('li:not(.pressed)').length==0){
      clearInterval(timerId);
      btn.classList.remove('disabled');
    }
  });
});
</script>
<div id ="container">
    <div id="timer">0.0</div>
    <ul id="board">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div id="btn">スタート</div>
  </div>

Comments

[inoyu]

回答ありがとうございます。
今の自分には理解が難しい内容もありますが、調べながら試したいと思います。

Answer 2

[...document.querySelectorAll('li:not(.pressed)')].map(li => Number(li.textContent)) を評価すると未選択の <li> のテキストを数値に直した配列が得られます。この配列をソートして最小の値を取り出して、クリックされた <li> のテキストを数値に直したものと比較して、一致したときだけ pressed クラスを足せば良いでしょう。

または、グローバルに [0, 1, 2, 3] を入れた変数を用意しておき、この最初の要素とクリックされた <li> の内容を比較して一致したら変数の先頭を削除する、でもいいですね。

追記:
もし質問文にあるような count の方法を採用するなら、「もし count と Number(li.textContent) が一致したなら、pressed クラスを追加して count++」という流れになります。
どの方法でも必ず if が必要になります。

Comments

[inoyu]

さっそくの回答ありがとうございます。
後ほどまた修正してみたいと思います。ありがとうございました。

[inoyu]

追記までありがとうございます。
初めてteratailをつかってみましたが、親切に教えていただいてくれる方がいて質問してみてよかったです。
追記分も後ほど試してみたいとおもいます。