サッパリ系ビスケットプログラミング#6マリオ風ゲーム/ジャンプ〜小マリオ編〜

SEの方の間でも評価が上昇傾向のビジュアルプログラミング言語、Viscuit（以下ビスケット）でマリオ風のゲームを作成していきます。#4で作ったステージに、割れたメガネを使ってジャンプのプログラムを追加します。割れたメガネについては#1をご参照ください。

※ビスケットのコーディングは全て描画で行います。こちらの記事はビスケットでのコーディングを簡潔に紹介するため、敢えてサッパリした描画のプログラムにしております。こちらをベースに、お好みの描画でオリジナリティーの高いプログラムに仕上げてくださいm(_ _)m


#ジャンプと着地判定〜小マリオでステージからジャンプして、土管（IN）に乗る。次回🚩までとりあえず行く〜
![4508A82E-E2FD-410C-A04D-9ED7CB4A47A5.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/d8915928-e897-5f3d-2274-edeb515776ef.jpeg)
当面の目標は、小マリオのままで🚩まで移動できるようにします。スタートは画像の位置とします。
【全ルート確認】
スタート→2マス右に移動→右上ジャンプ→土管IN→土管OUT→土管IN→土管OUT→右上ジャンプ
今回は最初の土管（土管IN）まで辿り着きます。


#【ジャンプのプログラムの作り方と解説】
##垂直ジャンプ（1マス上方）
<img width="211" alt="81B76AB3-0FAE-4070-87B2-9FDF07E6F6A4.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/373284/4fca82b2-4063-0786-aad7-6f522b47c3ef.jpeg">
ステージブロック、割れないブロック、ハテナブロック、土管IN、土管OUTの5種類のパーツ上で、小マリオが1マス上方にジャンプするプログラムです。
割れたメガネを5つ準備します。
###作り方
パーツ:タッチマーク、割れたメガネ5つ、Aボタン、重力センサー、小マリオ、ステージブロック、割れないブロック、ハテナブロック、土管IN、土管OUT

まず、左側メガネ下半分にAボタンとタッチマークを配置、左側メガネ上半分にステージブロックと1マス上に小マリオを置き、もう1マス上に重力センサーを配置します。
次に、右側メガネ下半分にAボタンを配置、右側メガネ上半分にステージブロックと1マス上方に重力センサーを置き、もう1マス上に小マリオを置きます。
この作業を5種類のステージパーツ分作ります。

一般的なプログラム風に訳すと
 Aボタンが押されたら、小マリオはステージブロック（割れないブロック、ハテナブロック、土管IN、土管OUT）の2マス上方に移動する
という意味になります。

##左上（右上）ジャンプ
####描画の追加:ジャンプ小マリオ（左右）
<img width="158" alt="28C4D543-F426-4EE3-B226-B1495885E47F.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/373284/9e1627f6-a68b-6983-b831-f11b8a3607f5.jpeg">
ここで、左上、右上にジャンプした際の小マリオのパーツを描画します。
![2CCA388F-9E91-4421-8657-C35C37FC6B30.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/796aecb4-9d2b-592b-d577-67459bee3d23.jpeg)
![7AA79DD8-F006-417F-8234-36DEDA6086E1.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/74df251f-48a2-9019-8637-f378de2c4d5c.jpeg)
十字キーの左斜め上とAボタンで左上ジャンプ、十字キーの右斜め上とAボタンで右上ジャンプ…という命令です。

割れたメガネの発明により、ビスケットの表現の幅はさなぎから蝶になるかのようにドラスティックに変化を遂げました。
このメガネはその真骨頂の１つとも言える、3分割メガネによる「ボタン同時押しによる命令」であります(￣^￣)ゞ

…と書くと大げさかもしれませんが、この記事のようなマリオ風ゲームがビスケットで制作可能になったのはこの機能のおかげなのです。
では解説していきます。

###作り方
パーツ:割れたメガネ3分割2つ、タッチマーク、Aボタン、重力センサー、小マリオ、ステージブロック、割れないブロック、ハテナブロック、土管IN、土管OUT


まずは、ステージブロック上で小マリオが左上（右上）にジャンプできるようにします。
メガネを2つ出し、3分割にします。
<img width="885" alt="63D030A0-FC4D-4CA3-829B-05664E142048.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/373284/5f7d5cb4-2e0d-6be0-b1a8-afcf020368ad.jpeg">
<img width="380" alt="CBE35F73-4068-456E-A976-C8819DC3006E.jpeg" src="https://qiita-image-store.s3.amazonaws.com/0/373284/aa91059b-4755-3df1-be27-e5f520a720e6.jpeg">


左側のメガネ:
割れたメガネの下段左側に「十字キーの左斜めにタッチマーク」、右側に「Aボタンにタッチマーク」を入れます。
割れたメガネ上段には小マリオを入れます。
![7B7A0567-DE2B-4CE8-B51F-7B155F25A514.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/3ecaba99-8f9e-e211-2786-96859c91dda6.jpeg)


右側のメガネ:
タッチマークなしの十字キーを左下半分に、Aボタンを右下半分に入れます。
割れたメガネ上段には初めの位置から4マス上方、1マス左の場所にマリオを入れます。
![3A2CB096-5A92-4C39-B672-93766926A844.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/4b6744f2-33f6-d16c-d345-c426d77a1365.jpeg)


一般的なプログラム風に訳すと
十字キーの左上（右上）とAボタンが同時に押された時、小マリオの1マス左上（右上）に重力センサーが存在するなら、小マリオは小マリオジャンプに書き換えられ1マス左上（右上）へ移動する
という意味になります。

右ジャンプはこの逆を作ります。

この命令をステージパーツの分だけ同様に作ります。
メガネは増えますが、パターンを1つ作れば作業は明確なので、あとは手を動かすだけなのです。
大マリオもジャンプでの移動先以外は同様ですが、今回は小マリオの分だけ作ります。（その理由は、今後お伝えしていきます。）

###小マリオの左上&右上ジャンプ全プログラム
総メガネ:割れたメガネ3分割×ステージ5つ分×左右2セット分＝割れたメガネ10個
パーツ:タッチマーク、Aボタン、重力センサー、小マリオ、ステージブロック、割れないブロック、ハテナブロック、土管IN、土管OUT
![59BF72F5-D754-42DB-B23A-28F4F8EA1676.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/22c15974-9913-c515-0c35-f175bbbf3cce.jpeg)
![D7AFEFDB-FD60-4E7B-B6AA-7E6F4F11CA4F.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/c6deaad0-5553-f7df-52e2-4dc7c31a7017.jpeg)

###小マリオがジャンプできた！…が！？
![20266845-ED4A-43A6-B386-6C7F25EE21CE.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/1c89f92b-e5c5-14d8-97da-b3da7ceaebe8.jpeg)
![E410C6A4-2C48-4510-8130-2956B2E1E399.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/4c66abc7-daae-ce78-11da-fbe39922c931.jpeg)
![8F1DA877-05ED-4E25-BDFE-1C56BA535044.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/6ebb1398-4b0c-6414-10eb-ed29131bd91e.jpeg)
![B4A57253-BF35-41DC-AB89-64CB1E933188.jpeg](https://qiita-image-store.s3.amazonaws.com/0/373284/e867b5b9-0b67-6335-46e0-22a52f994c55.jpeg)

一旦天に舞い上がりし者、儀式無くして、別の地に降り立つことなかれ…

ジャンプしたままフリーズです。

着地して左右に動けるようにする判定が必要となります。

では、今回はこれまでです。次回は#7着地判定です。