iPhoneゲーム自作工房8 - インベーダータイプのゲームを創る

初期設定と自機の移動

ゲーム開始前には初期設定を行う必要があります。ブロック崩しの時のボールが自機のレーザービームになっています。ブロックは、そのまま敵となります。また、今回のゲームは宇宙空間と言うことで雰囲気を出すために背景画像を上から下に移動(スクロール)させます。

敵を左右に動かすために、あらかじめどのくらい移動させるのかを示す移動量を配列変数に入れておきます。注意しないといけないのは配列変数に入れた数値の合計が0になるようにしなければならないことです。もし、0になっていないと敵は左右どちらかに移動してしまい画面外に消えてしまいます。

自機の移動はブロック崩しと全く同じです。通常のシューティングゲームではレバーや押したボタンの方向に自機が移動します。ただ、iPhoneの場合はタッチムーブイベントがあるので、指で自機を動かした方が簡単です。この方法だと自機が瞬時に移動できてしまうことがありますが、実際にプレイしてみるとあまり違和感はないかと思います。

コード01

        var laserX = -10;   // レーザーのX座標
        var laserY = -50;   // レーザーのY座標
        var laserW = 3; // レーザーの横幅
        var laserH = 20;    // レーザーの縦幅
        var dy = -10;   // レーザーの縦の移動量
        var fighterX = 1;   // 自機のX座標
        var fighterY = 260; // 自機のY座標
        var fighterW = 24;  // 自機の横幅
        var fighterH = 24;  // 自機の縦幅
        var fighterDx = 8;  // 1回の自機の移動量
        var pointX = 0;
        var enemyFlag = new Array();    // 敵の有無を示すフラグ
        var enemyX = new Array();   // 敵のX座標
        var enemyY = new Array();   // 敵のY座標
        var enemyW = 24;    // 自機の横幅
        var enemyH = 24;    // 自機の縦幅
        var total;  // 敵の総数
        var count;  // 消した敵をカウントするための変数
        var bgY = 0;    // 背景画像のY座標
        var patDX = [1, 2, 3, 4, 5, 6, 5, 4, 3, 2, 1, 0, 0, 0, -1, -2, -3, -4, -5, -6, -5, -4, -3, -2, -1, 0, 0, 0 ];
        var patCount = 0;

コード02

        window.addEventListener("load", function(){ // ページ内容が読み込まれたらイベントを設定
            document.addEventListener("touchmove", function(){
                event.preventDefault(); // デフォルトのイベントを禁止する
                fighterX =event.touches[0].pageX - fighterW / 2;    // タッチされた横位置を取得し自機の座標とする
                document.getElementById("fighter").style.left = fighterX;   // 自機を指定したX座標に表示する
            }, false);
            drawEnemy();    // 雰囲気を出すために敵を描画する
        });