AOYAMA Koji's PROGRAMMING BLOG

ボールを上下左右の壁で跳ね返すプログラミング

2020/05/03

　外出自粛の中、自動車税の通知書が届き 「うわ、これはさすがに出かけないとダメか」 と思ったら、今はネットで支払えるのですね。 超便利。 クレジットカードで支払って妻に報告したら「いつもインターネットバイキングで払っているよ」と言われて。 結構前からできていたのですね。恥ずかしながら知りませんでした。 ただしバンキングね(ボソッ
　外出自粛で家のことを少しは自分もするようになって知識が増えました。 というかゲーム開発以外のことを知らなすぎでしたね。 先日も近くのスーパーでカレー用の肉がだいたい250g単位で売られていると気づいて、 それがカレールーのレシピに多い250gおよび500gに合わせているのだと気づいて感動しました。 工夫はいたるところにあるのですね。
　さて今回は、ボールを動かすプログラムはすでにある状態で、 跳ね返りの部分をプログラミングしてみたいと思います。


まずはボールの動きの確認から


　まず最初にゲームスタートボタンを押してみてください。 何も手を加えていないときの挙動を確認してみましょう。 ちなみにまだ今回はまだゲームと呼べるものでは無いですけれど雰囲気でボタン名は「ゲームスタート」にしてみました。
　結論から書くとボールが右下に動いて、その後這うように右に進んで、右下で止まれば成功です。

waiting...



壁にぶつかったときに呼ばれるプログラム


　上の白い枠は、プログラムが書けるようになっています。 今回の記事ではボールが壁にぶつかったタイミングでそのプログラムが実行されるようになっています。 それではまず、
g.dirY = "上";

と枠内書いて、プログラムを書いて「ゲームスタート」を押してみてください。 コピー＆貼り付けでも大丈夫です。 実行後は下の壁にぶつかって上にうまく跳ね返れば大成功です！ その後は右の壁にぶつかって上に這うように進んで止まってしまうでしょうが、そこは今は気にしないでください。

上下左右に動かすための変数


　今回の記事では以下の変数を用意しました。 変数というのは値を入れるための入れ物のことです。
変数名値初期値意味
g.ballX0から480240ボールのX座標(横の位置)
g.ballY0から256128ボールのY座標(縦の位置)
g.dirX"右"または"左""右"左右の進む方向
g.dirY"上"または"下""下"上下の進む方向

「=」(イコール)は右の値を左の変数に代入


　前述の「g.dirY = "上"」は、変数g.dirY に "上" という値を入れる処理になります。 「=」(イコール)は右の値を左の変数に入れる処理になります。 プログラムのイコールは算数や数学とは少々違うので注意ですね。

g.dirXとg.dirYの値に従ってボールが動く


　今回の記事内では、g.dirX と g.dirY の値に従ってボールが動くようになっています。 最初は g.dirXが "右"、g.dirYが "下" なので、右下に進みます。 下の壁にぶつかったときに「g.dirY = "上"」のプログラムが実行されてg.dirYが "上" になり、 g.dirXは"右"のまま変わらないので右上に進みます。

条件を入れて上下に跳ね返してみる


　最初は下の壁にぶつかりますが、その先を見据えた場合、どの壁にぶつかったかによって方向も変えなければなりませんね。 まずは上下の壁を判断してみましょう。
if ( g.ballY == 0 ) {
  g.dirY = "下"
}
if ( g.ballY == 256 ) {
  g.dirY = "上"
}

　さきほどのプログラムを消して、このプログラムを枠内に書くか貼り付けてゲームスタートしてみてください。 ちょっと変…かも知れませんが、上下には跳ね返っていますよね？

条件が満たされたときのみ処理するif


　プログラムでは条件が満たされた場合に限り処理することもできます。 利用するにはifという機能を使用します。 書き方は以下の形です。
if ( 条件 ) {
  処理
}

　こう書いて条件が成立したとき中の処理を実行するというプログラムになります。 逆に言えば、条件が成立しなければ中の処理は実行されません。

「==」は同じか調べる機能


　「==」(イコールイコール)は、その左右が同じかどうか調べます。 つまり「g.ballY == 0」は、g.ballYが0かどうかを調べるということになります。

条件に従って上下に方向転換


　つまりプログラムを再掲しますが、
if ( g.ballY == 0 ) {
  g.dirY = "下"
}
if ( g.ballY == 256 ) {
  g.dirY = "上"
}

　これは、g.ballYが0ならg.dirYを "下" に、g.ballYが256なら "上" にする処理ということになります。

2次元ゲームのY座標は上が小さい


　g.ballYは、0が上の端、256が下の端のため、これで上下の壁で跳ね返るようになります。 2次元ゲームのY座標は通常、上端が0、下に向かって大きくなります。 数学の座標をご存知の方は、それと上下逆なので、このあたりも注意が必要ですね。 3次元になるとまた変わるのですけれど。

左右に跳ね返す処理も加える


　もう左右に跳ね返すプログラムは書けますか？ ちなみに左端は0、右端は480、変数はg.ballXとg.dirXです。
if ( g.ballX == 0 ) {
  g.dirX = "右"
}
if ( g.ballX == 480 ) {
  g.dirX = "左"
}

まとめ


　今回のプログラムの全体を以下に書いておきます。 これで「ゲームスタート」を押して、画像のように上下左右の壁で綺麗に跳ね返れば大成功です。 お疲れさまでした！
if ( g.ballX == 0 ) {
  g.dirX = "右"
}
if ( g.ballX == 480 ) {
  g.dirX = "左"
}
if ( g.ballY == 0 ) {
  g.dirY = "下"
}
if ( g.ballY == 256 ) {
  g.dirY = "上"
}

補足

・今回使用しているプログラミング言語はWeb業界で一般的に使われる「JavaScript」です。
・例えば「g.ballX == 480」は、本番なら私は「480 <= g.ballX」と書きますが、想定外のことが起きなければ不等号はいらないので今回の形としました。
カテゴリー：メガホンDEポン,プログラミング,JavaScript
著者プロフィール
青山公士(あおやま こうじ)
中学2年生からゲームプログラミングに明け暮れる。ゲーム開発者としての代表作に「スーパー桃太郎電鉄II」(ハドソン)メインプログラマー、[PR]『ドラゴンクエストX　オンライン』(スクウェア・エニックス)テクニカルディレクター/プロデューサーなどがある。[PR]「ドラゴンクエストXを支える技術」(技術評論社)著者。本ブログは今までの経験を活かしプログラミングが楽しいと感じる人が少しでも増えるようなものにしたい。 @kojibm
株式会社ロジック推し
推し情報を論理的にわかりやすく紹介することで「世の中をちょっと楽しく」をミッションに活動中。 HP X Instagram
privacy policy
ピックアップ
Loading...
最新記事
Loading...
関連記事
Loading...