Q&A
forブロック以下の各行を日本語で説明してください
rxは中心の座標とのことですが何か計算しています
この計算の意味を説明してください
多分反射判定はifのところなのでしょうけど、何故このロジックなのか説明してください
前提
プログラミングを最近始めた者です。せっかく始めたので簡単なブロック崩しでも作ろうかと思いやってみたのですが、どうにもボールをブロックに反射させるのがうまくいきません。解決方法がわかる方いたら教えていただきたいです。
該当のソースコード
p5.js
1ソースコード(cx,cyはボールの中心の座標、vyはボールの移動速度です) 2```function Block2(){ 3 for(let i = 0; i < 160; i = i + 1){ 4 let rx = 67*(i%20)+100; 5 let ry = 40*floor(i/20)+20; 6 fill(150,255,156); 7 rect(rx, ry, 40, 20); 8 if(((cx > rx) && (cx < rx + 40) && (cy < ry + 20)) || ((cx > rx) && (cx < rx + 40) && (cy > ry + 20))){ 9 vy = -1*vy 10 } 11 }//二番目以降のブロック 12 13### 試したこと 14 15ブロックがこれの下にもう一つあって、そちらは同じように書いてうまく反射できています。 16他のコードが知りたいなどあれば遠慮なく言っていただきたいです。回答よろしくお願いいたします。
コメントありがとうございます。
えっと、ボール(円)の中心の座標がcx,cyで、rx,ryはrectの座標で、rectを縦横８×２０に並べたかったのでこういう計算になっています。ごちゃごちゃした定数はいい感じになった数字を入れているだけです。
if文は、ボールがrectの内側にあって、かつrectnの上側か下側に引っ付いた場合に移動の向きを反対にすればいけるかなと思ってこの式になっています。
いかがでしょうか?
反射処理をさせたいならまずx方向の移動量とy方向の移動量を変数で独立管理するところからですね
コメントありがとうございます。
なるほど、移動量自体を変数で定義してそこからということですかね?やってみます!また詰まったら戻ってきます。
そうですね。各方向の移動量を変数にして移動処理は変数を足しこむだけにしておけば、反射処理自体は壁に当たった時に変数を＊－１するだけで実装できます。あとはブロックの角に当たった時の挙動をどうするかですね。面倒なら壁のときと同じ処理でいいと思いますが、リアルさを出すなら三角関数を使用して複雑な処理を書く必要があります
返信遅れて申し訳ありません。
とりあえず移動量の変数を定義して反射できるようになりました。角は難しそうなので一旦無視しました。ありがとうございます
回答1件
0
ベストアンサー
衝突検出 - ゲーム開発 | MDN
https://developer.mozilla.org/ja/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Collision_detection
このあたりのページにテクニックがのっています。
MDNではややこしいことを行わずにy方向だけの反射にとどめていますが、
ここにボール半径の組み込むこと、
ボール速度から逆算して前回値を求めて、上下からぶつかったのか、左右からぶつかったのか、を判定すること
は、応用としてまあまあ簡単にできると思います。
斜め方向からのぶつかりによって、xとyの速度両方を変更しようとすると、ややこしいのは、ブロックが連続配置されている場合で、
リアルな世界ではブロックが連続していれば斜め方向からぶつかるということはないのですが、ゲームで斜め方向からのぶつかりを実装すると、跳ね返りが変になってしまう場合がありますので、そこは適当にしておくといいかもしれません。
投稿2022/11/28 10:27
総合スコア197
コメント遅れて申し訳ありません。
提示されたページを参考にしてコードをいじってみたら反射の体を成すようになりました!
皆さん回答ありがとうございました!
👍
あなたの回答
tips
プレビュー
