アワーオブコード(Hour of Code)は、無料で利用できるプログラミング学習サイトです。
さまざまな課題をクリアしながら、プログラミングの基本を学べます。
その中でも、ディズニー映画『アナと雪の女王』を題材にした「アナとエルサとコードを書く」は人気の高いアクティビティです。
アナ雪のキャラクターといっしょに美しい氷のもようを作るという内容で、楽しく取り組むことができます。
しかし、角度の知識とわり算が必要になるため、むずかしいと感じる子もいるかもしれません。
そこで、この記事では「アナとエルサとコードを書く」を解くヒントを紹介します。
答えは公開しませんので、ぜひヒントを参考に自分の力でチャレンジしてみてください。
アワーオブコードの使い方は、以下の記事で紹介しています。
- 「アナとエルサとコードを書く」のレッスン一覧
- Lesson1:線を1本かく
- Lesson2:2本の線を90度の角度でかく
- Lesson3:四角形をかく①
- Lesson4:四角形をかく②
- Lesson5:四角形を3つかく
- Lesson6:雪のもよう(四角形を10個かく)
- Lesson7:+をかく
- Lesson8:線を10本かく
- Lesson9:線を90本かく
- Lesson10:ひし形をかく
- Lesson11:ひし形を4個かく
- Lesson12:ひし形を10個かく
- Lesson13:円をかく
- Lesson14:円を10個かく
- Lesson15:円を20個かく
- Lesson16:大きさのちがう円をかく
- Lesson17:小さい円と大きい円を5個ずつかく
- Lesson18:雪のけっしょうのエダを3本かく
- Lesson19:雪のけっしょうをかく
- Lesson20:自由にもようをかいてみよう!
- まとめ
「アナとエルサとコードを書く」のレッスン一覧
「アナとエルサとコードを書く」は、20レッスンあります。
リンクから各レッスンの解説に飛びます。
- Lesson1:線を1本かく
- Lesson2:2本の線を90度の角度でかく
- Lesson3:四角形をかく①
- Lesson4:四角形をかく②
- Lesson5:四角形を3つかく
- Lesson6:雪のもよう(四角形を10個かく)
- Lesson7:+をかく
- Lesson8:線を10本かく
- Lesson9:線を90本かく
- Lesson10:ひし形をかく
- Lesson11:ひし形を4つかく
- Lesson12:ひし形を10こかく
- Lesson13:円をかく
- Lesson14:円を10こかく
- Lesson15:円を20こかく
- Lesson16:大きさのちがう円をかく
- Lesson17:小さい円と大きい円を5こずつかく
- Lesson18:雪のけっしょうのエダを3本かく
- Lesson19:雪のけっしょうをかく
- Lesson20:自由にもようをかいてみよう!
Lesson1:線を1本かく
線を1本かくプログラムを作ります。
「(まえに)うごく(100)ピクセル」ブロックを使いましょう。(まえに)と(100)はそのままでOKです。
ピクセルは、画像を構成する最小の単位です。
テレビやスマホの画面をよく見ると、小さな四角形がならんでいるのが見えます。
実は、画面はたくさんの小さな四角形でできていて、その一つ一つが「ピクセル」と呼ばれています。
ピクセルがたくさんある(解像度が高い)と、画像があざやかではっきり見えます。逆に、ピクセルが少ない(解像度が低い)と、画像があらく見えることがあります。
Lesson2:2本の線を90度の角度でかく
2本の線を90度の角度でかくプログラムを作ります。
「うごく」ブロックと「まがる」ブロックを使います。「まがる」ブロックはエルサから見て右(または左)に曲がるので注意しましょう。
Lesson3:四角形をかく①
4本の線で四角形かくプログラムを作ります。
実行スピードは、ウサギのほうにスライドすると早く動きますよ。
Lesson4:四角形をかく②
「くりかえし」ブロックを使って四角形かくプログラムを作ります。
「くりかえし」ブロックの中に配置されたコードは、指定された回数だけくり返し実行されます。
「くりかえし」ブロックの中には、「前にうごく 100ピクセル」と「右にまがる 90度」ふたつの命令があります。
Lesson3のプログラムを参考に、何回くりかえしたらいいか考えてみましょう。
「くりかえし」ブロックを使うと、プログラムがシンプルで見やすくなりましたね。
また、プログラムの修正がかんたんになります。
たとえば一辺の長さを100ピクセルから200ピクセルに変えたくなった時、Lesson3のプログラムでは4か所修正が必要ですが、Lesson4は1か所の修正ですみます。
Lesson5:四角形を3つかく
四角形を3つかくプログラムをつくります。
「くりかえし」ブロックが二つになりました。
- 内側のくり返し(グレー):「線を1本かいて90度まがる」を4回くり返して四角形をかく
- 外側のくり返し(ピンク):「四角形をかく」「???度右にまがる」を???回くり返す
ひとつ四角形をかいたら、120度まがりましょう。
120度は、円を1周する角度である360度を3等分した値です。
Lesson6:雪のもよう(四角形を10個かく)
四角形を10個かいて雪のもようを作るプログラムをつくります。
考え方はLesson5と同じです。
今回は四角形を10個かくので、360÷10で36度まがります。
Lesson7:+をかく
+の形をかくプログラムをつくります。
後ろに動く時、エルサの向きは変わりません。
動きがイメージできない時は、そのまま実行して確認してみましょう。
Lesson8:線を10本かく
線を10本を放射状にかくプログラムをつくります。
どれぐらい まがればいいか考えてみましょう。
円を1周する角度は360度。今回は線を10本かくので……。
Lesson9:線を90本かく
線を90本を放射状にかくプログラムをつくります。
考え方はLesson8と同じです。
「くりかえし」ブロックを使うと、たくさんの線でも楽にかけますね。
Lesson10:ひし形をかく
ひし形をかくプログラムをつくります。
まがる角度を60度と120度に設定して、くりかえしブロックでかこみましょう。
Lesson11:ひし形を4個かく
ひし形を4個かいて、雪のけっしょうを作るプログラムをつくります。
今回はひし形を4個かくので、360÷4で90度まがります。
Lesson12:ひし形を10個かく
ひし形を10個かいて、雪のけっしょうを作るプログラムをつくります。
考え方はLesson11と同じです。
Lesson13:円をかく
円をかくプログラムをつくります。
何回くりかえせばよいでしょう?
くりかえしブロックの中は、下のような命令が入っています。
- まえにうごく1ピクセル
- みぎにまがる1度
1度ずつまがっていますね。円を1周するには……?
Lesson14:円を10個かく
関数「円をかく」を使って、円を10個かくプログラムを作ります。
関数とは、命令をまとめていつでも使えるようにしたものです。Scratchでいうと「ブロック定義」にあたります。
何度も使いたい命令の組み合わせがあったら「関数」にしておくと便利です。
この問題では、13で作った円をかく処理を「円をかく」という関数にまとめています。
円をかいたら、25ピクセル前にジャンプしましょう。
Lesson15:円を20個かく
円を20個かくプログラムを作ります。
ジャンプすると、ドーナツ状に円がかけますね。
Lesson16:大きさのちがう円をかく
ちがう大きさの円をかくプログラムを作ります。
関数「円をかく」に大きさを指定する「引数」をわたします。
引数とは、関数を呼び出したときに引きわたされる値です。関数は受けわたされた値を元にして処理を行います。パラメータとも呼ばれています。
引数の値を変えるだけで、大きさのちがう円がかんたんにかけます。
Lesson17:小さい円と大きい円を5個ずつかく
小さい円と大きい円を5個ずつかいて、もようを作るプログラムをつくります。
まがる角度の計算は、もう大丈夫ですよね!
Lesson18:雪のけっしょうのエダを3本かく
雪のけっしょうのエダを3本かくプログラムをつくります。
45度ずつまがりましょう。
Lesson19:雪のけっしょうをかく
雪のけっしょうのエダを8本かいて、雪のけっしょうを作るプログラムをつくります。
今回はノーヒントで考えてみてください。
Lesson20:自由にもようをかいてみよう!
自由にプログラミングして、もようをかいてみましょう!
てきとうな色・てきとうな形は、ランダムに色や形が選ばれます。
「〇〇で雪のもようをかく」ブロックは、下のような図形をかく関数です。
私も考えてみました。
まとめ
「アナとエルサとコードを書く」を解くヒントを紹介しました。
アナ雪のアクティビティは少しむずかしい課題ですが、一発で答えを出す必要はありません。
分からない時は、プログラムを実行して動きを確認しながら、色々試してみましょう。
今回紹介したヒントを参考に、自分の力で美しい氷のもようを作ってみてくださいね。
下の記事では、Scratchでアナログ時計を作る方法を紹介しています。「アナとエルサとコードを書く」で学んだことを活かせますよ!
アワーオブコードの他のアクティビティにもぜひチャレンジしてみてください。