MakeCode Arcade解説動画を見てとりあえず動くものを作ってみた

#はじめに
2020年春、小中学校が休校になったことに伴い様々なサポートが実施されています。

たとえば[プログラミング教室TENTOではオンライン無料講座](https://www.tento-net.com/onlineclass-202003-open)を提供しています。

私自身は大人ですがありがたく、その一つ[「日本最速 MakeCode Arcade入門」by 倉本 大資 (Daisuke Kuramoto) さん](https://www.youtube.com/watch?v=-xhghKAN7o4)を受けてみましたのでせめてものお礼に記事を1つまとめました。

#MakeCode Arcadeとは
MakeCode自体はマイクロソフトが提供するブラウザーベースの開発環境です。
レゴやMinecraft、micro:bitなどに対応し、様々な形のプログラミングを学ぶことが可能です。

[Microsot MakeCode WEBサイト](https://www.microsoft.com/ja-jp/makecode)


MakeCode Arcadeは最終的にはゲームボーイライクな携帯ゲームデバイスに転送して遊ぶゲームを作るための環境です。

このようなブロックプログラミングで作ったゲームを
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/e75de3ce-e50d-7d32-39fd-f4f3a35d3dd9.png)

ゲームボーイライクな携帯ゲームデバイスに転送して遊べます
![ARCADE for MakeCode Arcade](https://d2air1d4eqhwg2.cloudfront.net/images/5941/500x500/37eafac9-8e70-477d-b6d1-b8eb3445af9c.jpg)

今回はその中のMakeCode Arcadeで簡単な落ちゲーを作ってみました。


#解説動画
今回はこちらの動画を見て学んだことをベースとしています。
[■MakeCode Arcade入門（日本最速？）](https://www.youtube.com/watch?v=-xhghKAN7o4)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/6fc2b299-7275-272f-eae9-799e1f26cfd8.png)


#ステップ1：ウェブサイトへのアクセス

まずは[MakeCode Arcadeのウェブサイト](https://arcade.makecode.com/)へアクセスし、My Projectsをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/8890e0ed-aae7-adc8-251b-ed63358f0ede.png)

次に適当なプロジェクト名を付けます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/7a76a2c8-0351-5b1c-31ff-b693f745e894.png)


さぁ、下記画面が表示されれば成功です！早速プログラミングしていきましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/48f16804-62ce-0b07-860f-604d3abbe509.png)


#ステップ2：ブロックを並べていきましょう！
左側のゲームハードウェア風の画面はシミュレータで途中で動作を確認しながら進めていくことができます。
真ん中のSprites、Controllerなどと並んでいる部分がブロックが入っている引き出しのような場所です。
必要に応じて画面の右側に配置していきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/48f16804-62ce-0b07-860f-604d3abbe509.png)

各ブロックの色は引き出しの色と対応しています。青い"Sprite"のブロックは青い引き出しに入っています
他のブロックプログラミングを使ったことがある方はまずは下記の通りに並べてみましょう

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/8e5b76f2-ece7-5a48-20a9-20ee7f70286b.png)


##完成版へのリンク
手っ取り早く完成版を見たい方、自分で並べるのが難しいそうな方は下記へどうぞ
[さくらんぼを食え！公開ページ](https://makecode.com/_AmxAKF7788e8 )
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/ebeb7063-8f1a-f452-7a8e-872b4c1f2846.png)
画面上部の"ShowCode"ボタンでブロックの並びを見ることができます。
または"EditCode"ボタンを押せばブロックが並んだ状態から進める事ができます

##プログラム解説(ポイントのみ)
-MakeCode Arcadeの独自ポイント/登場する物体の呼び名
全てSprite(スプライト、英語で妖精の意味)という名前で呼ばれ、どのスプライトとどのスプライトがぶつかったら、などの条件で処理を進めます

-自機の操作
なんと、十字キーでの操作が最初から準備されています。便利！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/189c76c2-2da3-84dd-ec1a-e4be4d6e3eb2.png)

-あたり判定(さくらんぼを食べた時)

まず、下記ブロックでプレイヤースプライトが食べ物スプライトにあたった時、mySprite2(さくらんぼ)を消し、スコアを100点足します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/9d8ddf4e-152c-bf12-8f6d-363b5144170c.png)

消したままではさくらんぼがなくなってしまうので画面のランダムな位置にさくらんぼを出現させます
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/71746/5e355d69-96fd-4219-ef86-569461f65322.png)

#ステップ3ハードウェアへの転送
まだ入手していないので入手次第更新します！

#参考リンク
■子ども向け無料オンライン授業のご案内
https://www.tento-net.com/onlineclass-202003-open

■ARCADE for MakeCode Arcade購入サイト
https://www.switch-science.com/catalog/5941/