While working on the paddle section of my code and resolving other errors, I encountered a new issue. After fixing the previous errors, I received the following error message: "p5practice.js:97 Uncaught TypeError: Cannot read property 'y' of undefined." Additionally, I'm struggling to make my paddle function properly even after reviewing multiple pong-like examples.
//variables
var canvas;
var ctx;
var w;
var h;
var ball;
var paddle;
var score1;
//ball object
var BALL = function(x, y) {
this.x = x;
this.y = y;
this.color = "white";
this.radius = 12;
this.vx = 3;
this.vy = -3;
};
//paddle 1
var PADDLE = function(x, y) {
this.x = 10;
this.y = h/2 - 50;
this.color = "white";
this.width = 5;
this.height = 100;
};
window.addEventListener("keydown", movePaddle);
//keydown event
//down
function movePaddle(e) {
switch (event.keyCode){
case 38: //up
console.log(paddle.y)
if (paddle.y - 30 >= -10) {
paddle.y -= 30;
}
break;
case 40: // down
console.log(paddle.y)
if (paddle.y + 30 < 305) {
paddle.y += 30;
}
break;
}
}
//DOM load
window.onload = function() {
canvas = document.getElementById('canvas');
w = canvas.width;
h = canvas.height;
ctx = canvas.getContext('2d');
ball = new BALL (w/2, h/2);
paddle = new PADDLE(w-100, h/2);
drawScore();
startGame();
movePaddle();
canvas {
border: 3px solid yellow;
background-color: black;
}<!doctype html>
<html>
<head>
<title>Pong</title>
<script src="p5practice.js"></script>
<link rel= 'stylesheet' href="p5practice.css">
</head>
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</script>
</body>
</html>