フロントエンド

【プロセッシング】簡単なゲームをつくってみた その3 リファクタリングと当たり判定【P5.js】

プログラミング初心者向けにオススメな『P5.js』を使った

プログラミング実況動画、第3弾です。今回ラストです。

前回までの記事はこちら。


 

 

今回の動画はこちら。

今回は大きく3つの内容を扱っています。

  • リファクタリング
  • ゲームオーバー
  • 当たり判定
アオキ
個人的にはとっても勉強になる内容になっていました。
Sponsored link

プロセッシング簡単なゲーム実況 リファクタリング

プログラムはよくもわるくも自由に書けてしまうので、

書き続けていくにつれどうしても、

どんどんどんどん複雑になってきます。

書いた本人ですら、どこに何を書いたやら、という状態になってしまうことも。

ぐちゃぐちゃなコードのことを『スパゲティコード』と読んだりします。

表面上の動作はそのままにしつつも、

裏側のスパゲティなコードを少しずつ紐解いて、

整理整頓して、読みやすく、数ヶ月経った後からでも思い出せるような状態にすることを、

『リファクタリング』と読んだりします。

『リファクタリング』・・コードを整理整頓すること

『リファクタリング』の内容はたくさんあるのですが、
代表的なところだとこのあたりかと思います。

  • 変数名・関数名を意味がわかる名前にする
  • 変数名は名詞、関数名は名詞+動詞
  • 配列なら複数形にする
  • 1つの関数を行数を短めに(スクロールしないで見れるくらい)
  • 関数が増えてきたらクラスに分ける(クラスのサイズ感も気にしつつ)
  • if, else文はできるだけelseは使わない
  • if 文の中のif文はできるだけ少なく
  • 関数のコメントは簡潔に(インプットとアウトプットくらい)

高度な書き方というよりも、
とにかくわかりやすい、
第3者が見ても読みやすいコードを書くという意識が大切になってきます。

アオキ
『リファクタリング』も慣れだし、何回もやってちょっとずつ覚えてくるもんだと思います。

プロセッシング簡単なゲーム実況 ゲームオーバー

『リファクタリング』をやった後に『ゲームオーバー』の処理を。

今回のゲームオーバーの方法は大きく2つあって、

  1. 画面下にあたったらゲームオーバー
  2. ブロックにあたったらゲームオーバー

まずは簡単な1の方から。

今回の画面(キャンバス)はY軸が600になっているので、

600より多いかどうかという判定をかけて、

プレイヤーが生きているかどうかをチェックしています。

この関数名がわかりやすくていいですよね。

drawGameoverScreen() という関数名で、
ゲームオーバー画面も簡単につくれています。

Ctrl + F を押して、関数名を検索する練習もしておくといいかなと思います。

あとは、
スペスミスがあるとうまく動かないので、
スペルミスがないように、最初は慎重にコードを書いていくといいかなと思います。

英語をやっておくとスペルミスに気付きやすくなったりします。

Sponsored link

プログラミング実況 当たり判定

当たり判定の実装方法はいろいろあるようですが、最も簡単な方法で。

自分のキャラクターの半径とブロックの半径を足して、
大きかったらOK
少なかったら当たっている、ということになります。

entitiesAreColliding という関数を作っていますが、
コメントの書き方含め、勉強になる書き方だなぁと思います。

動画の中で間違えていたのですが、

絶対値は、abstract(アブストラクト)ではなくてabsolute(アブソリュート)でした。。

アオキ
つい最近まで『PHP』のクラスをやっていたので『アブストラクト』と出ちゃったと思います、失礼しました。。

動画を再アップするか一瞬だけ迷ったんですが、
再エンコーディングは1時間くらいかかってしまうので、

それよりも追加動画をもりもりあげようということでこのままでいくことに。

アオキ
次回からはもっと事前にチェックするようにいたしますよって。

プログラミング実況 編集時間を減らす

動画をアップするものの、なかなか再生回数が伸びず、

何か足りないところないだろうかとググりにググり、
改善できそうな箇所が2箇所ありました。

  • 動画の数
  • 動画のクオリティ(明るさ・テンション)

顔出し動画に切り替えてからまだ6本ということで、
まだまだ全然足りないと。

まずは最低30本、最低50本を目標にあげ続ける必要があるようで。

編集にかける時間を少し減らして、動画の数を増やしていこうと思い、
この動画から編集にかける時間を少し落としています。

アオキ
よっぽどへんな間がない限りはそのままにしています。

プロセッシング簡単なゲーム実況 明るさとテンション

次は明るさ。

動画の顔が若干くらいかなぁと奥さんに聞くと、うん、暗いと。
ということで早速ググってリングライトポチり。

やっぱり暗いよりは明るいほうがいいよね、ということで早速ポチりました。

購入した『リングライト』はこちら。

三脚付きの大きめの『リングライト』もあったんですが、
机の上に置く前提なら小さくてもいいかなということでこのサイズに。

どうやらメイクアップの動画などに使われるようですが、
多少でも明るく見えるなら御の字ということで。

テンションについて、
朝4時からテンションをあげるというのはなかなか難しいところではあるのですが、
見ている側的にはそんなん関係ないよなぁということで、
ちょっとずつでも、普段の会話に近くなるよう、喋りまくらないとなぁと思っております。

アオキ
これまた慣れですよね、喋りまくるべし。
Sponsored link

プロセッシング簡単なゲーム実況 とにかく継続あるのみ

今後もよりよいプログラミング動画を上げていきたいと思っていますので、

ぜひぜひチャンネル登録をお願いできればと思います。

Youtubeもんプロチャンネル

アオキ
リングライト届き次第また動画撮影していきますー

関連記事一覧 (一部広告あり)

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


最近の記事

  1. アート

    サイエンス×アート のおすすめ本【子どもと一緒に読みたい本】
  2. オンライン教材

    【Vue.js】初心者向け講座をリリースしました。【Udemy】
  3. オンライン教材

    【Laravel(PHP)】初心者向け アプリのつくり方 をリリースしました【t…
  4. オンライン教材

    【PHP/Laravel】初心者向けの動画をリリースしました【Udemy】
  5. 数学

    【三角関数】とは わかりやすくまとめてみた【動画あり】
PAGE TOP