p5.js乒乓游戏

Question

我真的很抱歉这个愚蠢的问题，但我不知道我该怎么办。 我试了很多东西没有用。 我尝试计算playerx和playerx的宽度之间的距离。 有人可以纠正我的代码，所以我可以理解它，请尽量不要解释它。

var playerx = 0; 
var z = 0; 
var playery = 750; 

var ball = { 
x: 400, 
y: 400, 
speedx: 2, 
speedy: 3, 
}; 

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

function draw(){ 
background(0); 
ball1(); 
player(); 
click(); 
wall(); 
bounce(); 
hit(); 
} 

function hit(){ 
var AA = dist(playerx,playery,player.x + 200,playery) 
var BB = dist(ball.x,ball.y,AA,).  

if (BB <= 20){ 
    ball.speedy = -7; 
} 
} 

function ball1(){ 
fill(255); 
rect(ball.x,ball.y,20,20); 
} 

function bounce(){ 
ball.x += ball.speedx; 
ball.y += ball.speedy; 
if (ball.x>800){ 
ball.speedx = -2; 
}else if (ball.x<0){ 
ball.speedx = 3; 
}else if (ball.y>800){ 
ball.speedy = -3; 
} else if(ball.y<0){ 
ball.speedy = 2; 
} 
} 

function player(){ 
fill(255); 
rect(playerx,playery,200,20); 
} 

function click(){ 
if(keyCode === RIGHT_ARROW) { 
playerx += z; 
z = 3; 
} else if (keyCode === LEFT_ARROW){ 
playerx += z; 
z = -3; 
} 
} 

function wall(){ 
if (playerx > 600){ 
playerx = 600; 
} else if (playerx < 1){ 
playerx = 1; 
} 
} 

Answer 1

检查这个库，它包含碰撞检测代码：

https://github.com/bmoren/p5.collide2D

var playerx = 400; 
var z = 0; 
var playery = 750; 

var ball = { 
    x: 400, 
    y: 400, 
    speedx: 2, 
    speedy: 3, 
}; 

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

function draw() { 
    background(0); 
    ball1(); 
    player(); 
    click(); 
    wall(); 
    bounce(); 
    hit(); 
} 

function hit() { 
if(checkCollision(playerx, playery, 200, 20, ball.x, ball.y, 20)){ 
    ball.speedy = -7; 
    console.log("colliding"); 
} 
} 

function ball1() { 
    fill(255); 
    ellipse(ball.x, ball.y, 20, 20); 
} 

function bounce() { 
    ball.x += ball.speedx; 
    ball.y += ball.speedy; 
    if (ball.x > 800) { 
    ball.speedx = -2; 
    } else if (ball.x < 0) { 
    ball.speedx = 3; 
    } else if (ball.y > 800) { 
    ball.speedy = -3; 
    } else if (ball.y < 0) { 
    ball.speedy = 2; 
    } 
} 

function player() { 
    fill(255); 
    rect(playerx, playery, 200, 20); 
} 

function click() { 
    if (keyCode === RIGHT_ARROW) { 
    playerx += z; 
    z = 3; 
    } else if (keyCode === LEFT_ARROW) { 
    playerx += z; 
    z = -3; 
    } 
} 

function wall() { 
    if (playerx > 600) { 
    playerx = 600; 
    } else if (playerx < 1) { 
    playerx = 1; 
    } 
} 

function checkCollision(rx, ry, rw, rh, cx, cy, diameter) { 
    //2d 
    // temporary variables to set edges for testing 
    var testX = cx; 
    var testY = cy; 

    // which edge is closest? 
    if (cx < rx){   testX = rx  // left edge 
    }else if (cx > rx+rw){ testX = rx+rw } // right edge 

    if (cy < ry){   testY = ry  // top edge 
    }else if (cy > ry+rh){ testY = ry+rh } // bottom edge 

    // // get distance from closest edges 
    var distance = dist(cx,cy,testX,testY) 

    // if the distance is less than the radius, collision! 
    if (distance <= diameter/2) { 
    return true; 
    } 
    return false; 
};