I'm new to JavaScript and currently working on a project involving a bouncing ball inside a canvas. I was able to achieve this before, but now I'm attempting to recreate it using objects. However, despite not encountering any errors, the animation is not working as expected and I'm struggling to identify the problem. Any guidance would be greatly appreciated. The canvas displays properly, but the ball does not appear.
<canvas id="sCanvas" width="550" height="550" style="border: solid"></canvas>
<body>
<script type="text/javascript">
//variables
var c = document.getElementById("sCanvas");
var ctx = sCanvas.getContext("2d");
var cHeight = sCanvas.height;
var cWidth = sCanvas.width;
//object
//create the sphere object
class Sphere {
constructor(aRadius){
//add properties to object
this.radius = (aRadius || 15);
this.colour = "green";
this.xPos = 30;
this.yPos = 30;
this.speedX = 2;
this.speedY = 5;
}
drawMe(){
ctx.beginPath();
ctx.arc(this.xPos, this.Ypos, this.radius, 0, Math.PI *2, true);
ctx.fillStyle = this.colour;
ctx.fill();
}
moveMe(){
this.yPos += this.speedY;
this.xPos += this.speedX;
if (this.yPos > 540){
this.speedY =- this.speedY
}
else if (this.yPos < 10){
this.speedY =- this.speedY
}
if (this.xPos > 540){
this.speedX =- this.speedX
}
else if (this.xPos < 10){
this.speedX =- this.speedX
}
}
}
var ball = new Sphere();
function render(){
requestAnimationFrame(render);
ctx.clearRect(0, 0, cWidth, cHeight);
ball.drawMe();
ball.moveMe();
}
render();
</script>
</body>