Untitled

<html>

<canvas id="gameCanvas" width="800" height="600"></canvas>

<style> #yourScore {
	background-color: lightblue; color: black; padding: 40px; text-align: center;
}
</style>
<h1 id="yourScore">Your Score: </h1>

<style> #theirScore{
	background-color: lightblue; color: black; padding: 40px; text-align: center;
}
</style>
<h1 id="theirScore">Their Score: </h1>

<script>

var canvas;
var canvasContext;
var ballX = 50;
var ballY = 50;
var ballSpeedX = 10;
var ballSpeedY = 5;

var paddle1Y = 250;
var paddle2Y = 250;
const PADDLE_HEIGHT = 100;
const PADDLE_THICKNESS = 15;

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

window.onload = function() {
	canvas = document.getElementById('gameCanvas');
	canvasContext = canvas.getContext('2d');

	var framesPerSecond = 60;
	setInterval(function(){
		moveEverything();
		drawEverything();
	}, 1000/framesPerSecond); // 1000 = ms which slows down the function drawEverything

	canvas.addEventListener('mousemove',
		function(evt){
			var mousePos = calculateMousePos(evt);
			paddle1Y = mousePos.y-(PADDLE_HEIGHT/2);
		});
}

function computerMovement(){
	var paddle2YCenter = paddle2Y + (PADDLE_HEIGHT/2)
	if(paddle2YCenter < ballY){
		paddle2Y += 5;
	}
	else{
		paddle2Y -= 5;
	}
}

function ballReset(){
	ballSpeedX = -ballSpeedX;
	ballX = canvas.width/2;
	ballY = canvas.height/2;
}

function moveEverything() {
	computerMovement();

	ballX += ballSpeedX;
	ballY += ballSpeedY;

	if(ballX < 0){
		if(ballY > paddle1Y && ballY < paddle1Y+PADDLE_HEIGHT){
			ballSpeedX = -ballSpeedX;
		}
		else{
			ballReset();
		}
	}
	if(ballX > canvas.width){
		if(ballY > paddle2Y && ballY < paddle2Y+PADDLE_HEIGHT){
			ballSpeedX = -ballSpeedX;
		}
		else{
			ballReset();
		}
	}

	if(ballY < 0){
		ballSpeedY = -ballSpeedY; // -(ballSpeedY) Its multiplying
	}
	if(ballY > canvas.height){
		ballSpeedY = -ballSpeedY;
	}
}

function drawEverything() {
	colorRect(0,0,canvas.width,canvas.height,'black');

	colorRect(0,paddle1Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'red');
	colorRect(canvas.width-PADDLE_THICKNESS,paddle2Y,PADDLE_THICKNESS,PADDLE_HEIGHT,'red');

	colorCircle(ballX, ballY, 10, 'white');
}

function colorCircle(centerX, centerY, radius, drawColor){
	canvasContext.fillStyle = drawColor;
	canvasContext.beginPath();
	canvasContext.arc(centerX, centerY, radius, 0,Math.PI*2, true); // arc allows for circles
	canvasContext.fill();
}

function colorRect(leftX,topY, width,height, drawColor){
	canvasContext.fillStyle = drawColor;
	canvasContext.fillRect(leftX,topY, width,height);
}

</script>
</html>