プレゼントボックスの生成

ページが読み込まれたらプレゼントボックスを生成します。プレゼントボックスは画像を表示するimgタグを利用します。あらかじめHTMLタグ内に表示したい個数を記述する方法もありますが、今回はcreateElement()を使って生成します。imgタグの生成はdocument.createElement("img")とします。これで生成されたimgオブジェクトが返されるので、各プロパティに必要な値を設定していきます。画像のパスはsrcプロパティに指定します。

表示位置などはスタイルシートを示すstyleオブジェクトの各プロパティに値を指定します。これとは別に独自のプロパティも追加します。JavaScriptの場合は、新たにプロパティを追加する時には、いきなりオブジェクトのプロパティに値を代入するだけで特別な宣言は必要ありません。今回のゲームに必要な以下の独自プロパティを設定します。

さらに、独自のメソッドであるfallも追加します。JavaScriptの場合、プロパティに関数(eval()で評価可能な実行コード)が定義されていれば、メソッドとして呼び出し使用することができます。この場合も特に宣言などは必要なく、fallプロパティにfunction(){}を使って処理する内容を代入するだけです。

コード01

// ===============================================
// プレゼントボックスを生成
// ===============================================
function presentAdd(n){
    var img = document.createElement("img");    // imgエレメントを生成
            document.body.appendChild(img); // ページに追加
            img.id = "present"+n;   // ID名を割り当てる
            img.speed = Math.random() * 5 + 2;  // 落下速度を設定する
            img.degree = Math.floor(Math.random() * 36) * 10;   // 初期角度
            img.src = "images/present.png"; // 表示する画像
            img.style.top = img.posY = (Math.random() * -180) -24;  // 画像のY座標
            img.style.left = img.posX = Math.random() * 280 + 20;   // 画像のX座標
            img.style.width = "24px";   // 画像の横幅
            img.style.height = "24px";  // 画像の縦幅
            img.style.position = "absolute";    
            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();    // ゲームオーバーチェック
            }
            img.fall = function(){  // 落下処理を行うメソッド
                this.posY = this.posY + this.speed;
                if (this.posY < limitY) {
                    this.degree = (this.degree + 10) % 360; // 10度ずつ回転
                }
                this.style.top = this.posY;
                this.style["-webkit-transform"]="rotate("+this.degree+"deg)";   // CSSで回転させる
                if (this.posY > limitY) {
                    this.posY = limitY; // ある程度よりは下に落下しないようにする
                }
            }
            return img;
        }