So, I just started javascript and everything was working fine till i came to objects.
This peace of code is supposed to create a bouncing ball in a html canvas with javascript but it doesn't work.
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
//clear
function clear() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
here is my ball object
//ball
var ball = {
x: canvas.width / 2,
getX: function() {
return x;
},
setX: function(a) {
x = a;
},
y: canvas.height / 2,
getY: function() {
return y;
},
setY: function(a) {
y = a;
},
mx: 2,
getMx: function() {
return mx;
},
my: 4,
getMy: function() {
return my;
},
r: 10,
getR: function() {
return r;
}
};
code to draw my ball
function drawBall()
{
ctx.beginPath();
ctx.arc(ball.getX, ball.getY, ball.getR, 0, Math.PI * 2, true);
ctx.fillStyle = "#83F52C";
ctx.fill();
}
function circle(x, y, r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2, true);
ctx.fillStyle = "#83F52C";
ctx.fill();
}
//draws ball and updates x,y cords
function draw() {
clear();
drawBall();
if (ball.getX() + ball.getMx() >= canvas.width || ball.getX()+ ball.getMx() <= 0) {
ball.setMx(-ball.getMx());
}
if (ball.getY() + ball.getMy() >= canvas.height|| ball.getY()+ ball.getMy() <= 0) {
ball.setMy(-ball.getMy());
}
ball.setX(ball.getX() + ball.getMx());
ball.setY(ball.getY() + ball.getMy());
}
set interval
function init() {
return setInterval(draw, 10);
}
init();
