コリジョン検出p5.js

Question

p5.jsで簡単なポンゲームを作成しようとしています。私は最近非常にJavaScriptに入り、ボールとバットの間の衝突の検出を把握することができません。私はそれを行ういくつかの方法を試してみましたが、それは主に実行している私のコードを停止..など..任意のヘルプが大好きです！ここで

は、私のソースコードです：

function setup() {  
    createCanvas(750, 750); 
    } 

var x = 50;  
var y = 50;  
var direction = 5;  
var arrow = 0;  
var ball;  
var bat; 

function draw() {  
    background(220);  
    fill ('white');  
    ball = ellipse (x, y, 50, 50);  
    x = x + direction; 

    if (x > width - 25){  
    direction = -5;  
    } 

    if (x < 25) {  
    direction = 5;  
    } 

    x++;  
    y++; 

    if (keyIsDown(RIGHT_ARROW)){  
    arrow += 7;  
    } 

    if (keyIsDown(LEFT_ARROW)){  
    arrow += -7;  
    } 

    fill ('black');  
    bat = rect(arrow, 600, 150, 15); 
    } 

Answer 1

あなたの質問はかなり幅広いですが、基本的に何がやりたいことはボールの周りに「境界矩形」を想像して、チェックするために矩形の長方形の衝突を使用していますボールがパドルと衝突しているかどうか。そうであれば、水平スピードに-1を掛けてボールをバウンスさせます。

私はhere可能な衝突検出のチュートリアルを書きましたが、基本的なif文は次のようになります。

if(rectOneRight > rectTwoLeft && rectOneLeft < rectTwoRight && rectOneBottom > rectTwoTop && rectOneTop < rectTwoBottom){ 

また、オブジェクトにそのチュートリアルのセクションを移動すると衝突検出を読みたいと思うかもしれません。 Processing用に書かれていますが、すべてがP5.jsにも当てはまります。

問題が解決しない場合は、2つのハードコードされた矩形を表示するより基本的なスケッチをやり直してください。彼らが衝突していないときに赤くなるようにしてください。そこからあなたの方法を働かせてください。一般的な「どのように私はこれを行うのですか」という質問に答えるのは難しいので、特定の「私はXを試しましたが、Yは期待していますが、代わりにZを入力してください」という質問を投稿すると、がんばろう。