Scratchでビンゴの抽選プログラムを作ろう。(プロジェクトとして)

今回はScratchを使ってビンゴの抽選を行うプログラムを解説していきたいと思います。

 

塾で行うクリスマス会にプログラミング教室のデモンストレーション兼ねて作成したプログラムになります。依頼されて作成したプログラムであり、よい機会なので「クリスマス会で使うビンゴ抽選プログラムを作る」というプロジェクトとして考えて解説していきたいと思います。

 

このためプログラミング(コーディング)だけでなくプログラムを作る手順の一例として読んでいただければと思います。プログラミング部分の解説のみ読みたい方は飛ばしながら拾い読みしてください。

ビンゴの抽選プログラムを作ろう。

まずはじめに今回作成したプログラムがこちら

(1)緑の旗をクリックしてゲームスタート。

(2)ビンゴ機をクリックするごとに1枚カードをドローします。
2度目以降は前のカードを左側に過去のドロー結果を蓄積していきます(最大74枚)

 

▼注意点

※ビンゴカードは1〜75

※ドローは連続で行わず3秒以上あけてください。

※緑の旗をクリックでリセットできます。

 

プロジェクトスタート

では早速プロジェクトとしてスタートしていきたいと思います。

 

本格的なプログラムを作る場合、プログラミングを行う前に要件定義や設計書の作成を行います。一人一人が頭の中で考えたプログラムを書いてしまうと、うまく繋がらないことがあるからです。また一人で書くとしても何ヶ月もかけてプログラミングする場合、前半と後半では考え方が変わっている可能性があるため明確に定義(ルール決め)しておくのです。

 

ただし、今回のように小規模のプログラムかつ一人で作成するのに設計書作りからスタートしてしまうと時間がかかってしまうため、いくつか省略して以下の手順でプログラム作成を行っていきたいと思います。

 

  1. 要件の確認
  2. プログラムイメージ、画面イメージ
  3. 画像素材の用意
  4. コーディング
  5. テスト
  6. 完成

 

1人で作成するため資料は作成しませんでしたが、複数人で作成する場合は必ず資料として残しておきましょう。例えば、「要件の確認」なら箇条書きで良いので必要事項をまとめる、「プログラムの構想、イメージ」なら完成予想図の絵を描いて共有する、などです。また、今回は必要ありませんが大規模な(大人数)でのプログラミングになると変数の命名規則やコーディング規則なども決めておく必要があることを覚えておきましょう。

1.要件の確認

要件、つまり何を満たす必要があるか、必要条件を確認しましょう。

今回は「クリスマス会で使うビンゴ抽選プログラム」ということなので以下のような要件を満たす必要があります。この内容については依頼主としっかりと打ち合わせして認識に齟齬がないようにしておきましょう。

 

ここで決定したことは・・・

  • ビンゴカードは1〜75の数字
  • 1枚づつ引いていく
  • 引いたカードは後から確認できるようにする
  • クリスマスっぽい雰囲気

 

2.プログラムイメージ、画面イメージ

要件を満たすためにどのようにプログラムを組んでいくか具体的にイメージしていきましょう。

要件や環境、自分の得意・不得意などを総合的に考えてどのようなプログラム(システム)にしていくかを決めていきます。今回はScratchを利用するので検討することは少ないですが何も決まっていない場合はプログラミング言語やサーバー環境の決定、データベース設計や画面遷移図など基本設計(外部設計)と呼ばれる時間のかかるフェイズです。

 

ここで決定したことは・・・(一部)

  • Scratchを利用する
  • 画像はフリー素材を活用
  • ビンゴ抽選機とビンゴカードの2つのスプライト
  • ビンゴ機をクリックで抽選
  • ビンゴカードは40枚残す(41回引ける) ※テストで75回引けるに変更

 

コーディングで迷わないために、このフェーズで重要なことをしっかりと決めておきます。この段階で大きなミスをするとプログラミングの際にうまくいかなかったり、大きな欠陥(バグ)を埋め込むことになるため丁寧に考えてまとめていきます。

 

また設計の一部として完成した大まかな画面のイメージも決定しておきます。手書きでも良いですし、エクセルで書いても問題ないでしょう。以下は完成図に追記したものですがポイントを押さえて決めておきましょう。

 

3.画像素材の用意

プログラムを完成させる上で重要な画像素材を用意しましょう。

自分で絵を描くのが得意な場合は自分で描いても良いですし、スクラッチではあらかじめライブラリーに多くの画像が用意されています。またインターネットで検索してフリー素材を活用しても良いでしょう。

 

今回のプログラムを組むにあたっては以下のサイトよりフリー素材を活用させていただきました。

(1)ビンゴ機:イラストAC

(2)ビンゴカードの数字:無料イラスト素材集ほらぱれっと

 

フリー素材を利用する際にはクレジット表記が必要か、改変が可能か、商用利用が可能かなどを確認しておきましょう。条件付きで利用を許可している場合も多くありますのでどのような条件下で利用することができるか、目的を果たすために利用できるか確認しておきましょう。

 

4.コーディング

さて画像が準備できたらいよいよコーディング(プログラミング)の開始です。

 

4.1 Scratchプロジェクトの作成

まずはじめにScratchプロジェクトを作成します。

プロジェクトのタイトルは「ビンゴ抽選会」としました。スクラッチでのプロジェクトの作成方法がわからない方はこちらの記事をご確認ください。

 

プロジェクトの作成後、最初にいるスクラッチキャットは使用しないため削除しましょう。

 

4.2 背景を設定

次に背景を設定します。背景はスクラッチにあらかじめ用意されているライブラリーから「tree-gifts」を使用することとしました。

 

4.3 ビンゴ抽選機の読み込み

次にイラストACからダウンロードしたビンゴ抽選機をスクラッチに読み込む(アップロード)します。ビンゴ抽選機はスプライトにするため、「ファイルから新しいスプライトをアップロード」をクリックします。

 

スプライトを追加するとステージに表示されるため、画像サイズと位置を調整しましょう。今回は先ほどの画面イメージ通り、ビンゴの抽選機は右下に配置しましょう。

 

4.3 ビンゴカードの作成

先ほどダウンロードした画像を使ってビンゴカードを作っていきます。ビンゴカードの作成方法は”0〜9の数字を登録して都度生成する方法“と”1〜75の数字を登録する方法“が考えられますが今回はプログラムを簡単にするため”1〜75の数字を登録する方法“にします。

 

参考までにそれぞれの方法で「17を表示するプログラム」を組んでみると以下のようになります。(0〜9の数字を登録して都度生成する方法は今回使わないスクリプトのため、混乱しないようお気をつけください)

 

0〜9の数字を登録して都度生成する方法

0〜9の10個の数字を持ったスプライトを用意します。

 

0〜9桁の数字しか持っていない場合、2桁の数字が出た場合に自身のクローンを作成する必要がある。ただし、2桁の場合にだけクローンとすると後続のプログラムの分岐条件が複雑となるため、全ての場合にクローンにします。

 

2桁の場合、現在のビンゴカードを元に十の位は左に15、一の位は右に15の位置にクローンを作成します。まず十の位から作成するためX軸をー15、そこから一の位を作成するときはX軸を30の位置にしてクローンします。

 

以上で「0〜9の数字を登録して都度生成する方法」は完成となります。

この場合、今回は定数として「now = 17」としている部分を乱数にすることにより、二桁の数字を引いて画面に表示することができます。

 

表示するだけでプログラムが長い(複雑)であり、二桁の場合は2つのクローンで表示しているため、これらにモーションを入れたり表示する位置を変更するためのプログラムはさらに複雑になります。

 

1〜75の数字を登録する方法

次に1〜75の数字をスプライトに持たせた場合のプログラムを考えてみます。

 

まずは1〜75の75個の数字を持ったスプライトを用意します。

 

1〜75の数字を持っているため、ビンゴカードで引いた数のコスチュームに変更することにより、画面に表示することができます。ポイントはコスチューム番号と表示する数字が一致していることです。

 

ビンゴカードの番号(now)のコスチュームに変更するだけのため、上記のプログラムで完了します。こちらの場合でも過去の番号を残したりするためにクローンを使いますが、二桁の場合も1つのクローンのため、位置の変更をするプログラムなども容易になります。

 

画像の作成は時間がかかるがプログラムを簡易化できる。またクローンの移動なども容易であるため今回は「1〜75の数字を登録する方法」を使用する。

 

0〜9の数字を登録して都度生成する方法」を使用するのが適しているケースとしては、一度表示した数字を移動させない場合などが考えられる。またこの場合は”クローンではなくスタンプの機能を使う”方がよいでしょう。

 

ビンゴカードの位置はビンゴ抽選機の後ろに配置しています。

 

4.4 変数・リストの作成

スクリプトを組むために必要な変数とリストを作成しておきます。

今回は変数として「now」、「new」、「next」、「next_id」、(「add」)、リストとして「number」、「カードX」、「カードY」を使用します。それぞれの用途は以下の通り

 

▼変数

now・・・新しく引いたビンゴカードの数字

new・・・引いたカードが既に引いているか判断するフラグ。

next・・・引いたカード(クローン)を移動させるタイミングを管理するためのフラグ

next_id・・・引いたカードを過去のカードとして左に表示させるための位置を管理

(add)・・・座標管理用の「カードY」登録用。完成したら使わない。

 

▼リスト

number・・・過去に引いたビンゴカードの数字

カードX・・・過去のビンゴカードの移動場所管理(X軸)

カードY・・・過去のビンゴカードの移動場所管理(Y軸)

 

4.5 ビンゴ抽選機のスクリプト

変数とリストの準備ができたら、次にスクリプトを組んでいきます。

 

まずはスタートした時(緑のフラッグをクリックされたとき)の処理を記載します。

一番最初に実行されるスクリプトであるため、必要な変数の初期化処理を行います。ここでは変数”next_id“とリスト”number“を初期化しています。前述の通り、next_idは引いたカードの位置管理、numberは引いたカードを管理するのに使用しています。この初期化処理を行うことによって再実行できるようになります。

 

次にビンゴ抽選機がクリックされたときのスクリプトを組みます。ビンゴ抽選機はクリックしたら1〜75までの乱数を取得し、新しい数字であればビンゴカードのクローンを作成するよう命令する役目を担っています。

スプライト(ビンゴ抽選機)がクリックされたらスタートです。

まずは新規ビンゴカードを引くスクリプトが上記になります。新規のビンゴカードを引くということは①1〜75までの数字を引き、②そのカードが既出か確認、③既出の場合もう一度引き直す(①へ)という流れです。

 

①で引いたカードを変数”now”、新規カードか判定するためにフラグとして変数”new”と過去の数字全てを記録しているリスト”number”を利用します。numberにnowが含まれている場合はnewをrepeatにして引き直し、含まれていない場合はnewをokにしてメッセージdrowを発行して後続処理につなげます。後続処理も「でなければ」の中に記載することもできますが長くなってしまいます。メッセージを使って動作ごとに処理を分けることによって可読性を高めています。

 

メッセージ”drow”をクリックしたときの処理になります。変数”next“は引いたビンゴカードを画面左側の待機場所に移動させるタイミングを管理するフラグです。フラグをonにしたあと、ビンゴカードのクローンを作成して0.3秒後にoffに切り替えます。また先ほど初期化処理を行った変数”next_id“もこのタイミングでインクリメント(1ずつ変える)しておきます。

 

以上でビンゴ抽選機のスクリプトが完成です。

 

4.6 ビンゴカードのスクリプト

まずはスタート時の初期設定を行います。

ビンゴカードはクローンを利用するため、マスターとなるスプライトは非表示にしておきます。

 

次にクローンが作成されたときのスクリプトになります。このスクリプトはイメージとして2段階で構成されていると考えてください。

前半

クローンされた直後に実行されるのが赤い枠で囲った前半のスクリプトになります。まずコスチュームを変数”now“に変更します。変数”now”には引いたビンゴカードの数字が格納されており、「コスチュームを”now”にする」ことにより画像を引いたビンゴカードの数字にすることができます。その後、大きくしながら画面上(Y座標+)に45×0.01=0.45秒かけて移動します。そして、next=onになるまで待機します。

 

後半

後半はnext=onとなった時点で実行されるスクリプトになります。

next=onとなるのはカードを引いたタイミングですが、この後半が実行されるのは対象のカードを引いたタイミングではなく次のカードを引いたタイミングです。なぜなら、対象のカードを引いたタイミング(クローンが作成されたタイミング)でもnext=onとしていますが、その後0.3秒後にoffとなります。

(上記はビンゴ抽選機のスクリプト)

 

作成されたクローンは0.45秒かけて移動しており、0.3秒後にnext=offとなるため、必ず「next=onまで待つ」ブロックで待つことになるのです。そして、次のビンゴカードを引いたタイミングのnext=onで後半の処理が実行されます。

 

後半の処理は大きさを25%にして画面左側の待機場所に移動させるスクリプトです。移動させる位置はあらかじめX座標をリスト”カードX”、Y座標をリスト”カードY”に格納しておき、変数”next_id”を使用して取得しています。

 

4.7 事前データの格納

ビンゴ抽選機、ビンゴカードのスクリプトによって実行時のスクリプトは完成です。ただし、スクリプトを実行する前に登録しておかなければいけないデータとしてリスト”カードX”リスト”カードY”があります。

 

この2つのリストは引いたビンゴカードの置き場所を決定しています。全部で75枚、最後の1枚は移動させないため全部で74個の座標データをそれぞれ保持している必要があります。リストは以下のように保持しています。

 

リストのID(番号)がそれぞれ引いたカードの座標になります。例えば、1枚目のカードは(-220、160)、2枚目のカードは(-185、160)といったように74枚まで設定しておくことによって任意の場所にカードを移動させることができます。

このデータは1度作ったら実行時は書き換える必要はありません。このため、初期化処理などでリストを削除したりしないようにしてください。またどのスクリプトからもこの2つのリストを変更するようなブロックは使わないようにします。

 

1度登録したら変更することのないデータで74個しかないので1個ずつ登録しても良いですが、規則正しく並んでいる場合はスクリプトを組んで1度だけ実行する方が早い場合もあります。(実行後は誤作動を起こさないようにスクリプトは削除)

今回使用したスクリプトは上記です。

1〜70までは規則正しく並んでいるため繰り返し処理で登録していきます。最後の4枚はX座標の規則性がないため1個ずつブロックを並べています。Y座標は固定です。

 

5.テスト

プログラムが完成したらテストを行います。テストは最初に定義した要件をすべて満たしているかを確認していく作業です。また合わせて実際にやってみて他に不具合がないかも確認していきます。

 

▼確認すべき要件(最初に決めた要件)

  • ビンゴカードは1〜75の数字
  • 1枚づつ引いていく
  • 引いたカードは後から確認できるようにする
  • クリスマスっぽい雰囲気

 

6.完成

上記のテストで要件を満たしており、問題ない場合は依頼元(クライアント)に納品して完成になります。今回はスクラッチのため、URLを教えて終わりです。

 

実際にプロジェクトが完成するまでの流れを紹介しました。今回のケースにおける時間配分は以下のようになります。

 

  • 要件の確認:30分
  • プログラムイメージ、画面イメージ:20分
  • 画像素材の用意:1時間
  • コーディング:1時間
  • テスト:10分

 

プログラミングを始めたばかりの場合、まずは教材の通りに作って覚えていきます。今回のように題材(課題)が与えられて1からそれに挑戦するというのはそれに比べたら難しい内容になります。

しかし、教材の通りではなく自分で考えて作り上げていくというのは思考を鍛えるのによく、また自由度が高いため楽しい、やりがいを感じる面も多くあります。是非機会があれば躊躇せずチャレンジしてみましょう。