var Ball = () => {
this.x = 100;
this.y = 100;
this.xSpeed = -2;
this.ySpeed = 3;
};
var drawBall = (x, y, radius, fillCirkle) => {
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
if (fillCirkle) {
ctx.fill();
} else {
ctx.stroke();
}
};
Ball.prototype.draw = () => {
drawBall(this.x, this.y, 3, true);
};
Ball.prototype.move = () => {
this.x += this.xSpeed;
this.y += this.ySpeed;
};
Ball.prototype.checkCollision = () => {
if (this.x < 0 || this.x > 200) {
this.xSpeed = -this.xSpeed;
}
if (this.y < 0 || this.y > 200) {
this.ySpeed = -this.ySpeed;
}
};
var canvans_ball = document.getElementById("canvans-ball");
var ctx = canvans_ball.getContext("2d");
var ball = new Ball();
setInterval(() => {
ctx.clearRect(0, 0, 200, 200);
ball.draw();
ball.move();
ball.checkCollision();
ctx.strokeRect(0, 0, 200, 200);
}, 15);