イベントの設定とパッドの移動

パドルの移動はiPhone専用のイベントであるtouchmove(タッチムーブ)イベントを使います。パドルだけにこのイベントを適用することもできますが、それでは操作が難しくなってしまうので、画面全体(ドキュメント全体)にtouchmoveイベントを設定します。このようにすると画面のどこでもタッチした指を動かすだけでパドルを操作できるようになります。

touchmoveイベントが発生したらデフォルトのイベントを禁止します。これは、touchmoveイベントが発生するとイベントによりSafariの画面全体がスクロールしてしまうのを防ぐためです。これはevent.preventDefault();とすることでデフォルトのイベントを禁止することができます。

タッチしたX座標を新たなパドルの座標値とします。padW / 2というのはパドルの幅を2で割っているのですが、これは指でタッチムーブした時にタッチした位置にパドルの中心が来るようにするためです。座標を設定し終わったらパドルのオブジェクトのスタイルシートのleftプロパティに反映させます。

コード02

        window.addEventListener("load", function(){ // ページ内容が読み込まれたらイベントを設定
            document.addEventListener("touchmove", function(){
                event.preventDefault(); // デフォルトのイベントを禁止する
                padX =event.touches[0].pageX - padW / 2;    // タッチされた横位置を取得しパドルの座標とする
                document.getElementById("pad").style.left = padX;
            }, false);
        });

ボールの移動処理

ボールの移動処理ですが、移動させるだけであれば座標値に移動量を加算するだけで終わりです。しかし、ボールが壁にあたった場合には反射させなければなりません。反射させるにはボールの座標値が画面の端を超えたかどうかを調べ、超えた場合は移動方向を反転させます。上の壁の場合は縦方向の移動量を示す変数dyの符号を反転させます。符号を反転させるにはdy = -dyとします。これは「dy = -1 * dy」と同じ意味になります。 左右の壁も同様に処理します。左右の壁の場合は横方向の移動量を示す変数dxの符号を反転させます。

次にボールとパドルの接触判定です。判定方法は厳密ではなくラフに行っています。ここで言う厳密ではない、というのはボールがパドルの左端や右端に当たった場合、角度によっては上に跳ねずに下に跳ねてしまうことがあります。ここでは、そのような判定は行っていません。

接触判定ですがボールがパドルのY座標よりも大きく縦幅よりも小さいという条件と、ボールがパドルの左側のX座標よりも大きくパドルの横幅よりも小さい場合に接触したとみなします。接触したらボールの移動方向を反転させスコアを加算します。ボールが画面下まで行ってしまった場合にはゲームオーバーとなります。インターバルタイマーを解除した後、アラートダイアログを使ってゲームオーバーの表示を行います。

アラートダイアログのOKボタンが押されたら、ゲーム開始ボタンを表示させます。これにより、ゲーム開始ボタンをクリックすると再度ゲームをプレイすることができるようになります。

ボールが壁やパドルに当たると移動方向が反転する

ボールが画面下に落ちるとゲームオーバーになる

コード03

        function moveBall(){
            ballX = ballX + dx; // ボールを横方向に移動させる
            ballY = ballY + dy; // ボールを縦方向に移動させる
            document.getElementById("ball").style.left = ballX; // ボールを指定したX座標に表示する
            document.getElementById("ball").style.top = ballY;  // ボールを指定したY座標に表示する
            if (ballY< 0) dy = -dy; // 上の壁に当たったら移動方向を反転する
            if ((ballX < 0) || (ballX > (320-ballW))) dx = -dx; // 左右の壁に当たったら移動方向を反転
            if (((ballY+ballH) > padY) && (ballY < padY + padH)){   // ボールがパドルのY座標を超えたら判定
                if ( ((ballX + ballW) >= padX) && (ballX <= (padX + padW)) ) {  // ボールがパドルに当たった
                    dy = -dy;   // 移動方向を反転させる
                    ballY = padY - ballH;
                    score = score + 1;
                    document.getElementById("score").innerHTML = score+"点";
                    return;
                }
            }else{
                if (ballY < 356) return;    // 完全に画面に消えるまで動かす
                clearInterval(timerID); // タイマーをクリア
                alert("ゲームオーバー");
                document.getElementById("gameForm").style.visibility = "visible";
            }
        }