Question

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

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;
}

Objects.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

问题在于您设置桨叶顶部和底部的方式。请改用：

grep

目前您设置值的方式使条件永远不可能（因为桨底总是小于桨顶）。

我在这里拼凑了一个小提琴：https://jsfiddle.net/gegbqv5p/

您还会注意到我没有使用jQuery。对于你到目前为止所做的事情，实际上没有必要。

球碰撞不起作用

1 个答案: