HTMLのdrawCircleが動作しません。

youtubeのチュートリアルを参考にワンタップゲームを作っています。
（ログイン後のゲーム画面をつくるところでつまづいています。
ログイン画面が完成して、動作を確認してから、次のゲーム画面を作り始めたのですが、ログイン画面も表示されなくなってしまいました。）
drawCircleが動作していません・・・
アプリを作るのは初めてなので右も左もわかりません。
ご教授お願いいたします。

（アプリキーとクライアントキーは偽です。）

発生している問題

ログイン画面が表示されない。
ゲーム開始画面が表示されない
drawCircleが表示されない。
コンソールにエラーメッセージを表示させたい。

console.error("表示テスト");は何行目に入れたらよろしいでしょうか？

問題の発生している環境

HTML5
iMac(10.11.2)
Chrome(48.0.2564.116 (64-bit))

game.html

html
1<!DOCTYPE HTML>
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <link rel="stylesheet" href="components/loader.css">
7    <link rel="stylesheet" href="css/style.css">
8    <script src="components/loader.js"></script>
9    <script src="js/ncmb-2.0.0.min.js"></script>
10    <script>
11        // Add your code here
12    </script>
13    <style>
14        body {
15            background-color: #BBDEFB;
16        }
17        form {
18            width: 320;
19            margin: 30px auto;
20            text-align: center;
21        }
22        input {
23            border-radius: 5px;
24            padding: 7px;
25            margin-bottom: 10px;
26            width: 200px;
27            font-size: 20px;
28        }
29    </style>
30</head>
31<body>
32
33    <form>
34        <input type="text" id="username" placeholder="User name" />
35        <input type="password" id="password" placeholder="Password" />
36        <input type="submit" value="Register/Login" />
37    </form>
38    
39    <script>
40        (function() {
41            // mBaaSの初期化
42            var application_key = "5c27d2358af5fba85be1226b05c7a9cf9d3a13dc0d40b4136e49c168c8a1";
43            var client_key = "3e53a2f7dbf33deef6e5b5316c31bdb7b73f9e1aaa1df6a957f729ee8ef4";
44            var ncmb = new NCMB(application_key, client_key);
45            
46            // ログインチェック
47            var user = ncmb.User.getCurrentUser();
48            if (user !== null) {
49                location.href = "./game.html";
50            }
51            
52            // ログイン処理
53            $("form").on("submit", function() {
54                var username = $("#username").val();
55                var password = $("#password").val();
56                
57                ncmb.User.login(username, password)
58                .then(function() {
59                    // ログイン成功
60                    location.href = "./game.html";
61                    // alert("ログイン" + ncmb.User.getCurrentUser().userName);
62                })
63                .catch(function() {
64                   // ログイン失敗
65                   var user = new ncmb.User({
66                       userName: username,
67                       password: password
68                   });
69                   // 新規登録処理
70                   user.signUpByAccount()
71                   .then(function() {
72                        ncmb.User.login(username, password)
73                        .then(function() {
74                            // ログイン成功
75                            location.href = "./game.html";
76                            // alert("会員登録" + ncmb.User.getCurrentUser().userName);
77                        });
78                       
79                   });
80                });
81                return false; 
82            });
83        })();
84    </script>
85</body>
86</html>

index.html

html
1
2<html>
3<head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
6    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
7    <link rel="stylesheet" href="components/loader.css">
8    <link rel="stylesheet" href="css/style.css">
9    <script src="components/loader.js"></script>
10    <script src="js/ncmb-2.0.0.min.js"></script>
11    <script>
12
13        (function(){
14            //mBaaSの初期化
15            var application_key = "5c27d2358af5fba85be1226b05c7a9cf9d3a13dc0d40b4136e49c168c8a1";
16            var client_key = "3e53a2f7dbf33deef6e5b5316c31bdb7b73f9e1aaa1df6a957f729ee8ef4";
17            var ncmb = new NCMB(application_key, client_key);
18            
19            var user = ncmb.User.getCurrentUser();
20            
21            // ログインチェック
22            if (user == null) {
23                location.href = "./index.html";
24            } else {
25                $("#username").text(user.userName + '(Log out)');
26            }
27           
28           // ログアウト
29           $("#username").on("click", function() {
30               ncmb.User.logout()
31               .then(function() {
32                   location.href = "./index.html";
33               })
34           });
35           
36           // canvasの設定
37           var canvas = document.getElementById("mycanvas");
38           var ctx = canvas.getContext("2d");
39           
40           //変数
41           var centerX = canvas.width / 2;
42           var centerY = canvas.height / 2;
43           var r;
44           var timerId;
45          
46          //スタート画面
47           ctx.font = "normal 28px Verdana";
48           ctx.textAlign = "center";
49           ctx.fillStyle = "#FFFFFF";
50           
51           ctx.fillText("Stop at Target!", centerX, centerY);
52          
53          //イベントの設定
54           $("#mycanvas").on("click", function() {
55               r = 0;
56               drawCircle()；
57           });
58           
59           //円を描く
60           function drawCircle() {
61               // クリア
62               ctx.fillStyle = "#BBDEFB";
63               ctx.fillRect(0, 0, canvas.width, canvas.height);
64               
65               //円を描く
66               ctx.fillStyle = "#1976D2";
67               ctx.beginPath();
68               ctx.arc(centerX, centerY, r, 0, Math.PI * 2, false);
69               ctx.fill();
70               
71               r++;
72               timerId = setTimeout(function() {
73                   drawCircle();
74               }, 12);
75           }
76        })();        
77    </script>
78    <style>
79        body{
80            background-color: #BBDEFB;
81            padding-top: 20px;
82            font-family: Verdana, sans-serif;
83            text-align: center;
84        }
85        #mycanvas {
86            margin: 10px auto;
87        }
88    </style>
89</head>
90<body>
91    <div id="username"></div>
92    <canvas id="mycanvas" width="300" height="300"></canvas>
93</body>
94</html>
95</html>

argius

2016/03/03 10:37

drawCircle(;)になっていますね。drawCircle();に修正してください。コンソールのエラーは確認しましたか？

Tan3

2016/03/03 10:42

argiusさんありがとうございます。すみません、コンソールにエラーが表示されません・・・。なにかコードを入力しないと表示されないのでしょうか？初歩的な質問ですみません。

argius

2016/03/03 10:48

まずは、console.logは、function drawCircle()の次の行に入れてから、drawCircle()が実行されるような操作をして、drawCircle()が呼ばれたかどうかを確認してみてください。

Tan3

2016/03/03 11:21

agriusさん drawCircle():修正しましたが、まだ動作しません。コンソールやってみます。何度もありがとうございます。

gakintosh

2016/03/03 13:25 編集

$(function(){　の行ですが、以下のように記載するのではないでしょうか？ (function() { … })(); 適当に以下のURL先を参考にしましたが・・ http://blog.livedoor.jp/eeu/archives/55310188.html 間違えていたらすみません。あと、コードを載せて誰かに質問するときはコードに行番号をつけると、回答もしやすいと個人的に思います。

Tan3

2016/03/03 13:58

gakintoshさん回答ありがとうございます。 $(function(){　の行に()を追加しました。しかし、まだ動きません・・・。コードの行番号のつけ方を教えていただけるとありがたいです。丁寧な回答ありがとうございます。

gakintosh

2016/03/03 14:29

Tan3さん＞　$(function(){　の行に()を追加しました。いえいえ、「　$(function(){　」の行では、$を消してみてください。そして、それと対応する「　});　」を「　})();　」にしてみてください。行番号を出力する方法ですが、windows、Linuxかで方法は変わりますが、 Windowsだったら、コマンドプロンプト開いて、 > find /v /n "" game.html Linuxだったら > cat -n game.html とすると行番号がついたもので出力されるのでそれをコピーして貼り付け、といった感じで私はよくやっています。