実行したら表示されませんでした。

私は今、javascriptで下のサイトを見てアプリを作っています。
→ブロック崩し
ですが、ブラウザ上で実行したらなにも表示されませんでした。どなたかわかる方ご教授願いますm(_ _)m

前提・実現したいこと

表示されないのを表示されるようにしたい。
最終的にはブロック崩しをプレイできるようにしたいです。

該当のソースコード

html
1<!doctype html>
2 
3<html>
4  <head>
5    <meta charset="utf-8" />
6    <meta name="viewport" content="width=device-width, user-scalable=no" />
7    <meta name="apple-mobile-web-app-capable" content="yes" />
8    
9    <title>ブロック崩し</title>
10    <meta name="description" content="${description}" />
11    
12    <style>
13    *, *:before, *:after {
14        box-sizing: border-box; 
15      }
16      html {
17        font-size: 62.5%;
18      }
19      body {
20        color: #444;
21        background-color: hsl(0, 0%, 96%);
22      }
23      h1 {
24        font-size: 1.8rem;
25      }
26      
27      </style>
28  </head>
29  <body>
30    <script src="//cdn.rawgit.com/phi-jp/phina.js/v0.2.0/build/phina.js"></script>
31    <script>
32    /** Runstant* 思いたったらすぐ開発. プログラミングに革命を...*/
33
34phina.globalize();
35
36var SCREEN_WIDTH    = 640;
37var SCREEN_HEIGHT   = 960;
38var MAX_PER_LINE    = 8;
39var BLOCK_NUM       = MAX_PER_LINE*5;
40var BLOCK_SIZE      = 64;
41var BOARD_PADDING   = 50;
42var PADDLE_WIDTH    = 150;
43var PADDLE_HEIGHT   = 32;
44var BALL_RADIUS     = 16;
45var BALL_SPEED      = 16;
46
47var BOARD_SIZE      = SCREEN_WIDTH - BOARD_PADDING*2;
48var BOARD_OFFSET_X  = BOARD_PADDING+BLOCK_SIZE/2;
49var BOARD_OFFSET_Y  = 150;
50
51phina.define("MainScene", {
52  superClass: 'DisplayScene',
53
54  init: function(options) {
55    this.superInit(options);
56
57    // スコアラベル
58    this.scoreLabel = Label('0').addChildTo(this);
59    this.scoreLabel.x = this.gridX.center();
60    this.scoreLabel.y = this.gridY.span(1);
61    this.scoreLabel.fill = 'white';
62
63    // グループ
64    this.group = DisplayElement().addChildTo(this);
65
66    var gridX = Grid(BOARD_SIZE, MAX_PER_LINE);
67    var gridY = Grid(BOARD_SIZE, MAX_PER_LINE);
68
69    var self = this;
70
71    (BLOCK_NUM).times(function(i) {
72      // グリッド上でのインデックス
73      var xIndex = i%MAX_PER_LINE;
74      var yIndex = Math.floor(i/MAX_PER_LINE);
75      var angle = (360)/BLOCK_NUM*i;
76      var block = Block(angle).addChildTo(this.group).setPosition(100, 100);
77
78      block.x = gridX.span(xIndex) + BOARD_OFFSET_X;
79      block.y = gridY.span(yIndex)+BOARD_OFFSET_Y;
80    }, this);
81
82    // ボール
83    this.ball = Ball().addChildTo(this);
84
85    // パドル
86    this.paddle = Paddle().addChildTo(this);
87    this.paddle.setPosition(this.gridX.center(), this.gridY.span(15));
88    this.paddle.hold(this.ball);
89
90    // タッチでゲーム開始
91    this.ballSpeed = 0;
92    this.one('pointend', function() {
93      this.paddle.release();
94      this.ballSpeed = BALL_SPEED;
95    });
96
97    // スコア
98    this.score = 0;
99    // 時間
100    this.time = 0;
101    // コンボ
102    this.combo = 0;
103  },
104
105  update: function(app) {
106    // タイムを加算
107    this.time += app.deltaTime;
108
109    // パドル移動
110    this.paddle.x = app.pointer.x;
111    if (this.paddle.left < 0) {
112      this.paddle.left = 0;
113    }
114    if (this.paddle.right > this.gridX.width) {
115      this.paddle.right = this.gridX.width;
116    }
117
118    // スピードの数分, 移動と衝突判定を繰り返す
119    (this.ballSpeed).times(function() {
120      this.ball.move();
121      this.checkHit();
122    }, this);
123
124    // ブロックがすべてなくなったらクリア
125    if (this.group.children.length <= 0) {
126      this.gameclear();
127    }
128  },
129
130  checkHit: function() {
131    //
132    var ball = this.ball;
133
134    // 画面外対応
135    if (ball.left < 0) {
136      ball.left = 0;
137      ball.reflectX();
138    }
139    if (ball.right > this.gridX.width) {
140      ball.right = this.gridX.width
141      ball.reflectX();
142    }
143    if (ball.top < 0) {
144      ball.top = 0;
145      ball.reflectY();
146    }
147    if (ball.bottom > this.gridY.width) {
148      ball.bottom = this.gridY.width
149      ball.reflectY();
150      this.gameover();
151    }
152
153    // ボールとパドル
154    if (ball.hitTestElement(this.paddle)) {
155      ball.bottom = this.paddle.top;
156
157      var dx = ball.x - this.paddle.x;
158      ball.direction.x = dx;
159      ball.direction.y = -80;
160      ball.direction.normalize();
161
162      // speed up
163      this.ballSpeed += 1;
164
165      // コンボ数をリセット
166      this.combo = 0;
167    }
168
169    this.group.children.some(function(block) {
170      // ヒット
171      if (ball.hitTestElement(block)) {
172        var dq = Vector2.sub(ball, block);
173
174        if (Math.abs(dq.x) < Math.abs(dq.y)) {
175          ball.reflectY();
176          if (dq.y >= 0) {
177            ball.top = block.bottom;
178          }
179          else {
180            ball.bottom = block.top;
181          }
182        }
183        else {
184          ball.reflectX();
185          if (dq.x >= 0) {
186            ball.left = block.right;
187          }
188          else {
189            ball.right = block.left;
190          }
191        }
192
193        block.remove();
194
195        this.combo += 1;
196        this.score += this.combo*100;
197
198        var c = ComboLabel(this.combo).addChildTo(this);
199        c.x = this.gridX.span(12) + Math.randint(-50, 50);
200        c.y = this.gridY.span(12) + Math.randint(-50, 50);
201
202        return true;
203      }
204    }, this);
205  },
206
207  gameclear: function() {
208    // add clear bonus
209    var bonus = 2000;
210    this.score += bonus;
211
212    // add time bonus
213    var seconds = (this.time/1000).floor();
214    var bonusTime = Math.max(60*10-seconds, 0);
215    this.score += (bonusTime*10);
216
217    this.gameover();
218  },
219
220  gameover: function() {
221    this.exit({
222      score: this.score,
223    });
224  },
225
226  _accessor: {
227    score: {
228      get: function() {
229        return this._score;
230      },
231      set: function(v) {
232        this._score = v;
233        this.scoreLabel.text = v;
234      },
235    },
236  }
237
238});
239
240/*
241 * ブロック
242 */
243phina.define('Block', {
244  superClass: 'RectangleShape',
245
246  init: function(angle) {
247    this.superInit({
248      width: BLOCK_SIZE,
249      height: BLOCK_SIZE,
250      fill: 'hsl({0}, 80%, 60%)'.format(angle || 0),
251      stroke: null,
252      cornerRadius: 8,
253    });
254  },
255});
256
257/*
258 * ボール
259 */
260phina.define('Ball', {
261  superClass: 'CircleShape',
262
263  init: function() {
264    this.superInit({
265      radius: BALL_RADIUS,
266      fill: '#eee',
267      stroke: null,
268      cornerRadius: 8,
269    });
270
271    this.speed = 0;
272    this.direction = Vector2(1, -1).normalize();
273  },
274
275  move: function() {
276    this.x += this.direction.x;
277    this.y += this.direction.y;
278  },
279
280  reflectX: function() {
281    this.direction.x *= -1;
282  },
283  reflectY: function() {
284    this.direction.y *= -1;
285  },
286});
287
288/*
289 * パドル
290 */
291phina.define('Paddle', {
292  superClass: 'RectangleShape',
293  init: function() {
294    this.superInit({
295      width: PADDLE_WIDTH,
296      height: PADDLE_HEIGHT,
297      fill: '#eee',
298      stroke: null,
299      cornerRadius: 8,
300    });
301  },
302
303  hold: function(ball) {
304    this.ball = ball;
305  },
306
307  release: function() {
308    this.ball = null;
309  },
310
311  update: function() {
312    if (this.ball) {
313      this.ball.x = this.x;
314      this.ball.y = this.top-this.ball.radius;
315    }
316  }
317});
318
319/*
320 * コンボラベル
321 */
322phina.define('ComboLabel', {
323  superClass: 'Label',
324  init: function(num) {
325    this.superInit(num + ' combo!');
326
327    this.stroke = 'white';
328    this.strokeWidth = 8;
329
330    // 数によって色とサイズを分岐
331    if (num < 5) {
332      this.fill = 'hsl(40, 60%, 60%)';
333      this.fontSize = 16;
334    }
335    else if (num < 10) {
336      this.fill = 'hsl(120, 60%, 60%)';
337      this.fontSize = 32;
338    }
339    else {
340      this.fill = 'hsl(220, 60%, 60%)';
341      this.fontSize = 48;
342    }
343
344    // フェードアウトして削除
345    this.tweener
346      .by({
347        alpha: -1,
348        y: -50,
349      })
350      .call(function() {
351        this.remove();
352      }, this)
353      ;
354  },
355});
356
357
358phina.main(function() {
359  var app = GameApp({
360    title: 'Breakout',
361    startLabel: location.search.substr(1).toObject().scene || 'title',
362    width: SCREEN_WIDTH,
363    height: SCREEN_HEIGHT,
364    backgroundColor: '#444',
365    autoPause: true,
366    debug: false,
367  });
368
369  app.enableStats();
370
371  app.run();
372});
373</script>
374  </body>
375</html>
376
377

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

試したこと

すみません、ありません。

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

Visual Studio Code 1.38.0
Mac Air 10.14.6

コードで何か間違いがあればお願いします。
何か追記が必要な場合はご指摘お願いします。

siruku6

2019/09/21 07:24

ブラウザの開発者ツールのコンソール（console）に、何かjavascriptのエラーは出ていませんか？ javascriptがメインの開発では、そこからエラー原因を探っていくのが一番の近道だと思います。

退会済みユーザー

2019/09/21 07:24

編集します。ご指摘ありがとうございますm(_ _)m

siruku6

2019/09/21 07:29 編集

はい。それから、タグは'html'よりもjavascriptの方がいろんな人の目に留まると思います。（内容としては、javascriptの問題だと思いますので）というのと、「下のサイトを見てアプリを作っています」と書いてあるようなので、参照しているサイトのURLを貼っておいた方が、回答が得られやすくなるかもしれませんね。

退会済みユーザー

2019/09/21 07:26

編集しました。

m.ts10806

2019/09/21 07:26

このコードのゴールを明示してください。「表示されないのを表示されるように」だけだと「何でもいいから出ればいいの？」と多くの人が感じます。

退会済みユーザー

2019/09/21 07:27

すみません。編集します。

退会済みユーザー

2019/09/21 07:29

編集しました

m.ts10806

2019/09/21 07:43 編集

>最終的にはブロック崩しをプレイできるようにしたいです。えーと私の書き方が悪かったです。申し訳ない。「このコードを実行するとどうなるのが正しいのか」です。何がどう表示されるとか、どう動くとか、もっと細かいところです。

退会済みユーザー

2019/09/21 07:45

なるほど・・・ >えーと私の書き方が悪かったです。申し訳ない。いえいえ、私がよく理解していなかったので私が悪いんです。

m.ts10806

2019/09/21 07:46

そこはせっかくの質問テンプレートフルに活用したほうが良いです。関係なさそうだから項目削除とかしていると必要な情報が省略されてしまうことにもなりえるので。

退会済みユーザー

2019/09/21 07:48

そうですね。ご指摘いただきありがとうございますm(_ _)m 編集してこの質問は終了いたします。ありがとうございましたm(_ _)m

siruku6

2019/09/21 07:52

大分回答をもらいやすいものになったと思います。今後もぜひ頑張ってください。

退会済みユーザー

2019/09/21 07:54

はい！！ありがとうございましたm(_ _)m

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

回答1件

ベストアンサー

スキーム省略するとローカルではfile:になるはずなので動かないのだと思います。

html
1<script src="//cdn.rawgit.com/phi-jp/phina.js/v0.2.0/build/phina.js"></script>

↓

html
1<script src="https://cdn.rawgit.com/phi-jp/phina.js/v0.2.0/build/phina.js"></script>

投稿2019/09/21 07:29

Lhankor_Mhy

総合スコア36928

退会済みユーザー

2019/09/21 07:31

ありがとうございます！！解決することができました！！1日に二回も回答をありがとうございますm(_ _)m 本当に助かります。ベストアンサーにさせてもらいました。(^^)

退会済みユーザー

2019/09/21 07:33

素早い回答ありがとうございます！！

m.ts10806

2019/09/21 07:34

公式？はhttp込みですね。 https://phinajs.com/  <script src='http://cdn.rawgit.com/phi-jp/phina.js/v0.2.0/build/phina.js'></script> https://github.com/phinajs/phina.js <script src='https://rawgit.com/phi-jp/phina.js/v0.1.2/build/phina.js'></script> 何を参考にしたんだろう・・・

Lhankor_Mhy

2019/09/21 07:44 編集

このcdn、トップを見に行ったら2019年10月でクローズするとのこと。 https://rawgit.com/ こちらに乗り換えた方がいいのかもですね。 https://cdn.jsdelivr.net/gh/phi-jp/phina.js@v0.2.0/build/phina.js https://www.jsdelivr.com/package/npm/phina.js

退会済みユーザー

2019/09/21 07:45

ありがとうございますm(_ _)m

m.ts10806

2019/09/21 07:51

Lhankor_Mhyさん CDNはあくまで外部の仕組みなので、注意が必要ですね。「昨日まで動いてたのに」は私も経験があります。

退会済みユーザー

2019/09/21 07:52

そうなんですね。私に言っていないようですが、知識が一つ増えました。ありがとうございます。

Lhankor_Mhy

2019/09/21 07:54

> m.ts10806さん githubのコードをラップして自動生成してるCDNもありますからね……

m.ts10806

2019/09/21 07:59

tonkoさん１つ前のコメントではアンカー忘れてましたので、つけましたが、これは質問者というより、CDN使う人全員が注意すべきだなと思いました。なので、一応、認識しておいてください。 Lhankor_Mhyさんそうなんですね。CDNは便利ですが、なんでもかんでも使えばいいというわけではないのを再認識しました。公式が配布していれば問題ない・・・と思いきや、サービス自体が終了する場合もあるし、公式が廃止する場合もあるので、、「そういうことがある」と認識しておけばある日突然動かなくなっても混乱少なくて済みそうです。 CDN提供サーバーが変わるだけならまだいいですけどね

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