敵車の移動と接触判定

今回は敵車の部分がオブジェクト指向になったので移動処理部分が、これまでとは異なっています。生成した敵車にはmove()という名前のメソッドが追加されています。このメソッドが呼び出されるとmoveEnemy()内が実行されます。これまではx = x + 2;のようにしていた部分はthis.x = this.x + 2;のようになります。敵車自身だけの処理を行うようになっています。非常に端折って書けば、これまでグローバル変数だった名前の前に「this.」を付けただけとも言えます。今回のようなプログラムではあまりメリットがないかもしれませんが、プログラムが大きくなれば、オブジェクト指向にしたことでより効果を発揮するようになります。

自分自身(敵車)が移動するたびにマイカーとの接触判定を行います。接触判定は、これまでと全く同じ仕組みで敵車と自分の車(マイカー)との座標値を調べる方法です。接触したらゲームオーバーなのでアラートダイアログを表示しタイマーを解除します。その後、再度ゲームをプレイできるようにするため、ゲーム開始ボタンを見えるようにしています。

敵車が生成され画面下に移動してくる

敵車に少しでも接触するとゲームオーバー

アラートダイアログでOKボタンを押した後は、再度ゲームができるようにボタンを表示する

コード05

        function moveEnemy(){
            this.x = this.x + this.dx;
            this.y = this.y + this.dy;
            var img = document.getElementById(this.id);
            img.style.left = this.x;
            img.style.top = this.y;
            if (this.y > 360) {
                this.x = Math.floor(Math.random() * 280) + 20;
                this.y = -24;
                this.dx = Math.random() * 3 - 1;
                this.dy = Math.random() * 16 + 4;
                enemyCounter++;
                enemyCounter = enemyCounter & 15;   // 16台追い越したら1台増やす
                if (enemyCounter == 0){
                    if (maxCar < carLimit){
                        enemy[maxCar] = new createEnemy("car"+maxCar);
                        maxCar++;
                    }
                }
            }
            // マイカーとの接触判定
            if ( (this.y > 260) && (this.y < 284) && ((this.x + enemyCarW) > myCarX) && (this.x < (myCarX + myCarW)) ) {
                alert("どか~ん! ゲームオーバー!");
                clearInterval(timerID); // タイマー処理を終了
                document.getElementById("gameForm").style.visibility = "visible";
            }
        }