アナとエルサを動かして氷の上にきれいな図形を描く

「Minecraft Hour of Code」(マインクラフト アワー・オブ・コード)の記事でも紹介したHour of Codeのサイトで公開されているプログラミング教材の1つに、映画「アナと雪の女王」のアナとエルサが登場する「Code with Anna and Elsa」(コード ウィズ アナ アンド エルサ)があります(無料で利用できます)。

全20本の「パズル」があり、テーマは「図形を描く」こと。アナとエルサを動かして、氷のうえに課題どおりの図形を描くようにプログラミングしていきます。図形や角度の概念が要求されるので、すべてを理解できるのは小学校中学年以上が目安となるでしょう。

しかし、プログラム中に設定できる選択肢が限定され、やさしいヒントも出されるため、もっと低い年齢の子どもでもクリアは可能です。もちろん親子で楽しんでもいいでしょう。アナやエルサを自分のプログラムで動かして、思いどおりの図形が描けたときの感激は、なかなかのものです。

Code with Anna and Elsaを始める

Code with Anna and Elsaを始めるには、パソコンやタブレット、スマートフォンのブラウザーで以下のページを開きます。最初に表示される動画による説明が終了したら[×]をクリックして閉じましょう。

▼Code with Anna and Elsaのページ(パズル1)
Code.org - アナとエルサとコードを書く
1パズル1を開始する

パズル1が開始になりました。表示されたパズルの課題を確認し、ツールボックスのブロックをワークスペースに動かしてプログラムを作ります。できあがったらゲームスペースの[実行]をクリックしましょう。

2プログラムを作り、実行する

最初のパズルはブロックを1つ使うだけ。実行するとエルサが実際に動いて線を描きます。

3パズル1を完了した

課題どおりのプログラムを実行できると、完了のメッセージが表示されます。[次へ]をクリックして次のパズルに進みましょう。

パズル2~9の紹介

パズル2:曲がる

パズル2では途中で90度曲がった線を引きます。「90度の角度で」と課題が出ますが、右か左かだけ理解していれば大きな問題はありません。

パズル3:複数回曲がって四角形を描く

パズル2のプログラムにブロックを加えて、今度は四角形を描きます。同じブロックを何度も使うことになります。

パズル4:「繰り返し」を使って四角形を描く

パズル4ではアナが登場します。ここでは、パズル3と同じ四角形を描く動きを「繰り返し」ブロックを使ってシンプルに実現することを学びます。

パズル5:「繰り返し」を重ねて3つの四角形を描く

描く四角形が3つに増えます。しかし、「繰り返し」を使えば数が増えても処理は簡単。パズル4で行った四角形を作る動きを角度を変えて繰り返すだけです。最初から繰り返しを重ねるブロックは設置されているので、回数と角度を設定します。

パズル6:さらに多くの四角形で「雪の結晶」を描く

パズル5の応用で「雪の結晶」を描きます。繰り返しのブロックが重なっていないので自分で配置して、角度と回数を適正に入力します。

パズル7:十字を描く

再びエルサに戻り、「+の形」になる4本の線を描きます。やり方はここまでの応用で考えられます。

パズル8:10本の線を描く

パズル7の応用で、今度は10本の線を描きます。ブロックに最初から必要な角度が設定されているので、クリアーが難しいということはありません。親子で説いて、図形について理解を深める機会にしてもいいでしょう。

パズル9:90本の線を描く

今度は90本(!)の線を引く必要があります。ここでは角度の設定がキモですが、ヒントと用意された選択肢を見れば、答えはおのずとわかるでしょう。
このパズルの実行には大変な時間がかかります。ゲームスペースにあるウサギとカメのアイコンが描かれたバーを左右に操作することで、エルサの動くスピードを調整しましょう。

小刻みにステップアップして学べる

ここまでで前半は終了です。全20本ですが、パズル10からは少し趣が変わります。ここまで見てきたように、パズルとしての難度は高くありませんが、「なぜ、このような動きをするのか?」と考えるとけっこう複雑で、図形や角度について理解を深めるいい機会にもなっています。

▼パズル10からはこちら
「アナと雪の女王」でプログラミング。「雪の結晶」作りに挑戦!(後編)

HINTパズルを中断するには

Hour of Codeの教材(チュートリアル)では、パズルごとにURLが設定されています。中断したいパズルを「お気に入り」に追加しておけば、いつでもそのパズルから開始できます。

HINTパズルが不正解だったときは

[実行]したパズルが間違っていたときは、[不正解です]というメッセージが表示されます。[リセット]をクリックして、ブロックの配置をやり直しましょう。[最初からやり直す]をクリックするとブロックの配置を初期化できます。

[不正解です]と表示されたときは、[リセット]でゲームスペースを、[最初からやり直す]でワークスペースを初期化してやり直せます。