潰した時の処理

プチプチがタップされたら画像を差し替えて「潰した時の画像」にする必要があります。これは<img>タグのsrc属性に潰した時の画像URLを指定します。crash()関数には画像自身の情報(<img>タグ)が渡されています。サンプルでは変数imageObjにより受け取るようになっているのでimageObj.src = "潰した時の画像URL";とすれば画像を入れ替えることができます。

全てのプチプチを潰すまでの時間を競うゲームですが、一般的なゲームと異なりゲーム開始ボタンがありません。というのも、ゲーム開始ボタンを押してから、実際にプチプチを潰すまでに意外と時間がかかってしまうためです。このため、最初にプチプチが潰された瞬間から計測を開始するようにします。開始時間は「startTime = (new Date()).getTime();」として変数startTimeに開始時のミリ秒を入れます。全部潰し終わった時のミリ秒から開始時のミリ秒を減算すれば、全て潰すまでの時間が分かります(var time = (endTime - startTime) / 1000;)

全部潰した場合、かかった時間がアラートダイアログに表示される

コード02

        function crash(imageObj){
            imageObj.src = "images/off.gif";    // つぶした画像に変える
            if (count == 0){
                startTime = (new Date()).getTime(); // 最初の1つをつぶし始めたら計測を開始する
            }
            count++;    // つぶした数をカウント
            if (count >= total){    // 全部つぶしたら時間を表示してゲームオーバー
                var endTime = (new Date()).getTime();
                var time = (endTime - startTime) / 1000;
                alert("全部つぶしました。タイムは"+time+"秒でした");
                document.getElementById("result").innerHTML = "全部つぶしました。タイムは"+time+"秒でした";
            }
            imageObj.onclick = null;
        }