.. note::

    こんにちは、SunFounderのRaspberry Pi & Arduino & ESP32愛好家コミュニティへようこそ！Facebook上でRaspberry Pi、Arduino、ESP32についてもっと深く掘り下げ、他の愛好家と交流しましょう。

    **参加する理由は？**

    - **エキスパートサポート**：コミュニティやチームの助けを借りて、販売後の問題や技術的な課題を解決します。
    - **学び＆共有**：ヒントやチュートリアルを交換してスキルを向上させましょう。
    - **独占的なプレビュー**：新製品の発表や先行プレビューに早期アクセスしましょう。
    - **特別割引**：最新製品の独占割引をお楽しみください。
    - **祭りのプロモーションとギフト**：ギフトや祝日のプロモーションに参加しましょう。

    👉 私たちと一緒に探索し、創造する準備はできていますか？[|link_sf_facebook|]をクリックして今すぐ参加しましょう！

.. _sh_tap_tile:

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

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

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

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

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

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

.. image:: img/21_tile.png

必要な部品
---------------------

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

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

.. list-table::
    :widths: 20 20 20
    :header-rows: 1

    *   - 名前
        - このキットのアイテム
        - リンク
    *   - ESP32 Starter Kit
        - 320+
        - |link_esp32_starter_kit|

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

.. list-table::
    :widths: 30 20
    :header-rows: 1

    *   - コンポーネントの紹介
        - 購入リンク

    *   - :ref:`cpn_esp32_wroom_32e`
        - |link_esp32_wroom_32e_buy|
    *   - :ref:`cpn_esp32_camera_extension`
        - |link_esp32_extension_board|
    *   - :ref:`cpn_breadboard`
        - |link_breadboard_buy|
    *   - :ref:`cpn_wires`
        - |link_wires_buy|
    *   - :ref:`cpn_avoid`
        - |link_avoid_buy|

回路の構築
-----------------------

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

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

.. image:: img/circuit/19_tap_tile_bb.png

プログラミング
------------------

ここでは、 **Tile**、 **Left IR**、 **Right IR** の3つのスプライトが必要です。

* **Tile** スプライト：黒と白のタイルが交互に下に移動する効果を実現するために使用され、携帯電話のこのゲームは一般的に4列ですが、ここでは2列だけを行います。
* **Left IR** スプライト：クリック効果を実現するために使用され、左IRモジュールが手を感知すると、 **left** のメッセージを **Left IR** スプライトに送信し、動作を開始させます。ステージ上の黒いタイルに触れるとスコアが1増え、そうでない場合は1減ります。
* **Right IR** スプライト：基本的な機能は **Left IR** と同じですが、 **Right** の情報を受け取ります。

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

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

.. image:: img/21_tile1.png

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

.. image:: img/21_tile2.png

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


.. image:: img/21_tile01.png

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

.. image:: img/21_tile02.png

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

.. image:: img/21_tile0.png

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

.. image:: img/21_tile3.png

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

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

.. image:: img/21_tile4.png

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

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

.. image:: img/21_tile5.png

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

.. image:: img/21_tile6.png

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

.. image:: img/21_tile7.png

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

.. image:: img/21_tile8.png

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

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

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

.. image:: img/21_tile9.png
    :width: 800

**4. 左IRスプライト**

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

.. image:: img/21_tile10.png

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

.. image:: img/21_tile11.png

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

.. image:: img/21_tile12.png

.. note::

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

    .. image:: img/21_tile13.png

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

.. image:: img/21_tile14.png

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

.. image:: img/21_tile15.png

**5. 右IRスプライト**

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

.. image:: img/21_tile16.png

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

.. image:: img/21_tile17.png

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