2.18 GAME - 白いタイルを踏まないで

多くの人が携帯電話でこのゲームをプレイしたことがあるでしょう。このゲームは、ランダムに現れる黒をタップしてポイントを追加し、スピードがどんどん速くなります。白いブロックをタップしたり、黒いブロックを逃したりするとゲームオーバーです。

今、PictoBloxを使ってこれを再現しましょう。

ブレッドボードに2つのIR障害物回避モジュールを縦に挿入します。手をIRモジュールの上に置くと、ステージ上に点滅する点が現れ、タップが行われたことを表します。

黒いブロックにタップするとスコアが1増え、白いブロックに触れるとスコアが1減ります。

ステージ上の黒いブロックの位置に応じて、左のIRモジュールの上に手を置くか、右のIRモジュールの上に手を置くかを決める必要があります。

../_images/21_tile.png

必要な部品

このプロジェクトには以下のコンポーネントが必要です。

全キットを購入することは確かに便利です。こちらがリンクです:

名前

このキットのアイテム

リンク

ESP32 Starter Kit

320+

ESP32 Starter Kit

また、以下のリンクから個別に購入することもできます。

コンポーネントの紹介

購入リンク

ESP32 WROOM 32E

BUY

ESP32カメラ拡張ボード

-

ブレッドボード

BUY

ジャンパーワイヤ

BUY

障害物回避モジュール

BUY

回路の構築

障害物回避モジュールは距離調整可能な赤外線近接センサーで、通常は出力が高く、障害物が検出されると低くなります。

以下の図に従って回路を構築してください。

../_images/19_tap_tile_bb.png

プログラミング

ここでは、 TileLeft IRRight IR の3つのスプライトが必要です。

  • Tile スプライト:黒と白のタイルが交互に下に移動する効果を実現するために使用され、携帯電話のこのゲームは一般的に4列ですが、ここでは2列だけを行います。

  • Left IR スプライト:クリック効果を実現するために使用され、左IRモジュールが手を感知すると、 left のメッセージを Left IR スプライトに送信し、動作を開始させます。ステージ上の黒いタイルに触れるとスコアが1増え、そうでない場合は1減ります。

  • Right IR スプライト:基本的な機能は Left IR と同じですが、 Right の情報を受け取ります。

1. タイルスプライトを描く

デフォルトのスプライトを削除し、 Add Sprite アイコンにマウスを移動し、 Paint を選択すると、空のスプライトが表示されますので、それを Tile と名付けます。

../_images/21_tile1.png

Costumes ページに移動し、 Rectangle ツールを使用して長方形を描きます。

../_images/21_tile2.png

長方形を選択し、 Copy -> Paste をクリックして同じ長方形を作り、2つの長方形をフラッシュ位置に移動します。

../_images/21_tile01.png

長方形の一つを選択し、塗りつぶしの色を黒に設定します。

../_images/21_tile02.png

次に、両方の長方形を選択し、キャンバスの中心に中心点が合うように移動します。

../_images/21_tile0.png

costume1を複製し、2つの長方形の塗りつぶしの色を交互にします。たとえば、costume1は左が白で右が黒、costume2は左が黒で右が白です。

../_images/21_tile3.png

2. タイルスプライトのスクリプト

Blocks ページに戻り、 Tile スプライトの初期位置を設定し、ステージの上部にありますようにします。

../_images/21_tile4.png

変数 - blocks を作成し、初期値を与えて Tile スプライトが現れる回数を決定します。[repeat until] ブロックを使用し、変数 blocks が0になるまで徐々に減少させます。この間、スプライト Tile にランダムにコスチュームを切り替えさせます。

緑の旗をクリックすると、ステージ上の Tile スプライトが素早くコスチュームを切り替えるのが見られます。

../_images/21_tile5.png

変数 blocks が減少している間、 Tile スプライトのクローンを作成し、blocksが0になったらスクリプトの実行を停止します。ここでは二つの [wait () seconds] ブロックを使用しています。一つ目は Tile のクローン間の間隔を制限し、二つ目はプログラムをすぐに停止せずに変数 blocksを0に減少させるためです。これにより、最後のタイルスプライトが動くのに十分な時間が与えられます。

../_images/21_tile6.png

今度は Tile スプライトのクローンがゆっくり下に移動し、ステージの底に到達したら削除するスクリプトを作ります。y座標の変化が落下速度に影響します。値が大きいほど落下速度が速くなります。

../_images/21_tile7.png

本体を隠し、クローンを表示します。

../_images/21_tile8.png

3. 2つのIRモジュールの値を読む

背景で2つのIRモジュールの値を読み、対応するアクションを行います。

  • 左のIR障害物回避モジュールが手を感知したら、メッセージ - left を送信します。

  • 左のIR回避モジュールが手を感知したら、メッセージ - right を送信します。

../_images/21_tile9.png

4. 左IRスプライト

再び、 Add sprite アイコンにマウスを移動し、 Paint を選択して Left IR という新しいスプライトを作成します。

../_images/21_tile10.png

Left IR スプライトの Costumes ページに移動し、塗りつぶしの色(黒と白以外の任意の色)を選択し、円を描きます。

../_images/21_tile11.png

今、 Left IR スプライトのスクリプトを開始します。メッセージ - left が受け取られたとき(左のIR受信モジュールが障害物を検出)、 Tile スプライトの黒いブロックに触れているかを判断し、もし触れていたら変数 count に1を加え、そうでなければ1を減らします。

../_images/21_tile12.png

注釈

Tile スプライトがステージ上に現れるようにし、その後で Tile スプライトの黒いブロックの色を吸収する必要があります。

../_images/21_tile13.png

今度は Left IR に感知効果(ズームインとアウト)を行いましょう。

../_images/21_tile14.png

緑の旗がクリックされたら Left IR スプライトを隠し、メッセージ - left が受け取られたら表示し、最後に再び隠します。

../_images/21_tile15.png

5. 右IRスプライト

Left IR スプライトをコピーし、 Right IR に名前を変更します。

../_images/21_tile16.png

そして、受信するメッセージを - right に変更します。

../_images/21_tile17.png

これで全てのスクリプトが終わり、緑の旗をクリックしてスクリプトを実行できます。