I'm making a game and the game needs a paddle that reflects a ball, but when I wrote the code to detect if the ball hits the paddle, the paddle didn't reflect the ball, can anyone help me?
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);
}
Your problem is the typo in this line in collision:
var paddleRight = paddleLeft + PADDLE_WIDTH; //right
This should read:
var paddleRight = paddleX + PADDLE_WIDTH; //right
I believe paddleLeft is actually undefined when execution reaches that line.