.. note::

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

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

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

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

.. _sh_star_crossed:

2.15 GAME - スタークロスド
==========================

次のプロジェクトでは、PictoBloxで楽しいミニゲームをプレイします。

このゲームではジョイスティックモジュールを使用して「スタークロスド」というゲームをプレイします。

スクリプトが実行されると、星がランダムにステージ上に表示されます。ロケットを操作して星を避けるためにジョイスティックを使ってください。星に触れるとゲームオーバーとなります。

.. image:: img/16_rocket.png

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

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

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

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

キットで一式を購入すると便利です。リンクはこちら：

.. 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_wires`
        - |link_wires_buy|
    *   - :ref:`cpn_joystick`
        - \-

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

ジョイスティックは、基盤上でピボットとして動くスティックで構成された入力デバイスです。これは主にビデオゲームやロボットの制御に使われます。

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

ジョイスティックの動きの座標は次の図で示されています。

.. note::

    * x座標は左から右、範囲は0-1023。
    * y座標は上から下、範囲は0-1023。

.. image:: img/16_joystick.png

次に、以下の図に従って回路を組み立ててください。

.. image:: img/circuit/joystick_circuit.png

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

このスクリプトの全体の目的は、緑のフラグがクリックされると、 **Stars** スプライトがステージ上で曲線を描いて動き、ジョイスティックを使用して **Rocketship** を動かし、 **Star** スプライトに触れないようにすることです。

**1. スプライトと背景の追加**

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

.. image:: img/16_sprite.png

次に、 **Choose a Backdrop** で **Stars** の背景を追加してください。

.. image:: img/16_sprite1.png

**2. Rocketshipのスクリプティング**

**Rocketship** スプライトは、ランダムな位置に表示され、次にジョイスティックで上、下、左、右に動かす効果を実現します。

作業の流れは以下の通りです。

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

.. image:: img/16_roc2.png

* A0の値は0-1023の範囲内にあり（中央は約512）、 ``x-512>200`` を使用してジョイスティックが右に切り替えられているかどうかを判断し、そうであれば、スプライトのx座標を+30にします（スプライトを右に移動）。

.. image:: img/16_roc3.png

* ジョイスティックが左に切り替えられている場合(``x-512<-200``)、スプライトのx座標は-30にします（スプライトを左に移動）。

.. image:: img/16_roc4.png

* ジョイスティックのy座標は上（0）から下（1023）へ、そしてスプライトのy座標は下から上へです。そのため、ジョイスティックを上に動かし、スプライトを上に動かすためには、スクリプト内のy座標は-30でなければなりません。

.. image:: img/16_roc5.png

* ジョイスティックが下にフリックされると、スプライトのy座標は+30になります。

.. image:: img/16_roc6.png

**3. Starのスクリプティング**

**Star** スプライトの目的は、ランダムな位置に表示され、 **Rocketship** に当たった場合は、スクリプトが停止してゲームが終了することです。

* 緑のフラグがクリックされ、スプライトがランダムな位置に移動すると、[turn degrees] ブロックは **Star** スプライトを少し角度を変えて前進させ、曲線で動いているように見えるようにします。もしエッジに当たったら、バウンスします。

.. image:: img/16_star1.png

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

.. image:: img/16_star2.png