コールバック設定
前章で、一定時間が経つと呼ばれる関数を使いましたが、 一定時間ではなく、マウスが動く度に呼ばれる様にする事もできます。
ここではまず、そのコールバックする関数を指定します。 書き方はお約束なのでこのまま使いましょう。 evMouseMove は次で定義する関数です。
ページが読み込まれた際に一回だけ宣言されればよいのですが、 初期化時に実施すれば問題ないので、 gameInit 内に書くのが良いと思います。 gameInit が「なんのこっちゃ？」という方は、 「3-e. アンカーから入力してみましょう」 まで戻って、再度じっくり確認をお願いします。
// コールバック登録 document.onmousemove=evMouseMove; //マウスを動かすとevMouseMove()を起動 if ( NN6 ) document.captureEvents(Event.MOUSEMOVE); コールバック関数の定義
座標を取得するコールバック関数はこんな感じです。 もちろんマウスが動くたびにこの関数が呼ばれる事が前提です。 これもお約束なので、このまま使いましょう。
座標の値は自分で定義した変数 ( mousex , mousey ) に しまうようにしてあります。 こうすると、いつでもこの値を使用できるので便利です。
まずは変数宣言。
そして関数宣言。
//-------------------------------------------------- // マウス座標変数 //-------------------------------------------------- var mousex; // マウスＸ座標 var mousey; // マウスＹ座標
//-------------------------------------------------- // マウス座標取得コールバック関数 //-------------------------------------------------- function evMouseMove(e) { if ( NN6 ) { mousex = e.pageX; mousey = e.pageY; } if ( IE5 ) { mousex = document.body.scrollLeft + event.clientX; mousey = document.body.scrollTop + event.clientY; } } 確認
実はこれだけではこれがうまくいっているのかはわかりません。 動作を確認したい場合は alert で mousex や mousey の中身を見る必要があります。 ですがすぐ確認できるので、このまま次の節へ進んでしまって構いません。
さて、ここまでマスターした方なら マウスの動きに合わせて絵を動かすのは既にできますね？ スタート(のアンカー)を押したら開始するように作ってみて下さい！
ヒント：うまくいかない方へここでは 5-c で作成したプログラムと 6-a で作成したプログラムを、 うまく「融合」すれば、できると思います。 アンカースタートやボールの動き、繰り返しなど、３章から６章までのすべての要素が必要になります。 集大成ですね。
何度も何度も戻ることになってしまうかも知れませんが、各章に戻って復習しつつやってみてください。 とにかく理解することが重要です。理解できるまで何度も戻ってやりなおしてください。
なお、理解が中途半端でも、そのまま先に進んでも特に問題はありません。 その際にも、わからなくなったら何度でも戻って復習することが重要です。 先に進むことで、わからないことが明確になる場合もありますしね。
さて、うまくいきましたでしょうか？
実と言うと、ここまでできれば、その知識でもう動くゲームは作れます。 もう最低限説明しなければならない事は説明しました。
でも本当にこれだけで、すぐにゲームが作れたら天才です。 ここから実際の動くゲームを作っていくためには プログラミング・テクニックというものが必要になります。 これは結構経験が必要なので、独学だと時間がかかってしまいます。
ですから、次章からはそのテクニックを説明していきます。 もちろんプログラミング・テクニックといっても多岐に渡るので、 動くゲームを作る場合に必要と思われるものだけに絞ります。
前章「5.タイマーコールバック」までを理解された方で、 本章「6.入力」についても一区切りついた方にお願いです(必須ではありません)。 よろしければ、「6-a.マウスの位置を取得してみましょう」～「6-c.マウスと一緒に絵を動かしてみましょう」について、 最もあてはまるものを選んでいただいて 「アンケートを送信する」を押してください。
ご協力ありがとうございます。