teratail
回答率
85.48%
質問するログイン新規登録

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

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

新規登録して質問してみよう
ただいま回答率
85.48%
トップHTMLに関する質問
HTML

HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

213閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

HTML

HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

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を使ってます。

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

DrqYutoが👍を押しています

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1件

0

ベストアンサー

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

投稿2019/09/22 06:43

kyoya0819
kyoya0819

総合スコア10429

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2019/09/22 06:45

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

2019/09/22 06:45

httpsから始めてください
退会済みユーザー

退会済みユーザー

2019/09/22 06:49

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

2019/09/22 06:50

解決して何よりです
退会済みユーザー

退会済みユーザー

2019/09/22 06:50

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問

トップHTMLに関する質問

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