iPhoneゲーム自作工房12 - WebKitの回転機能を使ったクリスマスゲーム

得点の移動と表示処理

関数displayPoint()では与えられた座標に得点を表示します。得点表示は一定時間経過すると消す必要があるためsetTimeout()を使って消す処理を行います。この時にスタイルシートのvisibilityプロパティを使って処理すると、iPhoneの処理速度の都合で一瞬だけ以前の座標値に得点が表示されてしまいます。そこで、visibilityプロパティではなく、innerHTMLプロパティに空文字を入れることで何も表示しないようにしています。

得点を上に移動させ透明にする処理は関数displayPoint()ではなくプレゼントボックスを落下させる関数movePresentBox()で行います。これは関数movePresentBox()が定期的に呼び出されるためです。Y座標を示すtopプロパティと不透明度を示すopacityの内容を読み出した後で数を減らし、再度topプロパティ、opacityプロパティに代入します。

コード03

        // ===============================================
        // 得点を表示
        // ===============================================
        function displayPoint(x,y,pt){
            clearTimeout(ptTimer);  // ポイントのタイマーをクリア
            document.getElementById("point").style.opacity = 1.0;
            document.getElementById("point").style.left = x;
            document.getElementById("point").style.top = y;
            document.getElementById("point").innerHTML = pt;
            ptTimer = setTimeout('document.getElementById("point").innerHTML=""', 800);
        }

コード04

        // ===============================================
        // プレゼントボックスを落下させる
        // ===============================================
        function movePresentBox(){
            for (var i=0; i<maxCount; i++) {
                presentData[i].fall();
            }
            var ptObj = parseInt(document.getElementById("point").style.top);
            ptObj = ptObj - 2;
            document.getElementById("point").style.top = ptObj;
            var n = document.getElementById("point").style.opacity;
            n = n - 0.15;
            document.getElementById("point").style.opacity = n;
        }