@bigakubu アートとプログラミングがあればいい。

【プログラミング教材#02】トリを落下させよう


前回はゲームで遊んだあと(笑)コードを書いてトリを表示させるところまでやってみました。ついでに「座標」の数字を変えるとトリの位置を変えられることも学びました。今回はこのゲームのポイントでもある「放って置くとトリが落下する」ようにコードを追加していきます。



トリが落下するというのはどういうことか?具体的に考えてみる

「トリを落下させたい」言葉でいうのは簡単ですが、プログラミングをするときには、やりたいことをより細かく、具体的に、考え抜く必要があります。前回のレッスンで「静止しているトリ」は表示できるようになりました。また、座標を変更することで「トリの位置を変える」ことも知りました。「落下させる」ということは、「トリの位置を下の方に動かす」ことなので、座標についてはy座標の値を大きくすればよさそうです。ただし、いきなりy座標を300にするだけだと、まさに前回やりましたが、単にRunし直した時に表示位置が下になってる、というだけだったわけです。落下という「動き」を表現するには、例えば1/50秒ごとにy座標を1増やすというような、一定時間おきにプログラムの中で座標を変化させ続ける処理が必要です。いわゆるアニメーションですね。

「トリを落下させる」
⇒ 「1/50秒ごとにy座標を1ずつ増やす」
※1/50秒や、1というのは適当です。仮です。



実行中に変化させる値は「変数」で書いておく

さて、「1/50秒ごとに」というのが難しそうですが、その前にやっておくことがあります。今回のy座標のようにプログラム実行中に変化させる必要がある値は、コード内に30とか300とか数字で書いてしまうと変えられないので、「変数」というもので書いておきます。具体的には次のようにコードを書き換えましょう。

javascript(教材2-1)

青線の中のコードを追加・変更しましょう。その他は前回と同じコードです。

Runしても結果は前回と同じく、トリが静止しているだけです。varというのはvariable(変数)の意味です。追加したプログラムを解説すると、

toriXという変数に200という値をセット、
toriYという変数に30という値をセットしてね、という意味です。

そして、トリを表示するコードの先ほどまで「数字」が入っていた部分をtoriX,toriYという変数に置き換えています。これで、プログラム実行中にトリの座標を変更しやすくなりました。

プログラム実行中に変化させる値は「変数」で書いておく!

この発想を覚えておいてください。


1/50秒ごとに処理をする、の書き方

いろいろなやり方がありますが、今回はsetIntervalという命令を使ってみます。

javascript(教材2-2)

青線の中のコードをさらに追加しましょう。以下同様です。

先に最後の行の解説です。

setInterval(loop, 20);
⇒ loop という名前の処理を20ミリ秒ごとに実行しなさい、という意味です。

ミリ秒という単位は1/1000秒のことです。つまり20ミリ秒=1/50秒ですね!ところで「loopという名前の処理」とは何でしょうか?そこで、先に追加したコードの解説です。

function loop() { …処理… }
⇒ { }の中に書いてある処理に loopという名前を付けるよ、という意味です。

つまり、今までトリの表示をさせていたコードにloopという名前を付ける(※)ことで、先ほどのsetInterval命令で呼び出せるようにしたわけです。※ 正しくはユーザー定義関数といいます。

Runしてみてもよいですが、残念ながらまだ何も目に見える変化はありません。実際には1/50秒ごとにトリの表示がされているのですが、同じ位置に同じトリを表示し続けているので、見た目にはなにもわからないのです…。


y座標を1ずつ増やす、の書き方

あとは、loopの中でトリを表示させたあとにトリのy座標つまりtoriYを1増やす処理を書き足せばやりたかったことはすべて完了!トリが落下してくれそうです。次のように、プログラムにあと1行追加してみましょう。

javascript(教材2-3)

追加した1行の意味は、

toriY = toriY + 1
⇒ toriY に toriY+1 の答えをセットせよ、という意味です。

算数では普通、=の左右は同じ大きさという意味になるので少し変な感じがするかもしれませんが、プログラミングでは=記号は

A = B
⇒ AにBをセットせよ、という意味

なのです。例えばもしtoriYが2だったとすると、この処理によりtoriYには新しくtoriY+1つまり2+1なので3という値がセットされることになります。そして、1/50秒後にまたこの処理が行われると、3+1の4という値がセットされます。これで目的だった「トリのy座標を1増やす」が実現できたことになります。さあ、Runしてみましょう。うまくトリが落下しているか?

実行結果

なんということでしょう!アニメーションというか変化が起きた点は大成功ですが、トリが落下というより、ベーっと下に伸びていく感じになってしまいました。原因はなんだかわかりますか?


1/50秒ごとにcanvasをリセットする処理を追加

そうです。前のトリを消さずにそのままy座標を1増やして位置を下げたトリを重ねて表示し続けたために、こうなってしまったのですね。これを解決するためには、トリを表示する前にcanvasをリセットすればよさそうです。canvasをリセットするという命令はないため、「canvasいっぱいのサイズの白い長方形を描く」という方法をとります。追加するコードは以下の通りです。

javascript(教材2-4)

追加したコードを簡単に解説すると

ctx.fillstyle = “#fff”;
⇒ 塗りつぶし色を”#fff”(白)にしなさい
ctx.fillRect(0,0,cvs.width,cvs.height);
⇒ 左上座標が(0,0)、横幅がcvs.width(canvasの横幅)、高さがcvs.height(canvasの高さ)の長方形で塗りつぶしなさい、という意味です。

色の指定の仕方や、図形の書き方については別の機会で解説をします。今回はこの通りに使ってもらえればOKです。これで、1/50秒ごとにトリを表示する前に画面を真っ白にリセットできるようになりました。さっそくRunしてみましょう。

実行結果



今回の教材のまとめ

無事、トリを落下させることができました。今回学んだ色々なjavascriptの命令やテクニックはもちろん、やりたいことを細かく、具体的に分解して考えていく発想は、プログラミングをする上で非常に重要です。次回以降、少しずつ難しくなっていきますので、まずは今回のレッスンの内容をしっかり復習しておいてください。



Google Ad

Google Ad

Recommend

【プログラミング教材#04】土管を表示して動かしてみよう

前回までの教材でトリについては一通り必要なコードを書くことができました。今回からもう一つの主役である障害物「土管」を表示させたり動かしたりしてみます。表示や動きの考え方はトリと同じですが、土管は複数同 …

プログラミング教材・指導案

【プログラミング教材#01】まず「ほぼ完成版」で遊んでみよう!

今日のレッスンの前半は、なんとゲームで遊ぶこと!簡単操作だけどなかなか難しいこのゲームで何点とれるか?競い合ってみましょう。レッスン後半では、JSFiddleというプログラミング練習画面を使って、さっ …

プログラミング教材・指導案

【プログラミング教材#03】クリックでトリを浮上させよう

前回の教材では1/50秒ごとにトリのy座標を1ずつ増やすという処理を追加することにより、放って置くとトリが少しずつ下に落ちていくという仕組みを実現しました。このままではゲームにならないので、今回はクリ …

プログラミング教材・指導案

【序文】ゲーム作りは実用的スキルとプログラミング的思考を身につける絶好の教材!

プログラミングなんて自分もやったことないのに、児童生徒たちに教えなくてはいけなくなった。そんな先生へ提案です。プログラミング言語javascriptを使ってゲーム「Flappy Bird」を作ることを授業のテーマにしましょう。ゲームプログラミングは実用的なスキルとプログラミング的思考を身につける絶好の題材です。いきなりゲーム作りなんて難しそう、と思うかもしれません。確かに簡単ではないですが、このサイトでは「教える人」の視点に立った詳しい解説や教材・教案準備に応用しやすいテキストや画像、そしてプログラムのサンプル素材を多く提供しますので安心して始めてみてください。

プログラミング教材・指導案

【プログラミング教材#05】土管の高さをランダムにしよう

前回の教材でゲームの重要な要素である土管を次々と表示し動かすことができました。今回は土管一つ一つの高さをランダムに変化させることにより、ゲームにバリエーションを持たせてみましょう。ランダム性はプログラ …

プログラミング教材・指導案