Colision detection p5.js

Question

只是想在p5.js中做一個簡單的pong遊戲。我最近剛剛加入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。

如果您無法正常工作，請使用更簡單的草圖重新開始，該草圖僅顯示兩個硬編碼的矩形。讓它們在不碰撞時變成紅色。然後從那裏開始工作。很難回答一般的「我該怎麼做」類型的問題，所以如果你發佈了一個特定的「我試過X，期望Y，但是改爲Z」類型的問題，你會有更好的運氣。祝你好運。