42 lines
673 B
JavaScript
42 lines
673 B
JavaScript
let canvas = document.querySelector("#canvas");
|
|
let ctx = canvas.getContext("2d");
|
|
let width = canvas.width;
|
|
let height = canvas.height;
|
|
let x = 0;
|
|
let y = 0;
|
|
let forwards = true;
|
|
|
|
function drawCircle(x, y) {
|
|
ctx.fillStyle = "rgb(0, 128, 255)";
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, 10, 0, Math.PI * 2, false);
|
|
ctx.fill();
|
|
}
|
|
function update() {
|
|
if (forwards === true) {
|
|
x += 1;
|
|
y = 10
|
|
}
|
|
else{
|
|
x -= 1;
|
|
y = 10
|
|
}
|
|
if (x >= 300){
|
|
forwards = false;
|
|
}
|
|
if (x <= 0){
|
|
forwards = true
|
|
}
|
|
// y += 1;
|
|
// x %= width;
|
|
// y %= height;
|
|
}
|
|
|
|
function draw() {
|
|
ctx.clearRect(0, 0, width, height);
|
|
drawCircle(x, y);
|
|
}
|
|
setInterval(() => {
|
|
update();
|
|
draw();
|
|
}, 1); |