Numble Challenge他の色のゲームを探しています

しゅろんり
コードは長いように見えますが、interval timerを生成する一部です.
status stateから時間値を減算し、論理フローを開始します.

  const [ status, setStatus ] = useState<StatusType>({ stage: 1, grade: 0, time: 15 });
  const interval = useRef<ReturnType<typeof setInterval>>();
  useEffect(() => {
    interval.current = setInterval(() => {
      setStatus((status) => ({ ...status, time : status.time - 1}));
    }, 1000);
    return () => {
      if(interval.current) clearInterval(interval.current);
    };
  }, []);

各ボックスについて、支柱として次のタイプを受け取り、色の値で色を表示します.
クリックすると、コンテナで受信した関数を実行し、自分のインデックスとターゲットインデックスを送信して確認します.

interface BoxType {
  targetIndex: Number
  baseColor: String,
  pointColor: String,
}

正解:next stage、反映点数、timer初期化
現在の残り時間-3
スコアを調整するたびに、色とターゲットをランダムに抽出してbox array値をリフレッシュします.

  useEffect(() => {
    const newBoxes:BoxesType = [];
    const total = Math.pow(Math.round((status.stage + 0.5) / 2) + 1, 2); //박스 개수
    const targetIndex = Math.floor(Math.random() * total); //정답일 index
    const { baseColor, pointColor } = getColorData(status.stage); //랜덤 색상
    for(let i = 0; i < total; i++){
      newBoxes.push({
        targetIndex,
        baseColor,
        pointColor,
      });
    }
    setBoxes(newBoxes);
  }, [status.stage]);

ゲーム終了時には、stateの時間値を監視し、その値を比較してゲーム終了を確認します.

  useEffect(() => {
    if(status.time <= 0) {
      setStatus({
        stage: 1,
        grade: 0,
        time: 15,
      });
      window.alert(`Game Over! \nGrade : ${status.grade}`);
    }    
  }, [status.time, status.grade]);

悩ましいところ
1.スクリーンの箱はどのように置くか
初めて見たとき、2次元配列を作って画面に表示しないでほしいと思っていました.
アレイハンドルは制御しにくくなり、アレイを作成するための2つのドアが好きではありません.
結論:css display:grid処理
css display:gridを使用してボックスのラベルをラップし、gridTemplateColumnsの値を使用して処理します.
2.正解と正解の違いを段階的に縮め、難易度を上げる
最終的に、stageが高いほど、正解とエラーの色コード値を抽出するようなコードが必要になります.
だから私が考えているのは、元のRGBの数値を少し変えてみましょう.
色を変えるとき、R、G、Bのどちらの色を変えるか分からないが、ランダムに抽出した色によっては、あまりにも明らかなのか、ほとんど差がないのか、往復移動するのか、逆に一歩進みやすい場合がある.
結論:RGBAでalpha値を調整
ステップの増加に伴って増加するalpha値(最大値:1)を求めると、色は近いが、難易度は適当であることが分かった.