コインを当てるゲームを作成する | JavaScript プロジェクト

はじめに

このプロジェクトでは、簡単な「コインを当てる」ゲームを作成する方法を学びます。このゲームでは、9 つのコップの中からランダムに 3 つのコップを選んでコインを入れ、プレイヤーは対応する数字を入力して正しいコップを当てなければなりません。

👀 プレビュー

コインを当てるゲームのプレビュー

🎯 タスク

このプロジェクトでは、以下のことを学びます。

findNum関数を実装して、ユーザーの入力から一意の数字を抽出する。
randomCoin関数を実装して、1 から 9 までの 3 つの重複しない乱数を生成する。
プロジェクトのディレクトリ構造と提供されたファイルを理解する。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

JavaScript 関数と配列を扱う。
正規表現を使って文字列をから特定のデータを抽出する。
乱数を生成し、それが一意であることを確認する。
手順に従ってプロジェクトを完了する。

プロジェクト構造を設定する

このステップでは、プロジェクトファイルと構造をセットアップします。以下の手順に従ってこのステップを完了しましょう。

プロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── css
├── images
├── index.html
└── js
    ├── findCoin.js
    └── index.js

ここで：

cssはスタイルファイル用のフォルダです。
imagesは画像ファイル用のフォルダです。
index.htmlはメインページです。
js/index.jsはコインをレンダリングしてアニメーション化するための JavaScript ファイルです。
js/findCoin.jsは完成させる必要のある JavaScript ファイルです。

WebIDE の右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。

次に、VM の上部にある「Web 8080」を開き、手動で更新するとページが表示されます。

findNum 関数を実装する

このステップでは、js/findCoin.jsファイルにfindNum関数を実装します。

js/findCoin.jsファイルを開きます。

findNum関数を見つけます。

// 入力値 1 - 9 の配列を作成する
function findNum(input_values) {
  // TODO
  const reg = /\d/g;
  const uniqueNumbers = [];
  const nums = input_values.match(reg) || [];
  nums.forEach((num) => {
    const parsedNum = parseInt(num);
    if (!isNaN(parsedNum) && !uniqueNumbers.includes(parsedNum)) {
      uniqueNumbers.push(parsedNum);
    }
  });
  return uniqueNumbers;
}

findNum関数はinput_valuesパラメータを受け取り、入力値に含まれる一意の数字（1 - 9）の配列を返します。
以下の手順に従ってfindNum関数を実装します。
- 正規表現/\d/gを使用して、input_values文字列内のすべての数字を見つけます。
- 一意の数字を格納するための空のuniqueNumbers配列を作成します。
- 一致した数字をループして、parseIntを使用して整数に変換します。
- 解析された数字が有効な数字（NaN ではない）で、uniqueNumbers配列にまだ含まれていないことを確認します。
- 数字が有効で一意の場合、それをuniqueNumbers配列に追加します。
- uniqueNumbers配列を返します。

randomCoin 関数を実装する

このステップでは、js/findCoin.jsファイルにrandomCoin関数を実装します。

randomCoin関数を見つけます。

let randomCoin = () => {
  let randomNumArr = [];
  // TODO
  while (randomNumArr.length < 3) {
    const randomNumber = Math.floor(Math.random() * 9) + 1;
    if (!randomNumArr.includes(randomNumber)) {
      randomNumArr.push(randomNumber);
    }
  }
  return randomNumArr;
};

randomCoin関数は、1 から 9 までの 3 つの重複しない乱数の配列を生成する必要があります。
以下の手順に従ってrandomCoin関数を実装します。
- 乱数を格納するための空のrandomNumArr配列を作成します。
- whileループを使用して、1 から 9 までの 3 つの一意の乱数を生成します。
- ループ内で、Math.floor(Math.random() * 9) + 1を使用して乱数を生成します。
- 生成された数字がrandomNumArr配列にまだ含まれていないことを確認します。
- 数字が一意の場合、それをrandomNumArr配列に追加します。
- randomNumArr配列に 3 つの一意の数字があるとき、配列を返します。

これらの手順を完了した後、「コインを当てる」ゲームは完全に機能するはずです。すべての関数が完了した gif は以下の通りです。

完了時のエフェクト

まとめ

おめでとうございます！このプロジェクトを完了しました。あなたは実験技術を向上させるために LabEx でさらに多くの実験を行うことができます。