右の絵をラケットに使用して出してみましょう。
ラケットの大きさは、横が64ピクセル。縦が16ピクセルです。 ボールの時と同じ様な計算です。つまり、横すなわちＸ座標は、 左マージン(16)＋壁の厚さ(8)＋空間の半分(256/2)－ラケットの横幅の半分(64/2)で 120 になります。 一方縦すなわちＹ座標は、 上マージン(16)＋壁の厚さ(8)＋空間(256)－ラケットの縦幅(16)で 264 になります。
|
|
右の絵をラケットに使用して出してみましょう。
ラケットの大きさは、横が64ピクセル。縦が16ピクセルです。 ボールの時と同じ様な計算です。つまり、横すなわちＸ座標は、 左マージン(16)＋壁の厚さ(8)＋空間の半分(256/2)－ラケットの横幅の半分(64/2)で 120 になります。 一方縦すなわちＹ座標は、 上マージン(16)＋壁の厚さ(8)＋空間(256)－ラケットの縦幅(16)で 264 になります。なお、前章ではボールの跳ね返りＹ座標を「とりあえず」右端と同じ264としていましたが、 改めて計算しましょう。 ラケットの座標が264になりました。 これはラケットの上端の座標なので、そのまま跳ね返り座標になります。 もう少し正確には、ボールの下端の跳ね返り座標が 264 ということです。 ボールのＹ座標は上端のため、ここからボールの縦幅分だけ上げる(＝引き算する)必要があります。 264－ボールの縦幅(16) の結果 248 が正確な、ボール上端の跳ね返り座標となります。
<!-- ラケットレイヤー --> <div id=lyrracket style="position:absolute; left:120px; top:264px;"> <img src=bb03.gif> </div>
マウスの座標
さて、ラケットはマウスで動かす事にしましょう。 マウスの座標を取得する方法を忘れてしまった方は こちらをもう一度ご覧ください。
この方法を使うと、変数 mousex と mousey に 現時点でのマウスの座標が入っている事になります。ラケットの移動
ラケットを動かすには、 マウスの座標を取得して絵の座標を設定すればできます。
でも、ちょっと待って下さい。 ラケットは左右だけに動くようにして、上下には動かない様にしましょう。 それから、左右は壁をはみ出ると変になりますので、左右の制限も必要です。 左端は、左マージン(16)＋壁の厚さ(8)で 24。 右端は、左マージン(16)＋壁の厚さ(8)＋空間(256)－ラケットの横幅(64)で 216 です。
更に、マウスのＸ座標をそのままラケットのＸ座標にしちゃうと、 ラケットの左端がマウスの位置という事になってしまいます。 だから、マウスのＸ座標(mousex)からラケットの横幅の半分(32)を 引いた数値を、ラケットのＸ座標(racketx)にする事にします。
var racketx; // ラケットのＸ座標 var rackety; // ラケットのＹ座標 // // 中略 // racketx = mousex - 32; // マウスのＸ座標を中心として代入 rackety = 264; // Ｙ座標は固定 if ( racketx < 24 ) { racketx = 24; // 左壁をはみ出さないように } if ( 216 < racketx ) { racketx = 216; // 右壁をはみ出さないように }
| ↓X座標比較のイメージ |
 |
ここまでのサンプルソースを参考にプログラムを作られた方は、 ラケットに当たらなくても跳ね返っていたので 「変だな？」と思ったことと思います。 何故ラケットに当たっていないのに跳ね返ってしまったのでしょうか？ それは、そういうプログラムを書いていないからです。
コンピュータは、プログラム通りに動きます。 何か変な動作をした時は、変な動作をするようにプログラム（命令）していた という事になります。
余談はさておき、今までは全部跳ね返していましたが、 下の壁との跳ね返りだけは、 ラケットに当たっていた時だけ跳ね返る様にする必要があるという事になります。
その方法ですが、下の壁に当たったと判断した時、 ラケットと左右を比べます。それで、 ボールの横の中心がラケットの左右の間に入っていればＯＫという処理をします。
ボールの横の中心は、ボールの左座標(ballx)＋ボールの横幅の半分(16/2)です。 ラケットの左端はラケットのＸ座標(racketx)、 右端は、ラケットのＸ座標(racketx)＋ラケットの幅(64)になります。
if ( 248 < bally ) { if ( racketx < ballx + 8 && ballx + 8 < racketx + 64 ) { speedy = -speedy; // 下の壁（ラケットに当たった時のみ） bally = 248; // 突き抜けた分を戻す } else { alert( "ゲームオーバー" ); // ゲームオーバー return; } } ちょっと解説
条件式の中に && というものを書いてしまいましたので解説します。 参考として || も書きます。これらは if文 等の条件式の中で使います。
- &&
これは「且つ（かつ）」を表します。
(条件Ａ && 条件Ｂ && 条件Ｃ) …
条件Ａと条件Ｂと条件Ｃが、全部真の時に真になります。 どれか一つでも偽があると、条件式全体は真になりません。
- ||
これは「又は（または）」を表します。
(条件Ａ || 条件Ｂ || 条件Ｃ) …
条件Ａと条件Ｂと条件Ｃの、どれか一つでも真ならば真になります。
| ↓跳ね返しイメージ |
 |
もう充分ゲームらしくなりましたよね？ 後は自由に発想工夫して面白いゲームにしてみて下さってＯＫです。 ここでは、筆者の工夫をちょっとだけ書いてみます。
ラケットは、ご覧の通り左右が少し傾いています。 そこで、ラケットを「左」「中」「右」の三つに分けます。 そしてそれぞれで跳ね返りかたを変えます。
- 左…どの角度から来ても左上へ打ち返します。
- 中…横は同じ方向で上へ打ち返します。
- 右…どの角度から来ても右へ打ち返します。
if ( 248 < bally ) { if ( racketx < ballx + 8 && ballx + 8 < racketx + 64 ) { speedy = -speedy; // ラケットに当たった時のみ上に跳ね返る bally = 248; // 突き抜けた分を戻す if ( ballx + 8 < racketx + 24 ) { // 左部分 if ( 0 < speedx ) { speedx = -speedx; // 右へ向かっていたら左へ } } if ( racketx + 40 < ballx + 8 ) { // 右部分 if ( speedx < 0 ) { speedx = -speedx; // 左へ向かっていたら右へ } } } else { alert( "ゲームオーバー" ); // ゲームオーバー return; } }
前章「7.ボールを動かす」までを理解された方で、 本章「8.ラケットを動かす」についても一区切りついた方にお願いです(必須ではありません)。 よろしければ、「8-a.ラケットを表示してみましょう」～「8-d.思った方向へ！」について、 最もあてはまるものを選んでいただいて 「アンケートを送信する」を押してください。
ご協力ありがとうございます。