クリックナンバーゲームを実装するネイティブJS

参考までに、クリックナンバーゲームをネイティブJSで実装しました。具体的な内容は以下のとおりです。

最近、会社は四半期テストで非常に興味深いテスト問題を発行しました。これを実装するには、独自のブラックテクノロジーであるIVXを使用する必要があります。興味のある友人は、それについて学ぶことができます。これは本当にブラックテクノロジーです。ここでも、ネイティブJSを使用して実装します。質問は次のとおりです。

数字をクリックする小さなゲームを実装します。コンテナ内のランダムに生成されたデジタル要素を 1 つずつクリックします。生成されたデジタル要素は 5 秒後に消えます。レベルゲームをクリアするには、記憶力を使用して、生成された数字を昇順でクリックします。

では早速、ランニング効果の図を見てみましょう。

上記のコード:

<!DOCTYPE html>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="UTF-8" />
    <meta http-equiv="X-UA-compatible" content="IE=edge" />
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
    <title>数字ゲームをクリックしてください</title>
    <スタイル>
      #コインコンテナ{
        マージン: 自動;
        高さ: 600px;
        幅: 400ピクセル;
        背景色: rgb(37, 37, 37);
        位置: 相対的;
      }
      .ヘッダー{
        幅: 自動;
        テキスト配置: 中央;
        マージン: 自動;
      }
      .parm {
        高さ: 60px;
        幅: 60ピクセル;
        境界線の半径: 30px;
        位置: 絶対;
        テキスト配置: 中央;
        行の高さ: 60px;
      }
      .parm:ホバー{
        カーソル: ポインタ;
      }
      .todo {
        テキスト配置: 中央;
        上マージン: 16px;
      }
      ボタン {
        幅: 100ピクセル;
        高さ: 30px;
        背景色: コーラル;
        境界線: なし;
        アウトライン: なし;
      }
    </スタイル>
  </head>
  <本文>
    <div class="header">
      <h1>数字ゲームをクリックしてください</h1>
      <p>
        デジタルコンテンツは5秒後に消えます。記憶に基づいてデジタルポイントを昇順でクリックすることでレベルをクリアできます。</p>
    </div>
    <div id="コインテナー"></div>
    <div class="todo">
      <button onclick="restart(6)">再起動</button>
      <button style="margin-left: 20px" onclick="nextPass()">次のレベル</button>
      <ボタン
        スタイル="左マージン: 20px"
        onclick="window.clearInterval(timmer2);window.clearTimeout(timmer1)"
      >
        タイマーを停止</button>
      <p>時間</p>
    </div>
  </本文>
  <スクリプト>
    円リストを [] にします。
    //circle コンストラクタ関数 getPosition() {
      parm = { x: "", y: "" } とします。
      parm.x = Math.round(Math.random() * 340);
      parm.y = Math.round(Math.random() * 540);
      パラメータを返します。
    }
    //重なり合わない円を作成する
    関数createCircle(合計) {
      （circleList.length === 0）の場合{
        円リストをプッシュします(getPosition());
      }
      //作成数を200に制限する
      (i = 0; i < 200; i++ とします) {
        （circleList.length < 合計）の場合{
          円を getPosition() とします。
          距離を [] とします。
          (n = 0; n <circleList.length; n++) の場合 {
            ディス =
              Math.abs(circle.x - circleList[n].x) ** 2 +
              Math.abs(circle.y - circleList[n].y) ** 2;
            distan.push(dis);
          }
          (Math.min(...distan) > 3600) の場合 {
            円リストをプッシュします。
          }
        } それ以外 {
          壊す;
        }
      }
    }
    //8つの円を作成する
    サークルを作成します(8);
    //ランダムカラーセレクタ関数 selectColor() {
      r = 100 + Math.round(Math.random() * 155); とします。
      g = 100 + Math.round(Math.random() * 155) とします。
      b = 100 + Math.round(Math.random() * 155) とします。
      `rgb(${r},${g},${b})` を返します。
    }
    //DOMに円を作成する
    コンテナを document.getElementById("コンテナ");
    //レベルを構築する function creatGame(num) {
      サークルリスト = [];
      円を作成します(数値);
      (i = 0 とします; i <circleList.length; i++) {
        ノードを document.createElement("span"); にします。
        コンテナノードに子ノードを追加します。
        ノード.className = "parm";
        ノードの内側のテキストを i + 1 にします。
        node.style.left = circleList[i].x + "px";
        node.style.top = circleList[i].y + "px";
        ノードスタイルの背景色 = selectColor();
      }
    }
    //答えをクリックします let asw = [];
    //5秒後にゲームを開始するように設定する let start = function () {
      list = document.querySelectorAll("span"); とします。
      右に "" とします。
      (i = 0 とします; i < list.length; i++) {
        リスト[i].innerText = "";
        リスト[i].number = i + 1;
        右 = 右 + (i + 1);
        リスト[i].addEventListener(
          "クリック"、
          関数 （） {
            asw.push(リスト[i].number);
            if (asw.length === pass && asw.join("") === right) {
              ウィンドウのクリア間隔(timmer2);
              alert("おめでとうございます! あなたの時間は次のとおりです: " + time.toFixed(2) + "s");
              asw = [];
            } そうでない場合 (asw.length === pass && asw.join("") !== right) {
              asw = [];
              ウィンドウのクリア間隔(timmer2);
              alert("申し訳ありませんが、失敗しました");
            }
          },
          間違い
        );
      }
    };
    時間を0にします。
    sumTime = 関数（）{
      時間 = 時間 + 0.01;
      document.querySelectorAll("p")[1].innerText = time.toFixed(2) + "s";
    };
    //初期レベル let pass = 6;
    ゲームを作成します(pass);
    timmer1 = setTimeout(start, 5000); とします。
    timmer2 = setInterval(sumTime, 10); とします。
    // 関数を再起動 restart(nowerPass) {
      (コンテナ.hasChildNodes()) の間 {
        コンテナ内の最初の子を削除します。
      }
      パス = nowerPass;
      ゲームを作成します(nowerPass);
      タイムアウトをクリアします(timmer1);
      クリア間隔(timmer2);
      時間 = 0;
      timmer1 = setTimeout(開始、5000);
      timmer2 = setInterval(合計時間、10);
    }
    //次のレベルの関数 nextPass() {
      （合格<20）の場合{
        パス++;
        再起動(パス);
      }
    }
  </スクリプト>
</html>

これで、脳の論理を鍛える非常に興味深い小さなゲームのご紹介は終わりです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: