菅野さんのイベントで間違い探しゲームを作ったので アウトプットも兼ねて、コードと画像を載せます。

コード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="<https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js>" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <title>間違い探しゲーム</title>
    <style>
      span {
        cursor: pointer;
      }
      body {
        text-align: center;
        font-size: 30px;
      }
      #btn {
        cursor: pointer;
        height: 50px;
        width: 50px;
      }
    </style>
  </head>
  <body>
    <h1>間違い探しゲーム(3問)</h1>
    <p><input id="btn" type="button" value="開始" onclick="gameStart();"></p>
    <p id="score"></p>
    <div id="cells"></div>
    <script>
      // ゲームのレベル
      let level = 0;
      // ゲームで利用する漢字の配列(レベル順)
      let games = [
        ['白', '臼'],
        ['徴', '微'],
        ['委', '季']
      ];
      // ゲームの最高レベル
      const MAX_LEVEL = games.length - 1;
      // 初期の縦横の幅(個数)
      const DIM_FIRST = 6;
      // レベルアップごとに増える縦横の幅(個数)
      const DIM_PLUS = 2;
      // 実際の縦横の幅(個数)
      let dimension = DIM_FIRST;
      // ゲームの処理
      function gameStart(){
        // ダミーの漢字と正解の漢字を設定
        let dummy = games[level][0];
        let seikai = games[level][1];

        // 初期スタート時の設定
        if (level == 0){
          // スコア表示を空にする
          $('#score').empty();
          // 開始時間をセット
          start_time = new Date().getTime();
        }

        //dimension * dimensionのspan要素を#cellsに入れる
        let cells = '';
        for (let i = 1; i <= dimension * dimension; i++){
          cells += '<span id="s' + i + '"></span>';
          if(i % dimension == 0){
            cells += '<br />';
          }
        }
        // <div id="cells"></div>の要素に漢字が入る枠作成
        $('#cells').html(cells);

        // dummyで埋められた配列を作る
        let chars = [];
        for (let i = 1; i <= dimension * dimension; i++){
            chars.push(dummy);
          }
          // 配列のうち１つをseikaiにする
          let offset = Math.floor(Math.random() * chars.length)
          chars.splice(offset,1,seikai);

          // 漢字の箱の要素に漢字自体を入れ込む
          for(var i = 1; i <= chars.length; i++){
          $('#s'+i).text(chars[i - 1]);
          // 漢字をクリックした時の処理(正解の漢字をクリックした場合のみ)
          $('#s'+i).click(function(){
            // 正解の漢字をクリックした時の処理
            if($(this).text() == seikai){
              // レベルを上げる処理(漢字を次のセットに設定&縦横幅を増やす)
              level++;
              dimension += DIM_PLUS;
              // 全レベルクリアした後の処理
              if (level > MAX_LEVEL){
                // 終了時間のセット
                end_time = new Date().getTime();
                // 時間スコア表示
                $('#score').text(Math.round((end_time - start_time) / 1000) + '秒でクリアしました！');
                // 初期化
                level = 0;
                dimension = DIM_FIRST;
                return false;
              }
              // gameStart()の処理を再スタート
              gameStart();
            }
          });
        }
      }
    </script>
  </body>
</html>

画面(途中まで）

結果画面

参考

https://github.com/kerochelo/spot_the_kanji_differences