命中检测算法不起作用，不确定原因。 (Javascript/Processing.js)

Question

我是编程游戏（和一般编程）的新手。我之前制作了一个 "Flappy Bird" 克隆和其他几个，我使用了 Mozilla 开发者网络 here 提供的命中检测算法。

我现在正在尝试重新创建 "Pong" 但是，无论出于何种原因，它在我当前的代码中不起作用，我完全不知道为什么不能。我希望球击中 "paddle" 然后原路返回，但现在它从球拍中消失了。

我正在使用 Processing.js 库，但任何人（无论是否熟悉）都应该清楚我的代码试图实现什么。 processing.js 经常调用 draw() 函数。

可以找到正在运行的代码（但未按预期工作）here

var PADDLE_WIDTH = 10;
var PADDLE_HEIGHT = 75;
var PADDLE_X = 10;

var Player = function(y) {
    this.x = PADDLE_X;
    this.y = mouseY;
    this.score = 0;
    this.width = PADDLE_WIDTH;
    this.height = PADDLE_HEIGHT;
};


Player.prototype.drawPlayer = function() {
    rect(10,mouseY, this.width, this.height);

};



var Ball = function(x,y) {
    this.x = x;
    this.y = y;
    this.speed = 4;
    this.width = 10;
    this.height = 10;
};

Ball.prototype.drawBall = function() {
    rect(this.x, this.y, this.width, this.height);

};

Ball.prototype.onHit = function() {
    if(this.y <= 0 || this.y >= height) {
        this.speed *= -1;
    } else if(this.x <= 0 || this.x >= width){
        this.speed *= -1;
        // HIT DETECTION UNDERNEATH
    } else if (player.x < this.x + this.width &&
   player.x + player.width > this.x &&
   player.y < this.y + this.height &&
   player.height + player.y > this.y){
       this.speed *= -1;
   }

};

var player = new Player();
var ball = new Ball(width/2, height/2);



draw = function() {

    background(0);
    fill(250, 250, 250);
    ball.x -= ball.speed;

    player.drawPlayer();
    ball.drawBall();
    ball.onHit();

};

Answer 1

在 drawPlayer 方法中，您在 (10, mouseY) 点绘制玩家，但永远不会更新玩家的 y 属性。它始终保持等于 0。我建议您添加 update 方法，这将改变播放器的状态并更改绘制方法以纯粹根据其状态渲染播放器。像

Player.prototype.updatePlayer = function() {
    this.y = mouseY;
};

Player.prototype.drawPlayer = function() {
    rect(this.x , this.y, this.width, this.height);
};

draw = function() {
    // ... 
    player.updatePlayer();
    player.drawPlayer();
    ball.drawBall();
    // ...
};

Answer 2

在 drawPlayer 中，您可以添加行 this.y = mouseY

Player.prototype.drawPlayer = function() {
    rect(10,mouseY, this.width, this.height);
    this.y = mouseY;        
};

Fiddle: http://jsfiddle.net/z0acb8gy/

命中检测算法不起作用，不确定原因。 (Javascript/Processing.js)

Hit detection algorithm not working, unsure why not. (Javascript/Processing.js)

javascript

processing.js