7.ボールを動かす

 さて、この章からいよいよ中身という事になります。 ここからは色々なやり方があるので、 サンプルを見るだけじゃなく、 自分らしいゲームにどんどん改良していって下さい。 を書きます。

7-a.壁を表示してみましょう。

 下の絵を壁に使用して出してみましょう。

場所も指定した方が良いので、 とりあえず左上からそれぞれ16ピクセルの位置に置いておきましょう。 これを左マージン上マージンと呼びます。 筆者はマージンは少し合った方が見易いと思っていますので、 16ピクセルつけてみました。
 ちなみにこの壁の名前は bb04.gif になってます。 右の絵で右クリックしてダウンロード等すると便利です。 大きさですが、内側が縦横256ピクセル、 壁の厚さが8ピクセルとなってます。

<html> <head> <title>ゲーム</title> </head> <body> <!-- 壁 --> <div id=lyrwall style="position:absolute; left:16px; top:16px;"> <img src=bb04.gif> </div> </body> </html>


7-b.初期配置をしてみましょう

ボール

スタート


7-c.速度を設定してみましょう

速度変数

ヒント:補足
 よく質問されるので補足します。ballxをspeedxに置き換える、ということではありません。 もしそう勘違いしてしまった方は、7-cをよーく読み直して、 speedxとspeedyの「定義」を確認していただきたいと思います。 それでも意味不明でしたら、理解が浅いところがあるので、 4章をやりなおしてもらうとよいかと思います。
ヒント:挿入位置
これを挿入する位置ですが、関数の中に入れないようにご注意ください。 「3-f. JavaScript基本系」 に書かれていた説明も参考にしてください。

初期速度

ヒント:挿入位置
 これを挿入する位置は、 「3-e. アンカーから入力してみましょう」 に例としてかかれている関数 gameInit の中です。
 正解は一つではありませんので必ずそうしなければならないということではありません。 ただよくある間違いとしては、 ゲーム本体のメインループ(繰り返し行う部分)の中に入れてしまって、 毎回毎回右下にセットしてしまうというものです。 これは次章から出てくる跳ね返り処理と関係しますので、 頭に入れて読み進めてみてください。
ヒント:より詳しく知りたい方へ
 応用編いくつか(^_^)
 まず var 宣言についてですが、ある関数内に入れてしまうと、 その関数内でしかその変数は有効になりません。 つまりその関数が処理を終了すると変数も捨てられてしまいますし、 その変数は、宣言された関数の外からも参照できません。 これはこれで非常に有効な手法に使えるので応用して欲しいのですが、 NN6やspeedyのようにずっと保持していなければならない変数については、 functionの外で var宣言してください。例は 「3-d.ブラウザを調べましょう」 や 「3-e. アンカーから入力してみましょう」 まで戻って確認してくださいネ。
 次に初期化、例えば speedx = 8; などの方法ですが、 実は、上記例のように関数 gameInit では無くて、 「3-d.ブラウザを調べましょう」 と同様に関数の外においても構いません。 ただ初期化処理を gameInit にまとめると、より見やすくなります。 ballxの初期設定等についても、 最初に1度だけ実行すればよいものは、 gameInit で1回しか呼ばれないようにした方が良いでしょうね。 gameStart は gameInit と gameBody だけを呼ぶようにしておいて、 gameInitで初期化、gameBodyでメインループという感じが良いと思います。 gameBody は5章でやったコールバック関数そのものでもよいでしょう。 ま、これはテクニックなので、どういう形でも構いません。 知識のプラスになればということで。 …というか、ここまで来ている方であれば、 既にこれを理解されている方も多いかもしれませんね(^_^)

7-d.跳ね返らせましょう

壁に当たる

跳ね返り

壁に当たって跳ね返る


7-e. アンケート

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

目次へ戻る