M5stack：ボタンを押すと球を打ち出す

#include <M5Stack.h>

int x = 20, y = 50; // 円の位置
int speedX = 2; // 円の移動速度（正の数で右移動、負の数で左移動）

const int maxStars = 10; // 最大で10個の "*" を表示
int starX[maxStars]; // "*" のX座標を管理する配列
int starY[maxStars]; // "*" のY座標を管理する配列
bool starActive[maxStars]; // "*" の有効/無効を管理するフラグ

void setup() {
  M5.begin(); // Initialize the M5Stack
  M5.Lcd.fillScreen(BLACK); // Clear the screen once
  M5.Lcd.setTextSize(2); // Set the text size
  
  // "*" 配列の初期化
  for (int i = 0; i < maxStars; i++) {
    starActive[i] = false; // 最初はすべて無効
  }
}

void loop() {
  M5.update(); // Update the state of the buttons

  M5.Lcd.fillScreen(BLACK); // 画面をクリア

  // 円の位置を更新
  x += speedX; 
　
  // 円が画面端に到達したら反転させる
  if (x >= 320 - 20 || x <= 0 + 20) { // 320は画面の横幅、20は円の半径
    speedX = -speedX; // 速度を反転
  }

  // 円を描画
  M5.Lcd.fillCircle(x, y, 20, RED);

  // ボタンBを押したら "*" を円の位置から出現させる
  if (M5.BtnB.wasPressed()) {
    for (int i = 0; i < maxStars; i++) {
      if (!starActive[i]) {
        starX[i] = x; // "*" の X 座標を円の X 座標に合わせる
        starY[i] = y; // "*" の Y 座標を円の Y 座標に合わせる
        starActive[i] = true; // "*" を有効にする
        break; // 最初に見つけた無効な "*" を有効にしたらループを抜ける
      }
    }
  }

  // "*" が表示されている場合は動かす
  for (int i = 0; i < maxStars; i++) {
    if (starActive[i]) {
      M5.Lcd.setCursor(starX[i], starY[i]);
      M5.Lcd.printf("*");

      // "*" を移動させる
      starY[i] += 3; // Y方向に下に移動

      // 画面端に達したら "*" を消す
      if (starY[i] > 240) {
        starActive[i] = false; // "*" を無効にする
      }
    }
  }

  delay(15); // Slow down the loop
}

---

このコードの動き

このコードは、M5Stackのディスプレイ上で、左右に動く円と、その円から上に飛び出す""を複数表示するプログラムです。ボタンBを押すと、円の位置から"＊"が生成され、上に移動していきます。"*"は画面の上端に達すると消滅します。

---

ヘッダーファイルと変数の宣言

• #include <M5Stack.h>: M5Stackライブラリをインクルードし、M5Stackの機能を使用できるようにします。

• 変数:
  ・x, y: 円の中心座標
  ・speedX: 円の移動速度
  ・maxStars, starX, starY, starActive: "*"に関する情報（最大数、座標、有　　　　　　効/フラグ）

• setup関数
  ・M5.begin(): M5Stackの初期化
  ・M5.Lcd.fillScreen(BLACK): 画面を黒色でクリア
  ・M5.Lcd.setTextSize(2): 文字サイズの設定
  ・starActive配列の初期化: すべての"*"を無効に設定

• loop関数
  ・M5.update(): ボタンの状態を更新
  ・M5.Lcd.fillScreen(BLACK): 画面をクリア
  ・円の位置を更新: x座標をspeedXだけ増やし、画面端で移動方向を反転
  ・円の描画: M5.Lcd.fillCircle()で円を描画
  ・ボタンBが押された場合:
  ・starActive配列から無効な"*"を見つけ、その座標を円の座標に設定し、有効にする
  ・"*"の表示と移動:
  　・starActiveが真の"*"について、座標を更新し、画面に表示
  　・画面の上端に達したら、starActiveを偽にして消滅させる

---

まとめ

このコードは、M5Stackの基礎的な機能であるディスプレイ操作、ボタン入力などしか使っていないので、初心者でも自力で作れます。
もっと上級を目指す方はスプライト等を使ってみるのもいいかも。
実行してみるとわかるのですが円の移動時などで、
ちらつきが起こってしまうが、スプライトを使えばちらつかなくなる。