Im trying to learn coding in Chrome and when i try to run the code i've written it gives the Uncaught SyntaxError: Unexpected identifier error
This is the Code i've written:
<html>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
var canvas;
var canvasContext;
var ballX = 50;
var ballY = 50;
var ballSpeedX = 10;
var ballSpeedY = 4;
var paddle1Y = 250;
const PADDLE_HEIGHT = 100;
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 = 30;
setInterval(function() {
moveEverything();
drawEverything();
}, 1000/framesPerSecond );
canvas.addEventListener('mousemove',
function(evt) {
var mousePos = calculateMousePos(evt);
paddle1Y = mousePos.y-(PADDLE_HEIGHT/2);
});
}
function moveEverything() {
ballX = ballX + ballSpeedX;
ballY = ballY + ballSpeedY;
if(ballX < 0) {
ballSpeedX = -ballSpeedX;
}
if(ballX > canvas.width) {
ballSpeedX = -ballSpeedX;
}
if(ballY < 0) {
ballSpeedY = -ballSpeedY;
}
if(ballY > canvas.height) {
ballSpeedY = -ballSpeedY;
}
}
function drawEverything() {
colorRect(0,0,canvas.width,canvas.height,'black');
colorRect(0,paddle1Y,10,PADDLE_HEIGHT,'white');
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);
canvasContext.fill();
}
}
function colorRect(leftX,toyY, width,height, drawColor) {
canvasContext.fillStyle = drawColor;
canvasContext.fillRect(leftX,toyY, width,height);
}
</script>
</html>
What I have tried:
I've looked through the whole code and cannot find how to fix this at all.