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

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


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


土管の画像を読み込み表示する

基本的にはトリのときと同様です。土管は上下に2つあるので画像も2つ用意しています。追加するコードは以下の通りです。また、LESSON#2で解説したようにプログラム実行中に変化させる数値については変数で表しておくと都合がよさそうなので、土管のx座標は最初から変数を使うようにします。(土管は「横」にだけ動くのでとりあえずx座標だけを用意してみます。)


javascript(教材4-1)

追加したコードを解説します。

① dokanUe(上の土管)、dokanShite(下の土管)を扱う変数を用意
② それぞれに画像を読み込みセット
③ 土管のx座標を表すdokanXという変数を用意し、とりあえず500をセット
④ 上下の土管画像を表示、x座標はどちらもdokanX、y座標は上は0、下は適当に300ぐらいにセット
という意味です。


今まで学習した内容で理解できるコードばかりだと思います。とりあえずここまででRunしてみましょう。


実行結果

右の方に土管が表示されれば成功です。当然まだ動いてはいません。上下の土管の隙間もだいぶ大きくあいていますが、これは今のところy座標を適当にセットいているためで、次回のレッスンで調整します。


土管を動かしてみる

これもLESSON2でトリを落下させたときと同じ考え方で実現できそうです。トリは縦に動かしたのでy座標を1ずつ加えましたが、土管は右から左へ横に動かしたいのでx座標を1ずつ減らすことになりそうです。追加するコードは次の通りです。

javascript(教材4-2)

① 土管のx座標dokanXを1減らします。
② (ついでに)土管のスタート位置をキャンバスの幅と同じ値にセットします。
という意味です。

①は解説の通りです。メインループの中の処理なので、例によって1/50秒ごとに土管のx座標が1減らされる、つまり少しずつ左に動いていくことになります。
②はついでに、なのですが、さきほど「とりあえず」500にセットしていた土管のスタート位置を、実際のゲームに合わせてキャンバスの幅=右端のx座標にセットし直しました。これにより表示された瞬間の土管は画面に見えておらず、次の瞬間から画面右端に入り込んでくるようになります。Runして確かめてみましょう。

実行結果

複数の土管を管理したい

さて、一つ(上下一組)の土管だけであればトリがのときと同様に表示し動かすことができました。しかし、このゲームでは複数の土管が次々と現れては流れていくことが必要になります。変数dokanXでは一つの土管しか扱えません。プログラム内で複数の土管を管理するためには複数の変数が必要になりますが、dokan1X、dokan2X、dokan3Xなどと書いていてはキリが無さそうですね。


「配列」という仕組みを使う

このような課題を解決するために多くのプログラミング言語には「配列」という仕組みがあります。javascriptにももちろん用意されています。簡単にいうと変数としてはシンプルにdokanX一つだけでありながら、dokanX[0]、dokanX[1]、dokanX[2]・・・のように添字といわれる番号を[]でつけることで、いくつでも好きなだけ変数を量産できる仕組みです。

まずは、内容は先ほどのコードと同じまま、変数を配列に置き換えるところまでをやってみます。以下のコードです。

javascript(教材4-3)

①の1行目 var dokanX = []; というのが、dokanXを配列として使うよ、という宣言です。続く2行めのdokanX[0]というのが、配列dokanXの1番最初の変数という意味です。配列は0番から始まり、いくつでも追加していくことができます。②では先ほどまでdokanXとしていた部分を単純にdokanX[0]に置き換えています。実行結果は先ほどとまったく同じになるはずです。


土管を量産するロジックを考える

配列の準備ができたところで、いよいよ土管をどうやって量産するか、そのロジックを考えてみましょう。重要なのは、新しい土管を追加するタイミングです。何をきっかけに新しい土管を追加するか。

色々な発想があると思いますが、今回は

前の土管がx座標450の位置まできたら、新しい土管を追加する

としてみたいと思います。450というのは適当(canvas真ん中より少し右あたり)なので、自分の好きなように変えてみてもOKです。

図解すると次のようになります。

①スタート時にdokanX[0]=cvs.widthが設定されている
②dokanX[0]が450になったら新しい要素dokanX[1]を追加する
その後は[0][1]両方を表示・動かし続ける
③同様にdokanX[1]が450 になったらdokanX[2]を追加する
その後は[0][1][2]を表示・動かし続ける、以下同じ



コードはこのように書きます

javascript(教材4-4)

新しい命令がいくつかでてきているのでじっくり解説します。

① forという命令は、同じ処理を何度も繰り返しなさいという意味です。さらに、dokanX.lengthというのが配列dokanXが持っている要素の「個数」を表すので、①全体で、「dokanXの要素の個数分だけ繰り返しなさいと」という意味になります。配列を使う際に、このfor命令の書き方はセットでかなりよく使うので覚えておくとよいでしょう。

② は今まで通り土管の表示と左へ1ずつ動かす処理ですが、dokanXと書いていたところを、dokanX[i]とすることにより、①のfor命令によるループの中で、i番目のdokanXの値を使い、i番目の土管を表示したりx座標を1減らしたりすることができるのうになっています。

③ ifという命令は「もし○○ならば△△しなさい」という意味です。この場合、dokanX[i]が450であれば、配列dokanXに新しい要素を追加しなさいという意味になっています。dokanX[i]==450の部分で等号(イコール)が==と2つ並んでいるのは誤記ではなく、javascriptで「値が等しい」を表すにはこのように書きます。=は代入(値をセットする)意味で使うのでそれと区別するためです。

また、dokan[i].push(cvs.width)のpushという命令は、配列に要素を追加せよという意味です。追加する要素に持たせる値がcvs.width(キャンバスの幅)というわけです。

はじめての命令も多く出てきて、難しかったですね。ここまでをRunしてみましょう。土管が次々と表示されて左へ流れていけば成功です。

for命令については、別連載の【第4話】<for命令>でループ!たくさんのドクロを簡単に並べる【第5話】<for命令>による2重ループで縦横に並べ画面をドクロで埋め尽くすでも詳しく解説していますので補助教材としてご活用ください。

for命令については、別連載の【第6話】<if命令>で条件分岐!ドクロと薔薇を巧みに出し分けるでも詳しく解説していますので補助教材としてご活用ください。



実行結果



今回の教材まとめ

いままでの教材の中で最も難しい内容だったと思います。いまの段階では文法などの細かい知識を覚え込む必要はなく、むしろコードを書いて実現したいことを具体的に分解し、図や言葉にしてみることが重要です。また、今回出てきたコードは色々な場面で利用できる「パターン」です。一つ一つの命令や文法を学習するだけではなかなかこのような実用的なコードを書けるようになりません。まずは「こう使えるんだ」という価値を実体験した上で、必要に応じて正しい文法や知識を身に着けていくことが楽しくプログラミングを学ぶコツです。



Google Ad

Google Ad

Recommend

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

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

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

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

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

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

【JavaScript ハノン】必修パターン①

とりあえずHTML(pタグだけ) See the Pen 最初のHTML by programmingbird (@programmingbird) on CodePen. javascriptは基本 …

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

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

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

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

【プログラミング教材#06】背景表示と衝突判定をしよう

いよいよ完成間近です。今回は背景画像の表示をしたあと、ゲームの重要な要素である衝突判定を実装します。トリが土管や地面にぶつかったらゲームオーバー!その判定をコードでどう表現すればよいのか、じっくり考え …

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