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

前提・実現したいこと

ハイブリッドアプリ開発サイトの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」ファルダ内に入っています。

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

JS
1  <script src="main.js"></script>
2  <style type="text/css">
3    body {
4      margin: 0px;
5      padding: 0px;
6    }
7    </style>

こうですね。

投稿2020/06/15 14:27

rururu3

総合スコア5545

bananaboy_lab

2020/06/18 03:31

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

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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