javascript - 球碰撞不起作用

Question

我正在开发一个JQuery/JavaScript Canvas 砖打破游戏，所以我添加了碰撞检测代码，如果球是否击中 Racket ，但是当我运行代码时，碰撞检测代码不起作用，我想知道是否有人可以帮助我？这是代码。

JSFiddle:https://jsfiddle.net/18h7b9fd/

Main.js

$(document).ready(() => {
    let fps = 60;
    setInterval(init, 1000 / fps);

    $(canvas).bind("mousemove", paddleControl);
})

// INIT
let init = () => {
    draw(); //draw objects
    animate(); //animate objects
    collision(); //detect collision
}

// DRAW
let draw = () => {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    paddle.draw();
    ball.draw();
}

// ANIMATE
let animate = () => {
    ball.animate();
}

// COLLISION
let collision = () => {
    ball.collision();
}

// CONTROL
let paddleControl = (e) => {
    // get mouse pos
    let rect = canvas.getBoundingClientRect();
    let root = document.documentElement;
    let mouseX = e.pageX - rect.left - root.scrollLeft;

    paddle.x = mouseX - paddle.w / 2;
}

对象.js

class Paddle {
    constructor(x, y, w, h, color) {
        this.x = canvas.width / 2 - 100 / 2;
        this.y = canvas.height - 60;
        this.w = 100;
        this.h = 10;
        this.color = "#fff";
    }

    draw() {
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.w, this.h);
    }
}

class Ball {
    constructor(x, y, r, color, speedX, speedY) {
        this.x = canvas.width / 2 - 10 / 2;
        this.y = canvas.height / 2 - 10 / 2;
        this.r = 10;
        this.color = "#fff";
        this.speedX = 6;
        this.speedY = 6;
    }

    draw() {
        ctx.fillStyle = this.color;
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
        ctx.fill();
    }

    animate() {
        this.x += this.speedX;
        this.y += this.speedY;
    }

    collision() {
        // BALL TO PADDLE
        let paddleTop = paddle.y - paddle.h;
        let paddleBottom = canvas.height - paddleTop;
        let paddleLeft = paddle.x;
        let paddleRight = paddle.x + paddle.w;

        if(this.y >= paddleTop && this.y <= paddleBottom &&
           this.x >= paddleLeft && this.x <= paddleRight) {
            this.speedY *= -1;
        }

        // BALL TO WALL
        if(this.x >= canvas.width) this.speedX *= -1; //left
        if(this.x <= 0) this.speedX *= -1; //right

        if(this.y >= canvas.height) this.reset(); //bottom
        if(this.y <= 0) this.speedY *= -1; //top
    }

    reset() {
        this.x = canvas.width / 2 - this.r / 2;
        this.y = canvas.height / 2 - this.r / 2;
        this.animate();
    }
}

let paddle = new Paddle(this.x, this.y, this.w, this.h, this.color);
let ball = new Ball(this.x, this.y, this.r, this.color, this.speedX, this.speedY);
console.log(paddle);
console.log(ball);

Answer 1

问题在于您设置桨顶部和底部的方式。改用这个:

let paddleTop = paddle.y;
let paddleBottom = paddleTop + paddle.h;

目前，您设置值的方式使得条件不可能为真(因为桨底部始终小于桨顶部)。

我在这里整理了一个 fiddle :https://jsfiddle.net/gegbqv5p/

您还会注意到我没有使用 jQuery。对于您目前所拥有的，这确实没有必要。