Power Appsでテトリス風ゲーム(Tetrapps)を作ってみた

【JPPGB】ゲーム作成コンテスト #1へのエントリー作品として、Power Appsでテトリス風ゲーム(Tetrapps)を作ってみました。

土日暇してますか？#tetrapps というゲームを作ったのでぜひ遊んでみてください。
(リンクや操作方法は後ほど追記します)#PowerApps #JPPGB pic.twitter.com/NNbPTmXOq2
— PPログ (@PowerPlatform4) June 7, 2024

こちらからダウンロードして遊べます。

機能
小ネタ
ドキュメント自動生成
音楽

機能

ボード

以前紹介した2048やリバーシ(オセロ)と同様の方法でボードを作成しました。
回転処理でミノが表示領域外に飛び出てしまうことがあるので、Tetrappsではマイナスのマスを2行分用意しています。

ClearCollect(
    ColBoard,
    AddColumns(
        Sequence(216, -17),
        Column,
        Mod(ThisRecord.Value - 1, 9) + 1,
        Row,
        RoundUp(ThisRecord.Value / 9, 0),
        MinoStatus,
            {
                Status:"", Direction:0
            },
        MinoType,
        0
    )
);

マスの行列の値に加えて、そのマスにブロックがあるかやブロックの種類といった情報もコレクションで定義しています。

ブロック

使用するブロックの種類は14種類で、Microsoftのサービスの色を使用しています。

ClearCollect(
    ColBlocks,
    {Type:1, Space:[4, 6, 14, 23], Color:ColorValue("#0b556a")}, // Y型: Copilot Studio
    {Type:2, Space:[5, 6, 14, 15], Color:ColorValue("#742774")}, // O型: Apps
    {Type:3, Space:[5, 13, 14, 15], Color:ColorValue("#28ab81")}, // T型: PP
    {Type:4, Space:[5, 6, 13, 14], Color:ColorValue("#4b44c1")}, // S型: Pages
    {Type:5, Space:[4, 5, 14, 15], Color:ColorValue("#d04677")}, // Z型: Fx
    {Type:6, Space:[4, 13, 14, 15], Color:ColorValue("#fbbf08")}, // J型: BI
    {Type:7, Space:[6, 13, 14, 15], Color:ColorValue("#0066ff")}, // L型: Automate
    {Type:8, Space:[4, 22, 23, 24], Color:ColorValue("#2461ca")}, // SJ型: Word
    {Type:9, Space:[5, 22, 23, 24], Color:ColorValue("#107c41")}, // ST型: Excel
    {Type:10, Space:[6, 22, 23, 24], Color:ColorValue("#c43e1c")}, // SL型: PowerPoint
    {Type:11, Space:[5, 6, 22, 23], Color:ColorValue("#038387")}, // SS型: SharePoint
    {Type:12, Space:[4, 5, 23, 24], Color:ColorValue("#4f52b2")}, // SZ型: Teams
    {Type:13, Space:[5, 13, 15, 23], Color:ColorValue("#0f6cbd")}, // +型: Outlook
    {Type:14, Space:[4, 6, 22, 24], Color:ColorValue("#117865")} // SO型: Fabric
);

色だけでサービス名を判別できるか、Microsoftへの信仰心が試されます。

落下処理

タイマーコントロールのOnTimerEndに以下の数式を設定しており、タイマーのカウントごとに以下の処理を実行しています。

次の行が設置済みまたは最終行の場合は設置済み状態にする
それ以外は移動可能なので次の行のマスを移動中にして、元々のマスのステータスを空白にする

With(
    {Moving:AddColumns(MovingMino, NextValue, ThisRecord.Value + 9)},
    If(
        //置く
        Or(
            CountIf(Filter(ColBoard, Value in Moving.NextValue) As NextValue, "Placed" in NextValue.MinoStatus.Status) <> 0,
            22 in Moving.Row
        ),
        Set(_SE, 設置);
        UpdateContext({_chain:_chain + 1});
        UpdateIf(
            ColBoard,
            Value in Moving.Value,
            {MinoStatus:{Status:"Placed", Direction:0}, MinoType:First(Moving).MinoType}
        );,

        //移動
        UpdateIf(
            ColBoard,
            Value in Moving.NextValue,
            {MinoStatus:First(Moving).MinoStatus, MinoType:First(Moving).MinoType},
            Value in Moving.Value,
            {MinoStatus:{Status:"", Direction:0}, MinoType:0}
        );
    )
)

AddColumnsとWithを使用してかなり綺麗に書けていると思います。

横移動処理

スライダーコントロールで十字キーを再現しており、水平方向のスライダーのOnChangeには以下の数式を設定しています。

スライダーの値が50より大きいか小さいかに応じて左右移動するようにしており、移動後のマスが行を超えておらず、設置済みマスもない場合に横移動できるような処理です。

If(
    Self.Value <> 50,
    With(
        {Moving:AddColumns(MovingMino, NextValue, ThisRecord.Value + If(Self.Value > 50, 1, -1))},
        If(
            And(
                //移動後のマスが行を超えていないか
                CountIf(
                    Moving As moving,
                    LookUp(ColBoard, Value = moving.NextValue, Row) <> moving.Row
                ) = 0,
                //移動後のマスに設置済みマスがないか
                CountIf(
                    Filter(ColBoard, Value in Moving.NextValue),
                    MinoStatus.Status = "Placed"
                ) = 0
            ),
            UpdateIf(
                ColBoard,
                Value in Moving.NextValue,
                {MinoType:First(Moving).MinoType, MinoStatus:{Status:"Moving", Direction:First(Moving).MinoStatus.Direction}},
                Value in Moving.Value,
                {MinoType:0, MinoStatus:{Status:"", Direction:0}}
            );
        )
    );
    Reset(Self);
    Reset(TextInputKeyBoard);
    SetFocus(TextInputKeyBoard);
);

最後にReset(Self)を入れることで移動後はスライダーの値がデフォルトの50に戻ります。

回転処理

このゲームで最も苦労した箇所です。

ゲーム作るの難しいお pic.twitter.com/eLmvSb0RWk
— PPログ (@PowerPlatform4) June 1, 2024

Set(_SE, 回転);
With(
    {
        NextValue:
        AddColumns(
            AddColumns(
                MovingMino, 
                NextRow, 
                ThisRecord.Column - First(MovingRng).Column + First(MovingRng).Row, 
                NextColumn,
                2 - (ThisRecord.Row - First(MovingRng).Row) + First(MovingRng).Column
            ) As Next,
            NextValue,
            LookUp(ColBoard, Row = Next.NextRow && Column = Next.NextColumn, Value)
        ).NextValue
    },
    If(
        //回転可能なブロックの種類かつ回転可能か
        And(
            First(MovingMino).MinoType <> 2,
            CountIf(Filter(ColBoard, Value in NextValue), MinoStatus.Status = "Placed") = 0,
            Count(NextValue) = 4
        ),
        UpdateIf(
            ColBoard,
            Value in NextValue,
            {MinoStatus:{Status:"Moving", Direction:If(First(MovingMino).MinoStatus.Direction = 4, 1, First(MovingMino).MinoStatus.Direction + 1)}, MinoType:First(MovingMino).MinoType},
            
            Value in MovingMino.Value,
            {MinoStatus:{Status:"", Direction:0}, MinoType:0}
        );
        SetFocus(TextInputKeyBoard)
    )
)

左に90度回転するケースでブロックの存在する範囲を以下のように区切ったとき、回転前後のx, y座標はそれぞれ以下のようになります。

つまり、x'=y, y'=2-xをそれぞれのマスで計算すれば回転後の座標を取得できます。

これまでもAddColumnsでNextValue列(移動後、回転後のValue)を計算してからUpdateIfで更新していましたが、こうすることでForAllよりも高速な処理ができます。

ここがForを使用できる普通の言語の考え方と最も大きく異なる部分で、Power Apps独自の数式を組む必要がありゲーム作成者を悩ませるポイントです。

キーボード操作

テトリスは終盤に高速なコントローラー操作が求められますよね。

マウスの操作だけでは操作の速度に限界があり、本物のテトリスのようなスピード感のあるゲームプレイができません。

なので、キーボード操作でゲームをプレイできるようにしてみました。

JPPGB #9 で@twit_ahfさんができないかなっておっしゃっていたやつ、できたので実装してみました。
asdで移動、qで左回転、eまたはスペースで右回転してます。
テトリスにはこのスピード感がないとね。 pic.twitter.com/EhpwU6Z3fP
— PPログ (@PowerPlatform4) June 3, 2024

ゲームスタート時やボタン選択時にSetFocus関数で1×1のテキスト入力コントロール(Visible=falseだとフォーカスできない)にフォーカスし、その入力に応じて十字キーのDefaultを変化させます。