ラケットを動かす



8-a.ラケットを表示してみましょう。


 右の絵をラケットに使用して出してみましょう。
 ラケットの大きさは、横が64ピクセル。縦が16ピクセルです。 ボールの時と同じ様な計算です。つまり、横すなわちX座標は、 左マージン(16)+壁の厚さ(8)+空間の半分(256/2)-ラケットの横幅の半分(64/2)で 120 になります。 一方縦すなわちY座標は、 上マージン(16)+壁の厚さ(8)+空間(256)-ラケットの縦幅(16)で 264 になります。

<!-- ラケットレイヤー --> <div id=lyrracket style="position:absolute; left:120px; top:264px;"> <img src=bb03.gif> </div>

 なお、前章ではボールの跳ね返りY座標を「とりあえず」右端と同じ264としていましたが、 改めて計算しましょう。 ラケットの座標が264になりました。 これはラケットの上端の座標なので、そのまま跳ね返り座標になります。 もう少し正確には、ボールの下端の跳ね返り座標が 264 ということです。 ボールのY座標は上端のため、ここからボールの縦幅分だけ上げる(=引き算する)必要があります。 264-ボールの縦幅(16) の結果 248 が正確な、ボール上端の跳ね返り座標となります。

8-b.ラケットを動かしましょう

マウスの座標

ラケットの移動


8-c.ラケットで跳ね返しましょう

↓X座標比較のイメージ
 ここまでのサンプルソースを参考にプログラムを作られた方は、 ラケットに当たらなくても跳ね返っていたので 「変だな?」と思ったことと思います。 何故ラケットに当たっていないのに跳ね返ってしまったのでしょうか? それは、そういうプログラムを書いていないからです。
 コンピュータは、プログラム通りに動きます。 何か変な動作をした時は、変な動作をするようにプログラム(命令)していた という事になります。
 余談はさておき、今までは全部跳ね返していましたが、 下の壁との跳ね返りだけは、 ラケットに当たっていた時だけ跳ね返る様にする必要があるという事になります。
 その方法ですが、下の壁に当たったと判断した時、 ラケットと左右を比べます。それで、 ボールの横の中心がラケットの左右の間に入っていればOKという処理をします。
 ボールの横の中心は、ボールの左座標(ballx)+ボールの横幅の半分(16/2)です。 ラケットの左端はラケットのX座標(racketx)、 右端は、ラケットのX座標(racketx)+ラケットの幅(64)になります。

if ( 248 < bally ) { if ( racketx < ballx + 8 && ballx + 8 < racketx + 64 ) { speedy = -speedy; // 下の壁(ラケットに当たった時のみ) bally = 248; // 突き抜けた分を戻す } else { alert( "ゲームオーバー" ); // ゲームオーバー return; } }

ちょっと解説

  1. &&
     これは「且つ(かつ)」を表します。
    (条件A && 条件B && 条件C) …
    条件Aと条件Bと条件Cが、全部真の時に真になります。 どれか一つでも偽があると、条件式全体は真になりません。

  2. ||
     これは「又は(または)」を表します。
    (条件A || 条件B || 条件C) …
    条件Aと条件Bと条件Cの、どれか一つでも真ならば真になります。

8-d.思った方向へ!

↓跳ね返しイメージ
 もう充分ゲームらしくなりましたよね? 後は自由に発想工夫して面白いゲームにしてみて下さってOKです。 ここでは、筆者の工夫をちょっとだけ書いてみます。
 ラケットは、ご覧の通り左右が少し傾いています。 そこで、ラケットを「左」「中」「右」の三つに分けます。 そしてそれぞれで跳ね返りかたを変えます。
  1. …どの角度から来ても左上へ打ち返します。
  2. …横は同じ方向で上へ打ち返します。
  3. …どの角度から来ても右へ打ち返します。

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; } }


8-e. アンケート

 前章「7.ボールを動かす」までを理解された方で、 本章「8.ラケットを動かす」についても一区切りついた方にお願いです(必須ではありません)。 よろしければ、「8-a.ラケットを表示してみましょう」~「8-d.思った方向へ!」について、 最もあてはまるものを選んでいただいて 「アンケートを送信する」を押してください。
既に知っていました
1週間以内でだいたい理解できました
1ヶ月以内でだいたい理解できました
1年以内でだいたい理解できました
1年以上かかりましたがだいたい理解できました
理解できそうに無いのですぐあきらめました
1週間やってみましたがあきらめました
1ヶ月やってみましたがあきらめました
1年やってみましたがあきらめました
1年以上やってみましたがあきらめました
コメント欄:
※コメント欄にはご意見やわかり辛かった部分の指摘等がありましたらお願いします。 (なお質問についてはは掲示板までお願いします)
 ご協力ありがとうございます。

目次へ戻る