桨不反映球

Question

我正在做一个游戏，这个游戏需要一个球拍来反射球，但是当我写代码来检测球是否击中球拍时，球拍没有反射球，谁能帮我？

HTML

<!DOCTYPE html>
<html>

<head>

    <title>First Game - Section 1 to 2</title>

</head>

<body>

    <center>
        <canvas id="canvas" width="800" height="600" style="background-color: #000"></canvas>
    </center>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="main.JS"></script>
</body>

</html>

JavaScript

/* VARIABLES */

var canvas; //canvas
var ctx; //context

var ballX; //balls x pos
var ballY; //balls y pos
var ballSpeedX; //balls speed in x direction
var ballSpeedY; //balls speed in Y direction

var paddleX; //paddles x pos
var paddleY; //paddles y pos
const PADDLE_WIDTH = 100; //paddles width
const PADDLE_HEIGHT = 10; //paddles height

const BRICK_WIDTH = 100; //width of bricks
const BRICK_HEIGHT = 50; //height of bricks
var brickGride = [];

var mouseX = 0;
var mouseY = 0;

/* WHEN DOCUMENT IS READY */

$("document").ready(function () {

    //set values to variables
    canvas = $("#canvas")[0]; //call canvas
    ctx = canvas.getContext("2d"); //get context

    ballX = 200;
    ballY = 100;
    ballSpeedX = 3;
    ballSpeedY = 3;

    paddleX = canvas.width / 2 - PADDLE_WIDTH / 2; //center paddle
    paddleY = canvas.height - 40; // 560 (40px from bottom of canvas);

    var fps = 120; //set fps

    setInterval(function () {

        draw(); //draw objects
        animate(); //animte objects
        collision(); //detect collision

        $(canvas).bind("mousemove", paddleControl); //move paddle

    }, 1000 / fps);

});

/* FUNCTIONS */

function draw() {

    //clear canvas
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    drawBall(ballX, ballY, 10, "white"); //call function that draws ball

    drawPaddle(paddleX, paddleY, PADDLE_WIDTH, PADDLE_HEIGHT, "white"); //call function that draws paddle

}

function animate() {

    //animate ball
    ballX += ballSpeedX;
    ballY += ballSpeedY;

}

function collision() {

    //check if ball hits wall

    //x walls
    if (ballX >= canvas.width) { //right

        ballSpeedX = -ballSpeedX;

    }
    if (ballX <= 0) { //left

        ballSpeedX = -ballSpeedX;

    }

    //y walls
    if (ballY <= 0) { //top

        ballSpeedY = -ballSpeedY;

    }
    if (ballY >= canvas.height) { //bottom

        ballReset();

    }

    //Detect if ball hits paddle

    //get paddles top, bottom, right, and left sides
    var paddleTop = paddleY; //top
    var paddleBottom = paddleTop + PADDLE_HEIGHT; //bottom
    var paddleRight = paddleLeft + PADDLE_WIDTH; //right
    var paddleLeft = paddleX; //left

    if (ballY > paddleTop && // below the top of paddle
        ballY < paddleBottom && // above bottom of paddle
        ballX > paddleLeft && // right of the left side of paddle
        ballX < paddleRight) { // left of the left side of paddle

        ballSpeedY *= -1;

        var paddleCenter = paddleX + PADDLE_WIDTH / 2; //center of paddle
        var ballToPaddle = ballX - paddleCenter; //distance from the ball to the center of paddle
        ballSpeedX = ballToPaddle * 0.35; //ball control
    }
}

function paddleControl(e) {
    //get mouse pos
    var rect = canvas.getBoundingClientRect();
    var root = document.documentElement;

    mouseX = e.clientX - rect.left - root.scrollLeft;
    mouseY = e.clientY - rect.top - root.scrollTop;

    paddleX = mouseX;

}

function ballReset() {

    ballX = canvas.width / 2 - 5;
    ballY = canvas.height / 2 - 5;

}

/* OBJECT VARIABLES */

function drawBall(x, y, r, color) {

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


}

function drawPaddle(x, y, w, h, color) {

    ctx.fillStyle = color;
    ctx.fillRect(x, y, w, h);

}

Answer 1

您的问题是 collision 中这一行的错字：

var paddleRight = paddleLeft + PADDLE_WIDTH; //right

这应该是：

var paddleRight = paddleX + PADDLE_WIDTH; //right

我相信当执行到那条线时 paddleLeft 实际上是 undefined。

桨不反映球

Paddle doesn't reflect ball

javascript

jquery

game-physics