.. note::

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

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

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

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

.. _sh_star_crossed:

2.13 GAME - Star-Crossed
==========================

PictoBloxで、いくつかの楽しいミニゲームをプレイします。

ここでは、ジョイスティックモジュールを使用して、スタークロストゲームをプレイします。

スクリプトが実行されると、星がステージ上にランダムに出現します。ジョイスティックを使ってロケットシップを制御し、星を避けなければなりません。もし星に触れたら、ゲームオーバーになります。

.. image:: img/16_rocket.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_wires`
        - |link_wires_buy|
    *   - :ref:`cpn_joystick`
        - |link_joystick_buy|

学べること
---------------------

- ジョイスティックモジュールの仕組み
- スプライトのxとy座標の設定方法

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

ジョイスティックは、基部でピボットするスティックからなる入力デバイスで、その角度や方向を制御しているデバイスに報告します。ジョイスティックは、ビデオゲームやロボットを制御するためによく使用されます。

コンピュータに完全な動きの範囲を伝えるために、ジョイスティックは2軸 - X軸（左右）とY軸（上下）でスティックの位置を測定する必要があります。

ジョイスティックの動作座標は以下の図に示されています。

.. note::

    * x座標は左から右へ、範囲は0-4095です。
    * y座標は上から下へ、範囲は0-4095です。

.. image:: img/16_joystick.png


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

.. image:: img/circuit/14_star_crossed_bb.png


プログラミング
------------------
このスクリプトは、緑の旗がクリックされた時に、 **Stars** スプライトがステージ上をカーブを描いて動き、ジョイスティックを使って **Rocketship** を動かし、 **Stars** スプライトに触れないようにする効果を実現することです。

**1. スプライトとバックドロップの追加**

デフォルトのスプライトを削除し、 **Choose a Sprite** ボタンを使用して **Rocketship** スプライトと **Star** スプライトを追加します。 **Rocket** スプライトのサイズは50%に設定されていることに注意してください。

.. image:: img/16_sprite.png

今度は **Stars** のバックドロップを **Choose a Backdrop** で追加します。

.. image:: img/16_sprite1.png

**2. ロケットシップのためのスクリプティング**

**Rocketship** スプライトは、ランダムな位置に現れてからジョイスティックによって上下左右に動かされる効果を実現することです。

ワークフローは以下の通りです。

* 緑の旗がクリックされたとき、スプライトをランダムな位置に移動させ、2つの変数 **x** と **y** を作成します。これらはそれぞれピン33（ジョイスティックのVRX）とピン35（ジョイスティックのVRY）から読み取った値を格納します。スクリプトを実行させ、ジョイスティックを上下左右に動かして、xとyの値の範囲を確認できます。

.. image:: img/16_roc2.png

* ピン33の値は0-4095の範囲で（中間は約1800です）。 ``x-1800>200`` を使用して、ジョイスティックが右にトグルされているかを判断し、そうであれば、スプライトのx座標を+30にします（スプライトを右に動かすため）。

.. image:: img/16_roc3.png

* ジョイスティックが左にトグルされた場合は、スプライトのx座標を-30にします（スプライトを左に動かします）。

.. image:: img/16_roc4.png

* ジョイスティックのy座標は上（0）から下（4095）であり、スプライトのy座標は下から上になります。そのため、ジョイスティックを上に動かし、スプライトも上に動かすためには、スクリプト内でy座標を-30にする必要があります。

.. image:: img/16_roc5.png

* ジョイスティックを下にフリックした場合、スプライトのy座標は+30です。

.. image:: img/16_roc6.png

**3. 星のためのスクリプティング**

**Star** スプライトが達成する効果は、ランダムな位置に現れ、 **Rocketship** にぶつかった場合はスクリプトの実行を停止し、ゲームが終了することです。

* 緑の旗がクリックされてスプライトがランダムな位置に移動したとき、[turn degrees]ブロックは **Star** スプライトが少し角度を変えて前に進むようにするので、カーブを描いて動いているように見えますし、端に当たったら跳ね返ります。

.. image:: img/16_star1.png

* 動いている間にスプライトが **Rocketship** スプライトに触れた場合、スクリプトの実行を停止します。

.. image:: img/16_star2.png