javascript - 碰撞检测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){

您可能还想阅读该教程的Collision Detection with Moving Objects部分。它是为 Processing 编写的，但也适用于 P5.js。

如果您在使用它时遇到问题，那么请从更基本的草图重新开始，该草图仅显示两个硬编码的矩形。当它们没有碰撞时让它们变成红色。然后从那里开始工作。很难回答一般性的“我该怎么做”类型的问题，所以如果您发布特定的“我试过 X，期望 Y，但得到的是 Z”类型的问题，您的运气会好得多。祝你好运。