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

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


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


まず上の土管のy座標を決める

まずy座標についても配列を用意し、複数の土管のy座標を管理できるようにします。前回書いたコードで新しい土管のx座標を「push」したときと同様に、y座標も「push」しますが、その時にy座標をランダムな値にすることにします。追加するコードは次のとおりです。


javascript(教材5-1)

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

① 新しくdokanYという配列を用意し、最初の要素dokanY[0]に0をセットします(ここはランダムではないことにします)
② 上の土管表示部分のy座標をdokan[i]に置き換えます
③ 新しい土管を追加する部分に、dokanYも追加し、新しい要素のy座標としてランダムな数をセットします

ポイントは③です。まず、Math.random()は「乱数」を表す関数で、0〜1の間のランダムな数(0.003とか0.98とか…)を返します。これにdoanUe.height(上の土管画像の高さ)をかけ合わせています。つまり、最小で0〜最大で土管画像の高さいっぱいという幅の間の何かしらの数が答えとして出てきます。さらにMath.floor()で囲むことで、小数点以下の端数を切り捨て「整数」にしています。その後さらにdokanUe.heightを引き算している理由については、次項でまとめて説明します。

Math.random()については、別連載の【第9話】乱数を使ってランダムにドクロと薔薇を表示するでも詳しく解説していますので補助教材としてご活用ください。


まずはここまででRunしてみましょう。


実行結果

これで上の土管についてはすべて長さがバラバラになったと思います。下の土管はまだ同じ長さですね。

下の土管の位置を決める

次の図を見ながら、コードを入力してください。※①②などの番号は図中とコードで連動していません。

javascript(教材5-2)

コードの解説です。

①で新しい変数sukimaを100に設定しています。②でdokanY[i](上の土管のy座標)に上のdokanUe.height(上の土管の高さ)とこのsukimaを足しています。

図で確認してみましょう。上の土管のy座標(図③)と上の土管の高さ(図①)を足すと、図②の長さが求められます。画面上に出ている上の土管の長さですね。これに図④の隙間の長さを足すことで図⑤の通り下の土管のy座標が算出できるということです。


今回の教材のまとめ

乱数を使ってランダムな要素を取り入れました。ゲーム作りやプログラミングでのデザイン制作などにおいて、ランダムな要素は大きな武器になります。しっかり身につけましょう。

同時に、計算(といっても足し算引き算だけですが)を組み合わせて必要な座標を求める方法を学習しました。コードだけ見ると複雑そうですが、ゆっくり考えればシンプルな計算です。少し迷ったときは自分で図を描いてみる習慣をつけるとよいでしょう。



Google Ad

Google Ad

Recommend

no image

【プログラミング超入門#1】

STEP#01 ブラウザでJSFiddleをひらく! 先生向けの解説 JSFiddelは、、、 STEP#02 HTMLを書く!(たった1行) See the Pen 最初のHTML by progr …

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

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

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

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

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

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

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

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

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

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

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

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

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