映画「アナと雪の女王」アナ、エルサと一緒に複雑な図形を描く (1/6)

2016年11月12日 17時00分更新

文● 小野哲生　編集●吉田ヒロ

　前回に引き続き、オンラインでプログラミングを学べる「code.org」のサイトを利用して、プログラミングの基礎を解説していきます。今回は、「アナとエルサのコーディング」コースのパズル6～10までを進めていきます。

パズル6：四角形を10個描いて雪の結晶を作る

　パズル6では、繰り返しブロックを使い四角形を10個描いて雪の結晶を作ります。今回は、四角形を描くことができる繰り返しブロックと「右に向く ??? 角度」ブロックがすでに用意されています。

　まず、「右に向く ??? 角度」ブロックの「???」をタップして、角度を選択する図を表示させましょう。

　今回は、36度にするように上に書いてあるので、36になるまで丸い部分を時計回りにドラッグして設定します。

　次は、「ブロック達」から「繰り返し ??? 回してください」ブロックを「実行した時」と用意されていた繰り返しブロックの間にドラッグ&ドロップで挿入します。

　四角形を繰り返し描いて雪の結晶にしたいので、「繰り返し 4回してください」ブロックをドラッグ&ドロップして先ほど追加した「繰り返し ??? 回してください」ブロックの中に挿入します。このとき、繰り返しブロックの下につながっている「右に向く 36 角度」も一緒に移動します。

　外側の繰り返しブロックの「???」をタップして回数を指定しましょう。

　今回は10個の四角形を描くので10を選びます。

　完成したら「実行」ボタンをタップしてみましょう。

　10個の四角形で雪の結晶を描き、パズル6をクリアできました。

　今回は、いつものクリア画面と異なり共有するためのリンクが生成されています。これをコピーして開いてみましょう。

　下図がブラウザー右上の「＋」ボタンをタップして新規タブを開き、先ほどのリンクを開いたところです。

　「実行」ボタンをタップしてみましょう。クリアしたパズル6の雪の結晶をアナが描きます。

　今度は、右側の「仕組み」というボタンもタップしてみましょう。今回作成したブロックが表示されます。

　「ログイン」の下にある「</> コードの表示」ボタンをタップしてコードを確認してみましょう。コードは下のようになっています。

for ( var count2 = 0; count2 < 10; count2++ ) {
　for ( var count = 0; count < 4; count++ ) {
　　moveForward( 100 );
　　turnRight( 90 );
　}
　turnRight( 36 );
}

　まず、外の繰り返しの変数count2が0のときに中の繰り返しが実行されます。中の繰り返しの変数countは外の変数の影響を受けないので、moveForward( 100 );で前に100ピクセル動きturnRight( 90 );で右に向くのを4回繰り返して四角形を描きます。中の繰り返しが終了すると、その下のturnRight( 36 );が実行されて右に36度向きを変えcount2に1を足して、外の繰り返しの1回目が終了します。

　count2が1で2回目の繰り返しが実行され、四角形を描いて36度向きを変えcount2に1を足すというのを繰り返していきます。count2が9で10回目の繰り返しが実行され、四角形を描いて36度向きを変えcount2に1を足します。この時、外の繰り返しはcount2 < 10の条件式と合致しなくなるため、繰り返しを終了します。

　元のタブに戻って、パズル7に進みましょう。

前へ 1 2 3 4 5 6 次へ