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

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

ただいまの
回答率

88.57%

【HELP!!】enchant.jsを使用した、Monacaでのゲーム開発にとまどっています。

解決済

回答 1

投稿 編集

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

前提・実現したいこと

ハイブリッドアプリ開発サイトのMonacaを使用して、アプリ開発を勉強しています。
基本的に、「つくりながら覚える スマホゲームプログラミング」という本を参考に、例として書かれているコードを書いてます。
HTML&CSSとJavascriptに加えて、enchant.jsを使用して、ゲームを作成したいのですが、onclick="startNow()"がうまく定義できていないようでエラーになってしまいます。

発生している問題・エラーメッセージ

ReferenceError: Can`t find Valiable : startNow 

該当のソースコード

<index.html>

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; 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 src="main.js></script>
    <style type="text/css">
    body {
      margin: 0px;
      padding: 0px;
    }
    </script>
</head>
<body> 
<div id="msg" style="position:absolute; width:100%; height:100%; background-color:#fff111; font-size:30pt;" onclick="startNow();">POCKET</div>
</body>
</html>

<main.js>

var game_flg = true;
var game = null;
var player = null;
var effect = null;
var score = null;
var score_point = 0;
var bg_image = null;
var sprite_size = 200;
var horizon = 200;
var play_time = 70000;
var move_point = 0;
var move_dx = 10;
var interval_time = 10000;
var enemy_data = [];
var item_data = [];


var walk = {
  "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/character.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);

    moveTo = 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_pont > player.x){
    player.frame = walk.right;
  }else{
    player.frame = walk.left;
  }
}

//プレイヤーをタッチ
function touch_player(event){
  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.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";
  meg.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);
}

試したこと

「index.html」の保存場所を「www」の直下にすると、「Not find wwww/index.html」の出力はなくなりました。

補足情報(FW/ツールのバージョンなど)

「index.html」「main.js」は「www」ファルダ内に入っています。

  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

    <script src="main.js></script> // <- ダブルコーテーションで閉じ忘れ
    <style type="text/css">
    body {
      margin: 0px;
      padding: 0px;
    }
    </script> // <- ここ</script>ではない

ダブルコーテーションとか閉じタグが間違ってますね

  <script src="main.js"></script>
  <style type="text/css">
    body {
      margin: 0px;
      padding: 0px;
    }
    </style>

こうですね。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2020/06/18 12:31

    ありがとうございます!!
    非常にわかりやすかったです!

    頑張ります!

    キャンセル

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

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

関連した質問

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