初期設定と自分の車(マイカー)の移動

ゲーム開始前には初期設定を行う必要があります。これまではグローバル変数を使って全てを管理していたので初期設定部分が長くなっていました。今回からは敵車に限ってオブジェクト指向を取り入れています。このため、敵の車に関しては総合的に情報を格納するenemy配列だけを用意します。これにより、大幅にグローバル変数を減らすことができます。他の変数は自分の車の座標値や横幅、ゲームの難易度を決定するための変数(maxCar、carLimit、enemyCounter)、背景を移動させるための変数(bgY)、スコア(score)になっています。

自分の車(マイカー)の移動は前々回、前回のブロック崩し、インベーダータイプのゲームと同じです。ただし、道路の端まで行かないようにX座標をチェックし越えた場合には座標値を修正しています。

ゲーム開始前の状態。ゲーム開始ボタンを押すとゲームが始まる

コード01

        var myCarW = 24;    // マイカーの横幅
        var myCarX = 160;   // マイカーのX座標
        var enemyCarW = 24; // 敵車の横幅
        var bgY = 0;    // 背景画像のY座標
        var enemy = []; // 敵車の情報を入れる配列
        var maxCar = 4; // 移動させる敵の車の最大数
        var carLimit = 20;  // 敵車の出現最大数
        var enemyCounter = 0;   // 敵車を出現させるカウンタ
        var score = 0;  // スコア

コード02

        window.addEventListener("load", function(){ // ページ内容が読み込まれたらイベントを設定
            document.addEventListener("touchmove", function(){
                event.preventDefault(); // デフォルトのイベントを禁止する
                myCarX =event.touches[0].pageX - myCarW / 2;    // タッチされた横位置を取得しマイカーのX座標とする
                if (myCarX < 16) myCarX = 16;   // 一定以上左に行かないようにする
                if (myCarX > 280) myCarX = 280; // 一定上右に行かないようにする
                document.getElementById("mycar").style.left = myCarX;   // 自機を指定したX座標に表示する
            }, false);
        });