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>