「Monaca」

content
目次
  1. サンプルアプリ「おみくじアプリ」の改変
  2. サンプルアプリ「ブロック崩し」の改変

サンプルアプリ「おみくじアプリ」の改変

before after

Monacaサンプルアプリ「おみくじアプリ」を改変し、ボタンをクリックした回数によって表示する画像を切り替えるする例

  1. Monaca上で「新規プロジェクトの作成」で「サンプルアプリ」→「おみくじアプリ」を選択し「作成」
  2. Monaca上でこの画像をimagesディレクトリにアップロード
  3. index.htmlの改変
    4. 

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <script src="components/loader.js"></script>
    <link rel="stylesheet" href="components/loader.css">
    
    <script>
    
    
        /* ボタンをクリックした回数が保持される */
        var click_count = 0;
        
        function omikuji (){
            var image_name;
            /* ボタンのクリック数が5回未満の場合、画像を「平」にする */
            if (click_count < 5) {
                image_name = "omikuji-hei.png";
            /* ボタンのクリック数が10回未満の場合、画像を「中」にする */
            } else if  (click_count < 10) {
                image_name = "omikuji-chuukichi.png";
            /* ボタンのクリック数が10回以上の場合、画像を「大」にする */
            } else {
                image_name = "omikuji-daikichi.png";
            }
            
            /* 最初の「開運おみくじ」画像を非表示にする */
            document.getElementById("saisyo").style["display"] = "none";
            
            /* 「平」「中」「大」いずれかの画像を表示する */
            document.getElementById("kekka").src = "images/" + image_name;
            document.getElementById("kekka").style["display"] = "inline";

            /* 「はじめる」画像を「やりなおす」画像に変更する */
            document.getElementById("button").src = "images/omikuji-btn-yarinaosu.png";
            
            /* クリック回数をインクリメントし、クリック時の画像を表示する */
            click_count++;
            document.getElementById("click_count").textContent = click_count;
            document.getElementById("hit").src = "images/" + "iine.png";
            document.getElementById("hit").style["display"] = "inline";
            /* 1000ms(1秒)後にhitDisplayNone()関数を呼び出す */
            setTimeout("hitDisplayNone()", 1000);
        }
        
        /* クリックしたときに表示する画像を非表示にする関数 */
        function hitDisplayNone(){
            document.getElementById("hit").style["display"] = "none";
        }
    
    
    </script>
    <style>
        body {
            background-image: url("images/omikuji-bg.png");
            background-size: cover;
            background-repeat: no-repeat;
            margin: 0;
            padding: 0;
            text-align: center;
        }
        #hako {
            margin-top: 15%;
            margin-left : 0;
            margin-right : 0;
        }
        
        img {
           width: 70%; 
        }

        #bottombar {
            position: absolute;
            bottom: 30px;
            width: 100%;
        }
        #hitbar {
            position: absolute;
            width: 100%;
        }
    
    
    </style>
</head>
<body>
    <div id="hitbar">
        Click count: <span id="click_count">0</span>
        <img id="hit" style="display : none;"/>
    </div>
    <div id="hako">
        <img id="saisyo" src="images/omikuji-box.png" />
        <img id="kekka" style="display : none;"/>
    </div>
    <div id="bottombar">
        <img id="button" src="images/omikuji-btn-hajimeru.png" onclick="omikuji()">
    </div>
</body>
</html>

サンプルアプリ「ブロック崩し」の改変

  1. Monaca上で「新規プロジェクトの作成」で「サンプルアプリ」→「おブロック崩し」を選択し「作成」
  2. js/main.jsの定数説明
    3. 

(function() {
    
    /* ボールに働く重力。 */
var SETTINGS_GRAVITY = 0.07,
    SETTINGS_FPS = 30,
    /* ボールの数。*/
    SETTINGS_BALL_NUM = 1,
    
    /* バウンド係数。数字を大きくすると良く跳ねる */
    SETTINGS_BOUND_X = 0.13,
    SETTINGS_BOUND_Y = 1.04,
    
    SETTINGS_ACCELEROMETER_RELOAD_FREQ = 100,
    SETTINGS_PADDLE_ACCEL = 2.8,
    
    /* ブロックを崩した時の得点 */
    SETTINGS_POINT = 1000,
    SETTINGS_POINT_SILVER = 200,
    SETTINGS_POINT_GOLD = 3000000;
  3. js/main.jsの228行目付近に以下を追加すると、「Iine!」をクリックしたときにボールが復活する。(「}, 1000, resetLabel);」 という行の後に追加)
    4. 
        /* 復活機能ここから */
        var hatenaLabel = new PIXI.Text("Iine!", {font: "24px/1.2 vt", fill: "red"});
        hatenaLabel.position.x = 200;
        hatenaLabel.position.y = BB.renderer.height - 52;
        BB.stage.addChild(hatenaLabel);
        hatenaLabel.buttonMode = true;
        hatenaLabel.interactive = true;
        hatenaLabel.click = hatenaLabel.tap = function(data) {
            BB.addBall();  
        };
        /* 復活機能ここまで */
  4. js/main.jsの以下がブロックの位置を表している。値を変更するとブロックの位置が変わる。
    5. 

    // Create blocks map
    setMap: function() {
        var blockMap = [
            [null,      null,       null,       null,       null,       'blue',     null,       null,       null,       null],
            [null,      null,       null,       null,       'red',      'red',      'blue',     null,       null,       null],
            [null,      null,       null,       'red',      'red',      null,       null,       'blue',     null,       null],
            [null,      null,       'red',      'red',      null,       null,       null,       null,       'blue',     null],    
            [null,      'red',      'red',      null,       null,       'gold',     null,       null,       'silver',   'silver'],    
            [null,      null,       'red',      'red',       null,       null,       null,       'silver',   'silver',   null],    
            [null,      null,       null,       'red',      'red',       null,       'silver',   'silver',   null,       null],    
            [null,      null,       null,       null,       'silver',   'silver',   'silver',   null,       null,       null],
            [null,      null,       null,       null,       null,       'silver',   null,       null,       null,       null]
        ];
  5. js/main.jsの以下がバーの横幅を表している。値を変更するとバーの横場が変わる。
    6. 
      BB.paddle.width = 60;
content
  1. 目次
  2. サンプルアプリ「おみくじアプリ」の改変
  3. サンプルアプリ「ブロック崩し」の改変