.. note::

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

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

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

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

.. _sh_breakout_clone:

2.18 ゲーム - ブレイクアウトクローン
====================================

このゲームでは、ポテンショメータを利用してブレイクアウトクローンゲームをプレイします。

緑のフラグをクリックした後、ポテンショメータでステージ上のパドルを操作してボールをキャッチします。ボールを上に移動させ、ブロックをヒットさせると、すべてのブロックが消え、ゲームに勝利します。ボールをキャッチしないと、ゲームに敗北します。

.. image:: img/17_brick.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_potentiometer`
        - |link_potentiometer_buy|

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

ポテンショメータは3端子の抵抗素子です。2つのサイドピンは5VとGNDに接続し、中央のピンはA0に接続します。ArduinoボードのADCコンバータを使用して変換した後、値の範囲は0-1023となります。

.. image:: img/circuit/potentiometer_circuit.png

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

ステージには3つのスプライトが存在します。

**1. パドルスプライト**

**Paddle** の目的は、ステージの底の中央に初期位置があり、ポテンショメータで左右に動かすことです。

* デフォルトのスプライトを削除し、 **Choose a Sprite** ボタンで **Paddle** スプライトを追加して、xとyの位置を(0, -140)に設定します。

.. image:: img/17_padd1.png

* **Costumes** ページに移動して、アウトラインを削除し、色を濃い灰色に変更します。

.. image:: img/17_padd3.png

* 緑のフラグがクリックされたとき、 **Paddle** スプライトの初期位置を(0, -140)に設定し、A0の値（ポテンショメータ）を変数 **a0** に読み取ります。 **Paddle** スプライトはx座標 -195~195で左右に移動するため、[map]ブロックを使用して、変数 **a0** の範囲0~1023を-195~195にマッピングします。

.. image:: img/17_padd2.png

* ポテンショメータを回して、ステージ上で **Paddle** が左右に動くかを確認します。


**2. ボールスプライト**

ボールスプライトの動作は、ステージを移動し、端に触れると跳ね返ります。ステージの上のブロックに触れると下に跳ね返り、落下中にパドルスプライトに触れると上に跳ね返ります。そうでない場合は、スクリプトの実行を停止し、ゲームが終了します。

* **Ball** スプライトを追加します。

.. image:: img/17_ball1.png

* 緑のフラグをクリックすると、 **Ball** スプライトの角度を45°に設定し、初期位置を(0, -120)に設定します。

.. image:: img/17_ball2.png

* さて、 **Ball** スプライトをステージの周りに移動させ、端に触れると跳ね返るようにします。緑のフラグをクリックして効果を確認してください。

.. image:: img/17_ball3.png

* **Ball** スプライトが **Paddle** スプライトに触れた場合、反射を行います。これを簡単に実行する方法は、角度を直接反転させることですが、それを行うとボールの軌道が完全に固定されてしまい、非常に退屈になります。したがって、2つのスプライトの中心を使用して計算し、バッフルの中心の反対方向にボールを跳ね返すようにします。

.. image:: img/17_ball4.png

.. image:: img/17_ball6.png

* **Ball** スプライトがステージの端に落ちると、スクリプトの実行が停止し、ゲームが終了します。

.. image:: img/17_ball5.png

**3. Block1 スプライト**

**Block1** スプライトは、ステージの上で自身の4x8のクローンをランダムな色で表示し、 **Ball** スプライトに触れられるとクローンを削除する効果があります。

**Block1** スプライトは **PictoBlox** ライブラリには含まれていないので、自分で描くか、既存のスプライトを修正する必要があります。ここでは **Button3** スプライトを使って修正します。

* **Button3** スプライトを追加した後、 **Costumes** ページに移動します。まず **button-a** を削除し、 **button-b** の幅と高さを縮小し、スプライトの名前を **Block1** に変更します。

.. note::

    * **Block1** の幅については、画面上で8つ並べることができるかどうかをシミュレートして確認してください。できない場合は、幅を適切に縮小してください。
    * **Block1** スプライトを縮小する過程で、中心点をスプライトの中央に保持する必要があります。

.. image:: img/17_bri2.png

* まず2つの変数を作成します。 **block** はブロックの数を、 **roll** は行数を保存します。

.. image:: img/17_bri3.png

* **Block1** スプライトのクローンを作成し、左から右、上から下に1つずつ、合計4x8でランダムな色で表示する必要があります。

.. image:: img/17_bri4.png

* スクリプトを書き終えたら、緑のフラグをクリックしてステージ上の表示を確認します。もし、表示がコンパクトすぎるか小さすぎる場合は、サイズを変更できます。

.. image:: img/17_bri5.png

* トリガーイベントを書きます。クローン化された **Block1** スプライトが **Ball** スプライトに触れると、クローンを削除し、 **crush** というメッセージをブロードキャストします。

.. image:: img/17_bri6.png

* **Ball** スプライトに戻って、 **crush** が受信された場合（ **Ball** スプライトが **Block1** スプライトのクローンに触れた場合）、 **Ball** は逆の方向にポップします。

.. image:: img/17_ball7.png