質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.04%

monacaのプレビューが作動しないです

受付中

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 787

score 34

Monacaのプレビューについてご教示をお願いしたいです。

1.
「www」フォルダ内のindex.htmlとmain.jsはプレビュー表示されますが、
「www」内に「game1」というフォルダを作り、その中に全く同じソースコードでindex.htmlとmain.jsを作成した所、そちらのプレビューが表示されません(「www」フォルダの方が表示されてしまいます)。
今回で言う「game1」など、階層が低いフォルダはプレビュー表示されないのでしょうか??

2.
また、上記コードをAndroid上で動かそうとした所、PCプレビュー上で動いていたスクリプトが、Android上では画面が真っ白になってしまいました。
上記全て、書籍中で公開されているコードをコピペしただけなので、ほぼ正しい内容だと思います。
解消方法が分かれば、ご教示のほど、何卒よろしくお願い致します。

【エラーメッセージ】
Uncaught ReferenceError: enchant is not definled
Uncaught ReferenceError: Game is not definled

【「index.html」ソースコード】

<!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>
    <script src="../lib/enchant.min.js"></script>

    <link rel="stylesheet" href="../components/loader.css">

    <script>
        document.addEventListener ("deviceready", onDeviceReady, false)

        //these functions runs when Cordova is ready
        function onDeviceReady (){
            alert ('Cordova is ready!')
        }
    </script>

    <script src="main.js"></script>
    <style type="text/css">
    body {
        margin: 0px;
        padding: 0px;
    }
    </style>
</head>
<body>
    <div id="msg" style="position:absolute; width:100%; height:100%; background-color:#ffffaa;font-size:24pt;" onclick="startNow();">TOUCH to START</div>
</body>
</html>

【main.js】※※凄く長いです

var game_flg = true; // ゲーム中かどうか示す値
var game = null; // Gameオブジェクト
var player = null; // プレーヤーのスプライト
var effect = null; // 効果のスプライト
var score = null; // スコアのラベル
var score_point = 0; // スコアの点数
var bg_image = null; // 背景のイメージ
var sprite_size = 200; // スプライトの大きさ
var horizon = 200; // 水平位置
play_time = 70000; // プレイ時間(ミリ秒数)
var move_point = 0; // 移動先(プログラムが使用)
var move_dx = 10; // フレームごとの移動幅
var interval_time = 10000; // 敵キャラの出現間隔
var enemy_data = []; // 敵キャラの保管用配列
var item_data = []; // アイテムの保管用配列

var walk = { // 歩くframeプロパティ値
    'stop':[0, 0, 1, 1],
    'right':[2, 2, 3, 3],
    'left':[4, 4, 5, 5]
};
var enemy_img = [ // 敵キャラのイメージ値
    'img/enemyA.png',
    'img/enemyB.png',
    'img/enemyC.png'
];
var touch_flg = false; // 自キャラをタッチしたか否か
var touch_dx = 0; // 自キャラタッチ時のジャンプ幅

// これよりプログラム

enchant()

function startNow(){
    var div = document.getElementById('msg');
    document.body.removeChild(div);

    // ゲーム盤の作成
    game = new Game(1280, 720);
    game.preload('img/background.png');
    game.preload('img/character.png');
    game.preload('img/enemyA.png');
    game.preload('img/enemyB.png');
    game.preload('img/enemyC.png');
    game.preload('img/item.png');
    game.preload('img/ef_itemGet.png');
    game.fps = 10;

    game.onload = function(){
        // 背景作成
        bg_image = new Sprite(1280, 720);
        bg_image.image = game.assets['img/background.png'];
        bg_image.moveTo(0, 0);
        game.rootScene.addChild(bg_image);    

        // プレーヤー作成
        player = new Sprite(sprite_size, sprite_size);
        player.image = game.assets['img/character.png'];
        player.frame = [0, 1];
        player.moveTo(100, horizon);
        game.rootScene.addChild(player);

        // 効果作成
        effect = new Sprite(sprite_size, sprite_size);
        effect.image = game.assets['img/ef_itemGet.png'];
        effect.moveTo(-200, -200);
        effect.tl.hide();
        game.rootScene.addChild(effect);

        // スコア作成
        score = new Label('SCORE: 0');
        score.color = 'red';
        score.font = 'bold 48pt Times';
        score.width = 500;
        score.moveTo(50, horizon + 300);
        game.rootScene.addChild(score);

        move_point = player.x;

        // イベントの組み込み
        game.rootScene.addEventListener(enchant.Event.TOUCH_START, function(event){
            touch_scene(event);
        });

        player.addEventListener(enchant.Event.TOUCH_START, function(event){
            touch_player(event);

        });
        player.addEventListener(enchant.Event.ENTER_FRAME, function(event){
            move_sprite(event);
            checkEnemy();
            checkItem();
        });

    };

    // ゲームの開始
    game.start();
    setTimeout(makeEnemy, 1000);
    setTimeout(makeItem, 10000 + Math.floor(Math.random() * 10) * 1000);
    setTimeout(gameEnd, play_time);

};

// シーンをタッチ
function touch_scene(event){
    move_point = event.x - sprite_size / 2;
    if (move_point > player.x){
        player.frame = walk.right;
    } else {
        player.frame = walk.left;
    }
}

// プレーヤーをタッチ
function touch_player(envet){
    touch_flg = true;
    touch_dx = -25;
}

// スプライト(プレーヤー)を動かす
function move_sprite(event){
    if (Math.abs(move_point - player.x) <= move_dx){
        player.frame = walk.stop;
    }
    if (move_point - player.x >= move_dx){
        player.x += move_dx;
    }
    if (player.x - move_point >= move_dx){
        player.x -= move_dx;
    }
    if (touch_flg){
        player.y += touch_dx;
        touch_dx += 2;
        if (player.y < sprite_size / 2 * -1){
            player.y = sprite_size / 2 * -1;
        }
        if (player.y > horizon){
            player.y = horizon;
            touch_flg = false;
            touch_dx = 0;
        }
    }
}

// 敵キャラの作成
function makeEnemy(){
    var enemy = new Sprite(sprite_size, sprite_size);
    enemy_data.push(enemy);
    var img_num = Math.floor(Math.random() * 3);
    enemy.image = game.assets[enemy_img[img_num]];
    var x = Math.floor(Math.random() * game.width - sprite_size);
    enemy.moveTo(x, horizon);
    enemy.frame = player.x > x ? walk.right : walk.left;
    game.rootScene.addChild(enemy);
    enemy.tl.moveTo(player.x, horizon, 100).removeFromScene();
    if (game_flg){
        interval_time -= interval_time / 10;
        setTimeout(makeEnemy, interval_time);
    }
}

// 敵キャラの衝突チェック
function checkEnemy(){
    for(var i = 0;i < enemy_data.length;i++){
        if (player.within(enemy_data[i], 180)){
            if (touch_dx > 0){
                effect.x = enemy_data[i].x;
                effect.y = enemy_data[i].y;
                effect.tl.clear().show().fadeOut(10).hide();
                update_score(100);
            } else {
                update_score(-10);
            }
            enemy_data[i].tl.clear().removeFromScene();
            enemy_data.splice(i, 1);
            return;
        }
    }
}

// アイテムの作成
function makeItem(){
    var pitem = new Sprite(sprite_size, sprite_size);
    item_data.push(pitem);
    pitem.image = game.assets['img/item.png'];
    pitem.frame = [0];
    pitem.scaleX = 0.75;
    pitem.scaleY = 0.75;
    var x = Math.floor(Math.random() * (game.width - sprite_size));
    var y = horizon -  Math.floor(Math.random() * sprite_size);
    pitem.moveTo(x, y);
    game.rootScene.addChild(pitem);
    pitem.tl.moveBy(0, 0, 100).removeFromScene();
    if (game_flg){
        setTimeout(makeItem, 5000 + Math.floor(Math.random() * 10) * 1000);
    }
}

// アイテムGETのチェック
function checkItem(){
    for(var i = 0;i < item_data.length;i++){
        if (player.within(item_data[i], 100)){
            item_data[i].tl.clear().removeFromScene();
            update_score(300);
            effect.x = item_data[i].x;
            effect.y = item_data[i].y;
            item_data.splice(i, 1);
            effect.tl.clear().show().fadeOut(20).hide();
        }
    }
}

// スコアの更新
function update_score(n){
    score_point += n;
    score_point = score_point < 0 ? 0 : score_point;
    score.text = 'SCORE: ' + score_point;    
}

// ゲームの終了
function gameEnd(){
    game_flg = false;
    game.stop();
    var msg = new Label('GAME OVER');
    msg.color = 'red';
    msg.font = 'bold 96pt Times';
    msg.width = 800;
    msg.moveTo(50, 50);
    game.rootScene.addChild(msg);

    // リンク生成
    var dv = document.createElement('div');
    dv.style.position = 'absolute';
    dv.style.width = '100%';
    dv.style.height = '100%';
    dv.onclick = function(){ window.location.href="../index.html"; };
    document.body.appendChild(dv);
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+1

スペルミスしているのでおそらくコピペミスですが…。

Uncaught ReferenceError: enchant is not defined
Uncaught ReferenceError: Game is not defined

エラーメッセージに書いてあるとおり、 enchant と Game がどこにも定義されていないので動作しません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/07/17 13:33

    「2」が解決しました、ありがとうございました!!!!
    「1」も引き続き、何卒、よろしくお願い致しますm(_ _)m

    キャンセル

  • 2019/07/18 14:50

    まずは自分で調べてみましょう。 「monaca www」で検索するだけでこのようなページが出てきます。
    https://docs.monaca.io/ja/products_guide/monaca_cli/dependencies/file_dir/
    公式ドキュメントですね。この中に www フォルダの構成についても記載されています。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.04%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る