Logical thinking

プログラミングで育む論理的思考力

MakeCode(メイクコード)Arcade(アーケード)のチュートリアルをやってみよう!

今回は、MakeCode(メイクコード)Arcade(アーケード)のチュートリアルの進め方についてご紹介したいと思います。

MakeCode(メイクコード)Arcade(アーケード)
MakeCode(メイクコード)Arcade(アーケード)

MakeCode(メイクコード)とは?をお調べの方は、以下の記事に まとめていますので、ご参考ください。

kodomo-mirai-algo.hatenablog.jp

今回は、2Dのゲーム作成ができる Arcade(アーケード)というプログラミングツールを使い、その中の「Chase The Pizza」というチュートリアルに挑戦します。Arcade(アーケード)については、現在はまだ英語版しか公開されていませんが、前回紹介した「Google翻訳」などを活用すれば「英語は苦手」という方でもスムーズに進めることができると思いますので、是非トライしてみてくださいね。

また、本記事の同じ内容のものを、以下の解説動画にもまとめています。初めて作成した解説動画で拙い説明です。閲覧する場合はどうぞご了承くださいね。


Microsoft MakeCode Arcade(マイクロソフト メイクコード アーケード)チュートリアルに挑戦してみよう!

では「Chase The Pizza(ピザを追いかけろ!)」を始めましょう。

「Chase The Pizza(ピザを追いかけろ!)」チュートリアル

前提条件

本記事の環境は、Windows10 のパソコンと、Chrome というウェブブラウザを使用しています。 チュートリアルは、インターネット環境に接続されたパソコン、もしくはタブレットがあれば学習することが可能ですが、端末の機種やバージョンによっては正常に動作しない可能性もありますのでご注意ください。

チュートリアルを始める準備

  1. MakeCode(メイクコード)のトップページから、Arcade(アーケード)を選択します。 f:id:yksmt:20190904111338p:plain
  2. チュートリアルにある、「Chase The Pizza」をクリックします。「Start Tutorial」ボタンでチュートリアルをスタートします。 f:id:yksmt:20190904111429p:plain
  3. 解説を翻訳したい場合は、右クリックや翻訳アイコンから日本語に変換してくださいね。 f:id:yksmt:20190904111536p:plain f:id:yksmt:20190904111550p:plain

もし「Google翻訳」について調べたい方は、以下のページでも解説していますのでご参考ください。 kodomo-mirai-algo.hatenablog.jp

Arcade(アーケード)の画面構成

Arcade(アーケード)は以下の画面構成となっています。

f:id:yksmt:20190904114530p:plain

  1. シミュレーター
  2. トライ中のステージ
  3. 前のステージへ戻るボタン
  4. ヒントボタン(パズルマークアイコン)
  5. コーディング解説
  6. 次のステージへ進むボタン
  7. コーディングエリア

チュートリアルの進め方

チュートリアルがスタートすると、ヒントが表示された状態でスタートします。

f:id:yksmt:20190904114901p:plain

ヒントは、以下のようなパズルマークアイコンで表示したり隠したりすることができます。

f:id:yksmt:20190904114940p:plain

チュートリアルは、このヒントに表示された通り、ブロックコードをドラッグ&ドロップで配置し、コーディングしていくだけでゲームが完成します。ヒントとよく見比べながら、ステージを進めていきましょう。

まとめ

上記で紹介した解説動画では、チュートリアルを駆け足で進めていますが、実際にはブロックで作成したコードを観察してみるということがとても大切です。Arcade(アーケード)は、シミュレーターがありますので、その場で動作確認ができます。まずはやってみる、そして動かしてみるというアウトプットを繰り返してプログラミングを楽しんでくださいね。

では、次回もどうぞお楽しみに!