プレゼントボックスがタッチされた時の処理

プレゼントボックスをタッチすると得点が入ります。このタッチした場合の処理は画像オブジェクトのontouchstartにイベント発生時の処理を代入します。タッチされたらスコアの計算を行います。今回のゲームでは、どの程度回転しているかによって加算される得点が変わります。回転角度はdegreeプロパティに入っているので、370から減算し加算する得点にします。下限(背景画像の赤線部分)より下になっている場合にはスコアを1点にします。

ここで、これまでのようにスコア変数(score)に加算するのではなく、別の変数(pt)に入れておきます。これは、取得した得点を表示する処理に必要なためです。この取得した得点を表示する処理を行うのが関数displayPoint()です。これについては次項で説明します。

プレゼントボックスがタップされたらすべて回収されたかどうかを関数gameOverCheck()で調べます。関数内ではカウンタ変数(count)を増やし、プレゼントボックスの総数と比較します。すべて回収した場合はゲームオーバーとし、アラートダイアログにメッセージを表示します。あとはタイマーを解除し落下処理を中止します。

赤線より下に落下すると、それ以上は落下しない。ただし、得点は1点になる。

プレゼントボックスをすべて回収するとゲームオーバーとなる

コード02

            img.ontouchstart = function(){  // タッチした時に処理
                this.ontouchstart = null;
                if (this.posY < limitY) {
                    var pt = 370 - Math.floor(this.degree); // 回転角度によってスコアを変える
                    pt = pt + Math.floor(this.posY / 10);       // 下に行くほど高得点
                }else{
                    pt = 1; // 下限より下なら1点
                }
                score = score + pt; // スコアを加算する
                displayPoint(this.posX, this.posY, pt); // 上に移動するスコア表示を設定
                document.getElementById("displayScore").innerHTML = score + "点";
                this.style.visibility = "hidden";   //　プレゼントボックスを非表示にする
                gameOverCheck();    // ゲームオーバーチェック
            }

コード03

    // ===============================================
    //ゲームオーバー
    // ===============================================
    function gameOverCheck(){
        count = count + 1;
        if (count >= maxCount){
            clearInterval(timerID); // タイマー解除
            alert("ゲームオーバー");
        }
    }