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

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


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



背景を表示しよう

いままで真っ白だった背景をいよいよゲームっぽく描いていきます。今回は3つの要素を用意しました。

  • 空 ⇒ 画像ではなくコードで背景色を指定して表現します
  • 雲や町並みや樹々 ⇒ 1枚の背景画像を用意して表示します
  • 地面 ⇒ 画像ですが、これは衝突判定にも使用します

コードはシンプル、次のとおりです。※追加する部分のみ掲載します。

javascript(教材6-1)

①ここまではもうおなじみですね。haikei(背景)とjimen(地面)という変数を用意し、そこに画像をセットしています。

javascript(教材6-2)

このあたりもすでに慣れたものでしょう。②はカラーコード(#A4D9EE)を指定して空色の長方形でキャンバスの背景を塗りつぶしています。③では地面の画像を表示しています。y座標の決め方など、前回レッスンの復習をかねて自分でよく確かめてみてください。ひとまずRunしてみましょう。

背景が表示されたことで、ぐっとゲームらしくなりましたね!


衝突判定のロジックを考える

さて、いよいよ今回の本題、衝突判定です。まずはロジックを考えてみましょう。障害物は「土管」と「地面」です。特に土管がやっかいそうですので、まず横方向(x座標方向)と縦方向(y座標方向)に分けて考えてみましょう。

横方向(x座標)についての図解

横方向についてだけを考えると、上の2つの状態のトリはどちらも「衝突してないギリギリの位置」にいることになります。衝突している場合には、絶対に、これよりちょっとでも内側(グレーのゾーン)に入っているはずです。いわゆる必要条件というものです。

数式で表現するなら、①+②≧ かつ ⑥≦③+④ となります。

補足ですが、③+④をすることで⑤の長さを計算しています。


縦方向(y座標)と地面についての図解

続いて縦方向だけについて考えます。土管との必要条件は何でしょうか。上の図でグレーのゾーンにトリが少しでも入ってしまうことですね。また、土管とは別に地面に触れても衝突とみなしゲームオーバーにしたいので、こちらも数式で表してみましょう。

①≦②+③ もしくは ①+⑤≧②+③+⑥ ・・・・・・土管との衝突
①+⑤≧⑦−⑧               ・・・・・・・・・・・・・・・・・・地面との衝突

となります。②は負の数になっていることに注意してください。②+③をすることで④の長さを計算しています。


コードではこう書く!

以上をコードで表現してみます。ここでもif命令を使って、条件分岐をさせています。

javascript(教材6-3)

①の部分では、さきほど図解したことをそのままコードで表現しています。&&記号は「かつ」、||記号は「または」を表します。

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

&&記号や||記号(論理演算子)については、別連載の【第8話】「剰余(割り算のあまり)」を活用したデザインパターンでも詳しく解説していますので補助教材としてご活用ください。


また、衝突と判定されたときに、ゲームオーバーにするために、メインループを止める処理をしたいので、ループを明確にするために、②でsetInterval命令をgameという変数に入れておきました。


ほぼ完成したフラッピーバード風ゲーム

ここまでのコードで最初にプレイしたほぼ完成版ができあがりました。Runしてみましょう。



今回の教材のまとめ

ここまでおつかれさまでした。まったくゼロの状態から自分で一文字一文字コードを入力しながら、ゲームを(ほぼ)完成させました。今の段階ですべての理屈を正しく理解する必要はありません。むしろ、ゲームのような「成果物」を作る場合に、どのような順序でどうやって発想し、コードを組み立てていくか、その成功イメージを体験してもらえたことに意義があると思います。

最初から完成版のコードをコピペして動かしただけでは何も得られません。初心者こそ、コードを手入力する、というある種原始的な行為をしてみてはじめて、一つ一つのコードの意味を考え、興味を持ち、調べて…そういうモチベーションが生まれると思います。

この体験をきっかけに、自分の思い描いたゲームやアートやツールをプログラミングで実現する楽しさにはまっていただけたら嬉しいです。



Google Ad

Google Ad

Recommend

no image

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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