Classing Pong game

Question

I have just started coding. Anything to help simply or improve the code?

This is fully finished and ready to play, though the ball bounces off the wall directly behind the paddle, rather than off the paddle itself.

Edit: After playing around with the game. One of my friends pointed out that whenever I scroll down on the page, the mouse moves the bottom of the paddle while whenever I scroll up, the mouse moves the middle of the paddle. why is this?

	var canvas;
	var canvasContext;
	var ballX = 400;
	var ballY = 300;
	var ballSpeedX = 7;
	var ballSpeedY = 4;
	var player1Score = 0;
	var player2Score = 0;
	const WINNING_SCORE = 10;
	var showingWinScreen = false;
	var paddle1Y = 250;
	var paddle2Y = 250;
	const PADDLE_HEIGHT = 100;
	const PADDLE_WIDTH = 10;
	function calculateMousePos(evt) {
		var rect = canvas.getBoundingClientRect();
		var root = document.documentElement;
		var mouseX = evt.clientX - rect.left - root.scrollLeft;
		var mouseY = evt.clientY - rect.top - root.scrollTop;
		return {
			x:mouseX,
			y:mouseY
		}
	}
	function handleMouseClick(evt) {
		if(showingWinScreen) {
			player1Score = 0;
			player2Score = 0;
			showingWinScreen = false;
		}
	}
	window.onload = function () {
		canvas = document.getElementById('gameCanvas');
		canvasContext = canvas.getContext('2d');
		var framesPerSecond = 30;
		setInterval(function() {
			moveEverything();
			drawEverything();
		}, 1000/framesPerSecond);
		canvas.addEventListener('mousedown',handleMouseClick);
		canvas.addEventListener('mousemove',
			function(evt){
				var mousePos = calculateMousePos(evt);
				paddle1Y = mousePos.y-(PADDLE_HEIGHT/2);
			});
 canvasContext.font = "30px Ariel";
	}
	function ballReset() {
		if(player1Score >= WINNING_SCORE || player2Score >= WINNING_SCORE) {
				showingWinScreen = true;
		}
		ballSpeedX = -ballSpeedX;
		ballX = canvas.width/2;
		ballY = canvas.height/2;
		paddle1Y = 250;
		paddle2Y = 250;
	}
	function computerMovement() {
		var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2);
		if(paddle2YCenter < ballY - 35) {
			paddle2Y = paddle2Y + 6;
		} else if(paddle2YCenter > ballY + 35) {
			paddle2Y = paddle2Y - 6;
		}
	}
	function moveEverything() {
		if(showingWinScreen) {
			return;
		}
		computerMovement();
		ballX += ballSpeedX;
		ballY += ballSpeedY;
		if(ballX < 0) {
			if(ballY > paddle1Y && 
				ballY < paddle1Y+PADDLE_HEIGHT) {
				ballSpeedX = -ballSpeedX;
				var deltaY = ballY - (paddle1Y+PADDLE_HEIGHT/2);
				ballSpeedY = deltaY * 0.35; 
			} else {
				player2Score += 1;
				ballReset();
			}
		}
		if(ballY < 0) {
			ballSpeedY = -ballSpeedY;
		}
		if(ballX > canvas.width) {
			if(ballY > paddle2Y &&
				ballY < paddle2Y+PADDLE_HEIGHT) {
				ballSpeedX = -ballSpeedX
				var deltaY = ballY - (paddle2Y+PADDLE_HEIGHT/2);
				ballSpeedY = deltaY * 0.35; 
			} else {
				ballReset();
				player1Score += 1;
			}
		}
		if(ballY > canvas.height) {
			ballSpeedY = -ballSpeedY;
		}
	}
	function drawNet() {
		for(var i=0;i<canvas.height;i+=40) {
			colorRect(canvas.width/2-1,i,2,20,'white');
		}
	}
	function drawEverything() {
		//background color
		colorRect(0,0,canvas.width,canvas.height,'black');
		if(showingWinScreen) {
			canvasContext.fillStyle = 'white';
			if(player1Score >= WINNING_SCORE) {
				canvasContext.fillText("You Won!", 350, 200);
			} else if(player2Score >= WINNING_SCORE) {
				canvasContext.fillText("You Lost",350,200);
			}
			canvasContext.fillText("click to continue", 350, 300);
			return;
		}
		drawNet();
		//player paddle
		colorRect(10,paddle1Y,PADDLE_WIDTH,PADDLE_HEIGHT,'white');
		//CPU paddle
		colorRect(canvas.width-PADDLE_WIDTH-10,paddle2Y,PADDLE_WIDTH,PADDLE_HEIGHT,'white');
		//ball
		colorCircle(ballX,ballY,10,'white');
		canvasContext.fillText(player1Score,100,100); 
		canvasContext.fillText(player2Score,canvas.width-100,100);
	}
	function colorCircle(centerX,centerY,radius,drawColor) {
		canvasContext.fillStyle = drawColor;
		canvasContext.beginPath();
		canvasContext.arc(centerX,centerY,radius,0,Math.PI*2,true);
		canvasContext.fill();
	}
	function colorRect(leftX,topY,width,height, drawColor) {
		canvasContext.fillStyle = drawColor;
		canvasContext.fillRect(leftX,topY,width,height);
	}

 <!DOCTYPE html>
	<html>
	<title>Pong: The Classic Arcade Game, Now in HTML5</title>
	 Welcome to my first HTML5 game!<br>
	 <br>
	 Use the mouse to control the left paddle,
	 and enjoy the classic game!<br>
	 <br>
	 Game wins at 11!<br>
	 <br>
	 Scroll down to see the bottom of the game canvas<br>
	<canvas id="gameCanvas" width="800" height="600"></canvas>
 </html>

• konijn: @TolaCoder please keep the snippet when you edit

Answer 1

It looks like there's no subroutine to check for the ball colliding with the paddle. Check codepen.io/gdube/pen/JybxxZ for an example of the pong game with the collision added in. (No it isn't mine, I found it by chance when I went to check your code out ! ) .