回答率: 85.36%

質問するログイン新規登録

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

詳細はこちら

トップ HTMLに関する質問

Q&A

解決済

1回答

255閲覧

表示されるようにしたいです。

退会済みユーザー

総合スコア0

1グッド

1クリップ

投稿2019/09/22 06:41

1

1

前提・実現したいこと

エラーを直し、chromeで実行できるようにしたいです。

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

該当のソースコード

html
1<html>
2    <head>
3        <meta charset="utf-8" />
4        <meta name="viewport" content="width=device-width, user-scalable=no" />
5        <meta name="apple-mobile-web-app-capable" content="yes" />
6
7        <title>パーティクル</title>
8        <meta name="description" content="${description}" />
9
10        <style>
11            *, *:before, *:after {
12                box-sizing: border-box; 
13            }
14            html {
15                font-size: 62.5%;
16            }
17            body {
18                color: #444;
19                background-color: hsl(0, 0%, 96%);
20            }
21            h1 {
22                font-size: 1.8rem;
23            }
24        </style>
25    </head>
26    <body>
27        <script src="//cdn.rawgit.com/phi-jp/phina.js/v0.2.0/build/phina.js"></script>
28        <script>
29
30// グローバルに展開
31phina.globalize();
32
33// 定数
34var SCREEN_WIDTH    = 640;
35var PARTICLE_NUM    = 1024;
36var FRICTION        = 0.96;
37var TO_DIST         = SCREEN_WIDTH*0.86;
38var STIR_DIST       = SCREEN_WIDTH*0.125;
39var BLOW_DIST       = SCREEN_WIDTH*0.4;
40
41/*
42 * パーティクル
43 */
44phina.define('Particle', {
45  superClass: 'StarShape',
46  
47  init: function(color) {
48    this.superInit({
49      fill: color,
50      stroke: null,
51      radius: 4,
52    });
53    
54    this.v = Vector2(0, 0);
55    this.blendMode = 'lighter';
56  },
57  
58  update: function(app) {
59    var p  = app.pointer;
60    var dv = Vector2.sub(this, p);
61    var d  = dv.length() || 0.001;
62    dv.div(d);  // normalize
63    
64    // タッチによる反発
65    if (p.getPointing()) {
66      if (d < BLOW_DIST) {
67        var blowAcc = (1 - (d/BLOW_DIST)) * 14;
68        this.v.x += dv.x * blowAcc + 0.5 - Math.random();
69        this.v.y += dv.y * blowAcc + 0.5 - Math.random();
70      }
71    }
72
73
74    // 距離が一定以内だと速度を調整する
75    if (d<TO_DIST) {
76      var toAcc = ( 1 - ( d / TO_DIST ) ) * SCREEN_WIDTH * 0.0014;
77      this.v.x -= dv.x * toAcc;
78      this.v.y -= dv.y * toAcc;
79    }
80
81
82    if (d<STIR_DIST) {
83      var mAcc = ( 1 - (d / STIR_DIST) * SCREEN_WIDTH * 0.00026 );
84      this.v.x += p.dx * mAcc * 0.1;
85      this.v.y += p.dy * mAcc * 0.1;
86    }
87
88    // 摩擦
89    this.v.mul(FRICTION);
90    // 移動
91    this.position.add(this.v);
92    
93    // ハミ出しチェック
94    if (this.x > SCREEN_WIDTH) {
95      this.x = SCREEN_WIDTH; this.v.x *= -1;
96    }
97    else if (this.x < 0) {
98      this.x = 0; this.v.x *= -1;
99    }
100    if (this.y > app.height) {
101      this.y = app.height; this.v.y *= -1;
102    }
103    else if (this.y < 0) {
104      this.y = 0; this.v.y *= -1;
105    }
106
107    // スケール
108    var scale = this.v.lengthSquared() * 0.04;
109    scale = Math.clamp(scale, 0.75, 2);
110    this.scaleX = this.scaleY = scale;
111    
112    // 回転
113    this.rotation += scale*10;
114  },
115  
116});
117
118
119
120/*
121 * メインシーン
122 */
123phina.define('MainScene', {
124  // 継承
125  superClass: 'DisplayScene',
126
127  // 初期化
128  init: function() {
129    // super init
130    this.superInit();
131
132    // 背景色
133    this.backgroundColor = '#222';
134
135    // パーティクルを生成
136    (PARTICLE_NUM).times(function() {
137      var color = "hsla({0}, 75%, 50%, 1)".format(Math.randint(0, 360));
138      var p = Particle(color).addChildTo(this);
139      p.x = Math.randint(0, this.gridX.width);
140      p.y = Math.randint(0, this.gridY.width);
141    }, this);
142  },
143
144  onkeydown: function(e) {
145    // space if push space
146    if (e.keyCode === 32) {
147      this.app.stop();
148    }
149  },
150});
151
152/*
153 * メイン処理
154 */
155phina.main(function() {
156  // アプリケーションを生成
157  var app = GameApp({
158    startLabel: 'main', // MainScene から開始
159  });
160
161  app.enableStats();
162
163  // 実行
164  app.run();
165});
166
167
168        </script>
169    </body>
170</html>

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

mac book air
Visual Studio Codeを使ってます。

どなたかわかる方ご教授お願いします。
また、初心者のため、不足している部分があると思いますのでその時はご指摘お願いします。

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

回答1件

0

ベストアンサー

ローカルで開発しているならパスを//から始めないでください。

投稿2019/09/22 06:43

総合スコア10429

退会済みユーザー

2019/09/22 06:45

//を消せばいいのですか？

2019/09/22 06:45

httpsから始めてください

2019/09/22 06:46

https://qiita.com/Kouch/items/5089fb36694c6e467a3a が参考になると思います。

退会済みユーザー

2019/09/22 06:49

ありがとうございます！！解決できました！！なんか前のを読み返してたら前回のやつと同じでしたね。すみません。ありがとうございました。m(_ _)m　ベストアンサーとさせていただきます。

2019/09/22 06:50

解決して何よりです

退会済みユーザー

2019/09/22 06:50

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

2019/09/22 10:11

前の質問はなんだったんでしょう。 https://teratail.com/questions/213076

2019/09/22 10:14

昨日...

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.36%

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

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

関連した質問

トップ HTMLに関する質問

表示されるようにしたいです。