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

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

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

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

Q&A

0回答

1384閲覧

p5.jsでブロック崩しのGameOver判定とGameClear判定を走らせたい

HYoshitaka

総合スコア14

JavaScript

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

0グッド

0クリップ

投稿2021/11/17 05:49

編集2021/11/17 05:53

p5.jsを使って下記のコードを走らせているのですが、
ブロックをすべて消した際に
function drawの中の
ゲームオーバールールの中の

text("Game Over",150,200); ```の箇所だけ表示されません。 ゲームクリアールールの中の ```ここに言語を入力 text("GameClear",50,200);

も同様に表示されず、なぜか

text("Game Over",150,200);

の方が表示されます。
原因と解決策をご教示いただけますでしょうか。

以下がソースコードです。

let count =0; let score = 0; let interval = setInterval(draw, 10); function setup() { createCanvas(400, 400); for(let i=0; i<12; i=i+1) { // 剰余を使ってブロックのx成分を作成,floor関数を使ってブロックのy成分を作成 let p = new Vec2(90*(i%4)+50, 50*floor(i/4)+50); blocks.push(new Block(p, 20)); count++; } } class Vec2 { constructor(_x,_y) { this.x = _x; this.y = _y; } // このベクトルと引数のベクトルbの和を計算 add(b) { let a = this; return new Vec2(a.x+b.x, a.y+b.y); } // このベクトルの実数s倍(スカラー倍)を求める mul(s) { let a = this; return new Vec2(s*a.x, s*a.y); } // ブロックとボールの2点間のベクトルの大きさを求める mag() { let a = this; return sqrt(a.x**2 + a.y**2); } sub(b) { let a = this; return new Vec2(a.x-b.x, a.y-b.y); } // このベクトルを正規化したベクトルを求める norm() { let a = this; return a.mul(1/a.mag()); } // cosθを求めるためにベクトルbのドット積を求める(内積) dot(b) { let a = this; return a.x*b.x + a.y*b.y; } // 反射ベクトルを求める reflect(w) { let v = this; let cosTheta = v.mul(-1).dot(w)/(v.mul(-1).mag()*w.mag()); let n = w.norm().mul(v.mag()*cosTheta); let r = v.add(n.mul(2)); return r; } } class Ball { constructor(_p,_v,_r) { this.p = _p; this.v = _v; this.r = _r; } } class Block { constructor(_p, _r) { this.p =_p; //ブロックの中心の位置ベクトル this.r =_r; //ブロックの半径 } } class Paddle { constructor(_p,_r) { this.p = _p; this.r = _r; } } // ボールを作る let ball = new Ball( new Vec2(200,300), new Vec2(240,-60), 15 ); // ブロックを作る let blocks =[]; // パドルを作る let paddle = new Paddle(new Vec2(200, 370), 120); function draw() { // ボールを移動させる ball.p = ball.p.add(ball.v.mul(1/60)); // ボールを壁に反射させる 右端,左端 // 380 = canvasの横幅(400) - ボールの半径(40/2) if (ball.p.x > 385 || ball.p.x < 15) { ball.v.x = -ball.v.x; } // ボールを壁に反射させる 上端 if (ball.p.y < 15 ) { ball.v.y = -ball.v.y; } // ゲームオーバールール if ( ball.p.y >385 ){ textSize(24); fill(0); text("Game Over",150,200); noLoop(); } // 衝突判定 for (let block of blocks) { let d = block.p.sub(ball.p).mag(); //距離 if (d < (ball.r+block.r)) { let v = ball.v; // 法線ベクトルwを作成 let w = ball.p.sub(block.p); // cosθを算出 let r = ball.v.reflect(w); ball.v = r; // ブロックを消す blocks.splice(blocks.indexOf(block),1); score = score +10; count--; } //ゲームクリアールール if(count==0){ fill(127); textSize(24); text("GameClear",50,200); } // パドルの操作 paddle.p.x = mouseX; // ボールとパドルの衝突判定 let d2 = paddle.p.sub(ball.p).mag(); //距離 if (d2 < (ball.r+paddle.r)) { let v = ball.v; let w = ball.p.sub(paddle.p); let r = ball.v.reflect(w); ball.v = r; // めり込み防止 ball.p = paddle.p.add(w.norm().mul(ball.r + paddle.r)); } // 描画 background(220); // ボール描写 circle(ball.p.x,ball.p.y,2*ball.r) for(let b of blocks) { // ブロック描写 circle(b.p.x, b.p.y, 2*b.r); } // パドル描写 circle(paddle.p.x, paddle.p.y, 2*paddle.r); // スコア描写 textSize(28); text(score,350,50); } }

実際の挙動確認かこちらからご確認ください
https://editor.p5js.org/yoshihase/full/7QKDp2g_J

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問