【ハウツー】iPhoneゲーム自作工房12 - WebKitの回転機能を使ったクリスマスゲーム (5) 完成ソースコード | パソコン

お知らせ: 「マイポ」からのポイント交換を再開いたしました。(5月9日); メール会員100万人突破記念「春の読者プレゼント」結果発表は5月30日です。; マイナビベアがミクシィで部屋を作ったよ。ぜひ見てね！; 一緒に「マイナビ」で働きませんか。採用情報はこちらから。; 旅行券3万円、時計、ビジネスバッグなどが当たる！さらに応募者全員に50マイポもプレゼント

その先を伝える総合情報サイト
マイナビニュース

パソコン

急上昇ワード

[

]

【ハウツー】

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

5 完成ソースコード

古籏一浩　 [2008/12/25]

印刷

先頭
前へ
- 1
- 2
- 3
- 4
- 5
- ／5

最後に

時節柄、なまけもの(ずぼらな)のサンタクロースがプレゼントをばらまくことになっていますが、画像などを変えて楽しむこともできます。例えば、サンタクロースを首相にして、プレゼントボックスを12枚の1,000円札にするのもよいかもしれません。このプログラムは自由に改造して配布しても問題ありません。背景画像を変更したりプログラム書き換えて楽しんでください。

完成したプログラムコード

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta name="viewport" content="initial-scale=1, user-scalable=no">
    <title>プレゼント キャッチ!</title>
    <style type="text/css"><!--
        h1 { font-size:14pt; }
        body { background-image: url(images/bg.png); background-repeat:no-repeat; }
        #displayScore { position:absolute; top:0px; left:260px; color:#ffffff; font-size:9pt; }
        #gameForm { position:absolute; top:80px; left:60px; font-size:9pt; }
        #gameForm div { width:210px; color:white; }
        input { font-size:16pt; }
        #point { position:absolute; top:-100px; left:0px; font-size:12pt; opacity:0.75;
                    font-weight:bold; width:40px; height:14px; color:white; z-index:999; }
    --></style>
    <script type="text/javascript"><!--
        // ===============================================
        // ゲームに必要な変数
        // ===============================================
        var maxCount = 20;  // プレゼントの最大数
        var count = 0;  // プレゼントのカウント数
        var limitY = 309;   // 下限
        var presentData = new Array();  // プレゼントボックス情報を入れる配列
        var timerID = null; // タイマー変数
        var ptTimer = null;     // ポイント表示のタイマー変数
        var score = 0;  // スコア
        window.onload = function(){
            for (var i=0; i<maxCount; i++) {
                presentData[i] = presentAdd(i);
            }
        }
        // ===============================================
        // プレゼントボックスを生成
        // ===============================================
        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;
        }
        // ===============================================
        // プレゼントボックスを落下させる
        // ===============================================
        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;
        }
        // ===============================================
        // 得点を表示
        // ===============================================
        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);
        }
        // ===============================================
        //ゲームオーバー
        // ===============================================
        function gameOverCheck(){
            count = count + 1;
            if (count >= maxCount){
                clearInterval(timerID); // タイマー解除
                alert("ゲームオーバー");
            }
        }
        // ===============================================
        // ゲーム開始
        // ===============================================
        function gameStart(){
            document.getElementById("gameForm").style.visibility = "hidden";
            timerID = setInterval("movePresentBox()", 250);
        }
    // --></script>
    </head>
    <body>
    <div id="displayScore">0点</div>
    <form id="gameForm">
        <div>
            落下するプレゼントボックスをタッチして回収しよう。<br>
            回転するボックスが傾いていない時にタッチすると高得点。<br>
            赤線に近いほど高得点。でも赤線越えると1点。<br>
            20箱回収すればゲームクリア！<br><br>
            再度ゲームプレイする時はリロードしてください。<br>
        </div>
        <input type="button" value="ゲーム開始" onClick="gameStart()">
    </form>
    <div id="point"></div>
    </body>
</html>