碰撞检测 p5.js答案

【问题标题】：Colision detection p5.js碰撞检测 p5.js
【发布时间】：2017-08-12 13:10:53
【问题描述】：

只是想在 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);
  }

【问题讨论】：

"阻止我的代码运行" 你的问题是什么？你有什么问题？你希望代码 sn-p 做什么？

标签： javascript collision detection p5.js pong

【解决方案1】：

您的问题非常广泛，但基本上您想要做的是想象一个围绕球的“边界矩形”，然后使用矩形-矩形碰撞来检查球是否与桨发生碰撞。如果是，则通过将球的水平速度乘以 -1 来“反弹”球。

我写了一篇关于碰撞检测的教程here，但基本的if 语句如下所示：

if(rectOneRight > rectTwoLeft && rectOneLeft < rectTwoRight && rectOneBottom > rectTwoTop && rectOneTop < rectTwoBottom){

您可能还想阅读该教程的移动物体碰撞检测部分。它是为 Processing 编写的，但也适用于 P5.js。

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

【讨论】：