期間限定

キャンペーン中

体験授業申込

News

お知らせ

【簡単】micro:bit(マイクロビット)で迷路ゲームをつくろう!

コラム
【簡単】micro:bit(マイクロビット)で迷路ゲームをつくろう!

micro:bitでどんなゲームをつくれるのか知りたい方やmicro:bitを買ったけどどんなゲームをつくろうか迷ってる方におすすめの記事です。

この記事では簡単に作れるシンプルな迷路ゲームを作成していきます。

micro:bitも学べる『1DAYプログラミング夏季講習』

>>メディアで話題!micro:bitも学べる『1DAYプログラミング夏季講習』はコチラ

どんなゲームをつくる?

ゲームをつくるときにはまず何をつくろうとするかを考えるところから始まります。

今回は迷路ゲームを作ってみたくなったのでmicro:bitで迷路ゲームをつくります。

一口に迷路ゲームと言っても様々な迷路ゲームが思い浮かんでくると思います。例えば、3Dダンジョンのような迷路ゲームで壁を進んでいったり、2Dで宝物を集めながらゴール地点へ進んでいく迷路ゲームなど。

micro:bitが5×5の25マスなので、ここではシンプルにゴール地点を目指してAボタンとBボタンで操作しながら進んでいくというゲームを作っていきます。

先に完成した画面をお見せすると、以下が完成した時のゲーム画面です。一番左上のマスを動かすことができます。

迷路ゲームに必要なもの?

最初に迷路ゲームにはどんなものが必要なのかを考えるとこからスタートします。

迷路ゲームに必要なもの…たとえば「迷路」「人」「ゴール地点」など。
これがあれば迷路ゲームと言えそうなものを考えてみました。

必要なものが決まると今度は「人をどういう風に動かそう?」「ゴール地点に着いたらクリア画面にしたい」といったことを考えるかもしれません。

まずは分かりやすく簡単なところから少しずつつくっていきましょう。わかりやすいところから少しずつつくっていくやり方はゲームやアプリをつくるエンジニアさんもよくやっています。

ステージをつくろう!

それでは早速ゲームを作っていきます。

迷路ゲームにはプレイヤーが動かす主人公がいたり、ステージとなる壁があります。

迷路ゲームのイラスト

ステージの壁をつくる

ではステージの壁からつくっていきましょう。
LEDの光っているところが壁ということにします。

「LED表示ブロック」を使ってステージを作成する
「LED画面に表示」ブロックを使ってステージをつくります。
ステージを作成した後の画面
ステージを作成することができました。

主人公をつくる

次に迷路の中を探索するための主人公をつくります。ステージとの違いを強調するために主人公は明るさを60にして表現します。

変数を作成する
「自分の x 」、「自分の y 」という変数を作成します。主人公の x 座標と y 座標になります。
「変数 自分のxを0にする」「変数 自分のyを0にする」ブロックを「最初だけ」ブロックの中に入れる
主人公の x 座標と y 座標の初期値を指定します。
「LED」の「その他」を選んで「点灯」ブロックを出す。
「LED」の「その他」を選んで「点灯」ブロックを出します。
x 座標に変数「主人公の x 」、 y 座標に変数「主人公の y 」を入れて、明るさを60に変えておきます。
主人公は明るさ60で光らせます。
ステージとプレイヤーを表示させることができて完成しました。

少し暗くなっている左上のマスが主人公です。

最後の画像のようになったでしょうか?ここまででステージに必要な主人公と壁を作成することができました。

主人公を移動させよう!

迷路ゲームでは主人公を動かしてスタート地点からゴール地点に導いていきます。

したがって主人公を移動させる必要があります。主人公を移動する機能をつくってみましょう。

左右の移動と下への移動ができるようにします。

左右移動と下移動をする

主人公を左右に移動させるためにP0ボタンとP1ボタンを使って、下移動させるのにP2ボタンを使います。
主人公は座標を変えることで移動できるようになっています。

押すボタンによって移動の方向を変えます。
ボタンを押して移動させることができました。

これでP0ボタンを押すと左方向に、P1ボタンを押すと右に、P2ボタンを押すと下方向に移動するようになりました。

移動した時の跡が残ってしまっていますので移動の跡を消すようにします。

「消灯」ブロックを使って元々いた位置のLEDを消します。
主人公の位置が分かりやすくなりました。

壁のあるところに進めないようにする

ボタンを押すことで主人公を移動することができるようになりました。

しかし、このままだと壁のあるところにも進めてしまっています。
移動できないように制限してみましょう。

ここは少し難しいので気をつけてください。
ポイントは「行き先が壁」かどうかを判定しているところです。

行き先が壁でない場合だけ、移動するようにします。

上と同様にP1ボタン、P2ボタンを押した場合もつくります。

壁があったら進めないようになりました!

クリア画面とリセット機能をつくろう!

ステージをつくって移動機能をつくってだいぶ迷路ゲームっぽくなってきたんじゃないでしょうか?

あと、必要なのはクリア画面とリセット画面です。
クリア画面からつくっていきます。

クリア画面をつくる

ゴール地点は右下のマスにします。

クリア画面はmicro:bitにある「文字列を表示する」ブロックを使うことで表現してみましょう。

右下のマスに行ったら「CLEAR」を表示する

主人公が右下にいるとき、「CLEAR」の文字を表示するようにします。
実際に右下のマスまで移動してみると…

「CLEAR」の文字が流れてきます。

これで右下のマスをゴール地点にして右下に移動したらクリア画面にできました。

リセット画面

リセット画面を作りましょう。行き止まりになってしまったときにリセットする機能は必ず必要です。

AボタンとBボタンを同時押ししたときにリセットするようにします。

ステージと主人公を元に戻します。

AボタンとBボタンを同時押しして最初からに戻すことができたらリセット機能が正しく作成できています。

ステージを広げよう!

これは迷路ゲームを面白くする応用です。
今はステージが一つしかないのでステージを広げて移動できるようにします。

実際の画面は次のようになります。

ここから下に移動すると
次のステージに行きました!

ステージの変数をつくって移動したらステージの変数を増やすことにします。

ステージという変数を作ります。
主人公のy座標が5ならステージを移動したという判定にします。

主人公を移動させてステージが変更出来たら成功です。

micro:bitも学べる『1DAYプログラミング夏季講習』

>>メディアで話題!micro:bitも学べる『1DAYプログラミング夏季講習』はコチラ

まとめ

いかがでしたでしょうか?今回はmicro:bitで迷路ゲームを作成してみました。シンプルな迷路ゲームですが意外と考えることが多かったですね。

ここにさらに自分でオリジナル要素を加えて宝箱を設置して宝箱を開いたらツルハシが手に入れられて壁を壊せる!なんていう要素を付け加えても面白いかもしれないですね。

micro:bitはマス目が限られていたり、複雑な絵が描けないのでシンプルなゲームになってしまいますが豊かな発想で是非いろんなゲームをつくって遊んでみてください。

※「micro:bit」は Micro:bit教育財団の登録商標です。

コラム