コインを当てるゲームを作成する

はじめに

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

👀 プレビュー

🎯 タスク

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

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

🏆 成果

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

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

Skills Graph

プロジェクト構造をセットアップする

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

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

├── 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関数を実装します。

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

2. 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;
   }

3. findNum関数はinput_valuesパラメータを受け取り、入力値に含まれる一意の数字（1 - 9）の配列を返します。

4. 以下の手順に従ってfindNum関数を実装します。

   • 正規表現/\d/gを使用して、input_values文字列内のすべての数字を見つけます。
   • 一意の数字を格納するための空のuniqueNumbers配列を作成します。
   • 一致した数字をループして、parseIntを使用して整数に変換します。
   • 解析された数字が有効な数字（NaNではない）で、uniqueNumbers配列にまだ含まれていないことを確認します。
   • 数字が有効で一意の場合、それをuniqueNumbers配列に追加します。
   • uniqueNumbers配列を返します。

randomCoin関数を実装する

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

1. 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;
   };

2. randomCoin関数は、1から9までの3つの重複しない乱数の配列を生成する必要があります。

3. 以下の手順に従ってrandomCoin関数を実装します。

   • 乱数を格納するための空のrandomNumArr配列を作成します。
   • whileループを使用して、1から9までの3つの一意の乱数を生成します。
   • ループ内で、Math.floor(Math.random() * 9) + 1を使用して乱数を生成します。
   • 生成された数字がrandomNumArr配列にまだ含まれていないことを確認します。
   • 数字が一意の場合、それをrandomNumArr配列に追加します。
   • randomNumArr配列に3つの一意の数字があるとき、配列を返します。

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

まとめ

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