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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

842閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

2グッド

2クリップ

投稿2019/09/21 07:20

編集2019/09/21 07:51

私は今、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

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

dotnetuseryamag, DrqYuto👍を押しています

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

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

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

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

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

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
guest

回答1

0

ベストアンサー

スキーム省略するとローカルでは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

総合スコア35869

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

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

退会済みユーザー

退会済みユーザー

2019/09/21 07:31

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

退会済みユーザー

2019/09/21 07:33

素早い回答ありがとうございます!!
退会済みユーザー

退会済みユーザー

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問