在p5.js中无法检测到矩形和圆形之间的碰撞

问题描述

var rectx = 287.5;
var recty = 460;
var rectx2 = 287.5
var recty2 = 0
var rectwidth = 100
var rectheight = 25
//ball vars
var xBall = Math.floor(Math.random() * 300) + 50;
var yBall = 50;
var diameter = 75;
var xBallChange = 5;
var yBallChange = 5;
//Misc
var started = false;
var score = 0;
var score2 = 0;

function setup() {
    createCanvas(windowWidth,windowHeight);
}

function draw() {
    background(0);
    
    //main commands
    xBall += xBallChange;
    yBall += yBallChange;
    if (xBall < diameter/2 || xBall > windowWidth - 0.5*diameter) {
        xBallChange *= -1;
    }
    if (yBall < diameter/2 || yBall > windowHeight - diameter) {
        yBallChange *= -1;
    }

    if ((xBall > rectx && xBall < rectx + rectwidth) && (yBall + (diameter/2) >= recty)) {
        xBallChange *= -1;
        yBallChange *= -1;
        score++;
    }

    //Player 1
    fill (0,255,255);
    nostroke();
    rect(rectx,recty,rectwidth,rectheight);
    //Player 2
    fill(0,255)
    nostroke()
    rect(rectx2,recty2,rectheight);
    //The ball
    fill (255,0);
    nostroke();  
    ellipse(xBall,yBall,75,75)
    // The partition
    fill(148,211)
    nostroke()
    rect(0,257,750,1)
}

function keypressed() {
    //Player 1 Input
    if (keyCode === LEFT_ARROW) {
        rectx -= 50;
    } else if (keyCode === RIGHT_ARROW) {
        rectx += 50;
    }
    //Player 2 Input
    if (keyCode === 65) {
        rectx2 -= 50;
    } else if (keyCode === 68) {
        rectx2 += 50;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>

这是我的代码。我希望圆/球从放置在顶部的第二个矩形反射出来。请帮助我提供此程序所需的适当命令。我尝试了许多可能性，并根据需要获得了第一个矩形（圆/球从矩形反射出来）。我正在尝试让两个人在本地玩乒乓球游戏。感谢您对我的帮助。

解决方法

如果球击中了桨，则仅反转球方向矢量的y分量即可将球反射到桨的内侧。纠正球的位置，使其碰到球拍：

if (xBall > rectx && xBall < rectx + rectwidth && yBall + diameter/2 >= recty) {
    yBallChange *= -1;
    yBall = recty - diameter/2;
    score++;
}

这当然只是一个近似值，拐角处的反射不正确，并且球在球拍的左右边缘都不会反弹，但这是一个很好的起点。

为第二个球拍实施类似的算法：

if (xBall > rectx2 && xBall < rectx2 + rectwidth && yBall - diameter/2 < recty2+rectheight) {
    yBallChange *= -1;
    yBall = recty2 + rectheight + diameter/2;
    score2++;
}

完整示例：

//Rect vars  
var rectx = 287.5;
var recty = 460;
var rectx2 = 287.5
var recty2 = 0
var rectwidth = 100
var rectheight = 25
//ball vars
var xBall = Math.floor(Math.random() * 300) + 50;
var yBall = 50;
var diameter = 75;
var xBallChange = 5;
var yBallChange = 5;
//Misc
var started = false;
var score = 0;
var score2 = 0;
function setup() {
    createCanvas(750,485);
}


function draw() {
    background(0);
    
    //main commands
    xBall += xBallChange;
    yBall += yBallChange;
    if (xBall < diameter/2 || xBall > width - diameter/2) {
        xBallChange *= -1;
    }
    if (yBall < diameter/2 || yBall > height - diameter/2) {
        yBallChange *= -1;
    }

    if (xBall > rectx && xBall < rectx + rectwidth && yBall + diameter/2 >= recty) {
        yBallChange *= -1;
        yBall = recty - diameter/2;
        score++;
    }

    if (xBall > rectx2 && xBall < rectx2 + rectwidth && yBall - diameter/2 < recty2+rectheight) {
        yBallChange *= -1;
        yBall = recty2 + rectheight + diameter/2;
        score2++;
    }

    //Player 1
    fill (0,255,255);
    noStroke();
    rect(rectx,recty,rectwidth,rectheight);
    //Player 2
    fill(0,255)
    noStroke()
    rect(rectx2,recty2,rectheight);
    //The ball
    fill (255,0);
    noStroke();  
    ellipse(xBall,yBall,75,75)
    // The partition
    fill(148,211)
    noStroke()
    rect(0,257,750,1)
}

function keyPressed() {
    //Player 1 Input
    if (keyCode === LEFT_ARROW) {
        rectx -= 50;
    } else if (keyCode === RIGHT_ARROW) {
        rectx += 50;
    }
    //Player 2 Input
    if (keyCode === 65) {
        rectx2 -= 50;
    } else if (keyCode === 68) {
        rectx2 += 50;
    }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>