.. note::

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

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

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

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

.. _sh_tap_tile:

2.20 ゲーム - 白いタイルをタップしないで
==========================================

多くの方がスマートフォンでこのゲームをプレイしたことがあると思います。このゲームは、ランダムに出現する黒いタイルをタップしてポイントを追加し、スピードはどんどん速くなります。白いブロックをタップしたり、黒いブロックを見逃したりするとゲームオーバーです。

今回は、PictoBloxを使用してこれを再現します。

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

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

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

.. image:: img/21_tile.png

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

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

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

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

    *   - 名前	
        - このキットのアイテム
        - リンク
    *   - 3 in 1 Starter Kit
        - 380+
        - |link_3IN1_kit|

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

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

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

    *   - :ref:`cpn_uno`
        - |link_Uno_R3_buy|
    *   - :ref:`cpn_breadboard`
        - |link_breadboard_buy|
    *   - :ref:`cpn_wires`
        - |link_wires_buy|
    *   - :ref:`cpn_avoid` 
        - |link_obstacle_avoidance_buy|

回路の作成
-----------------------

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

以下の図に従って回路を組み立てます。

.. image:: img/circuit/2avoid_circuit.png

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

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

* **Tile** スプライト: 黒と白のタイルが交互に下方向に移動する効果を実現するために使用されます。スマートフォンのこのゲームは通常4列ですが、ここでは2列だけを行います。
* **Left IR** スプライト: クリック効果を実現するために使用されます。左のIRモジュールがあなたの手を感知すると、 **Left IR** スプライトにメッセージ - **left** を送信し、それを起動します。ステージ上の黒いタイルに触れると、スコアは1増加し、それ以外の場合はスコアは1減少します。
* **Right IR** スプライト: 機能は **Left IR** とほぼ同じですが、 **Right** の情報を受け取ります。

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

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

.. image:: img/21_tile1.png

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

.. image:: img/21_tile2.png

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

.. image:: img/21_tile01.png

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

.. image:: img/21_tile02.png

2つの長方形を選択して、キャンバスの中心点が一致するように移動します。

.. image:: img/21_tile0.png

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

.. image:: img/21_tile3.png


**2. Tile スプライトのスクリプト作成**

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

.. image:: img/21_tile4.png

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

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

.. image:: img/21_tile5.png

**blocks** 変数が減少している間、 **Tile** スプライトのクローンを作成し、blocks が 0 になったらスクリプトの実行を停止します。ここでは2つの [wait () seconds] ブロックが使用されています。1つ目は **Tile** のクローン間の間隔を制限するため、2つ目は変数 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

**4. Left 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. Right IR スプライト**

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

.. image:: img/21_tile16.png

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

.. image:: img/21_tile17.png

すべてのスクリプト作成が完了したら、緑の旗をクリックしてスクリプトを実行できます。