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”类型的问题，你会有更好的运气。祝你好运。