CODEWITHSUNDEEP
javascripthtmlcanvas
gongarek
gongarek

Reputation: 1034

Moving circle in javascript

I am trying to move circle up, next right then down. I made 3 functions: up, right and down. I use them, but they are going parallel. I want that if first function will end, then second will start and so on..
Here is my code:

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var c = canvas.getContext('2d');
var progress = 0;
function up(){
    console.log('up');
    c.clearRect(0, 0, window.innerWidth, window.innerHeight);
    c.beginPath();
    progress += 3;
    c.arc(300, 300 - progress, 50, 0, 2*Math.PI, false);
    c.stroke();
    if(progress < 100){
        window.requestAnimationFrame(up);
    }else{
        progress = 0;
        console.log('last up')
    }
}
function right(){
    console.log('right');
    c.clearRect(0, 0, window.innerWidth, window.innerHeight);
    c.beginPath();
    progress += 3;
    c.arc(300 + progress, 200, 50, 0, 2*Math.PI, false);
    c.stroke();
    if(progress < 100){
        window.requestAnimationFrame(right);
    }else{
        progress = 0;
        console.log('last right')
    }
}
function down(){
    console.log('down');
    c.clearRect(0, 0, window.innerWidth, window.innerHeight);
    c.beginPath();
    progress += 3;
    c.arc(400, 200 + progress, 50, 0, 2*Math.PI, false);
    c.stroke();
    if(progress < 100){
        window.requestAnimationFrame(right);
    }else{
        progress = 0;
        console.log('last down')
    }
}
window.requestAnimationFrame(up);
window.requestAnimationFrame(right);
window.requestAnimationFrame(down);

---------------------------------

canvas {
  border: 1px solid black;
}

body {
  margin: 0;
}

------------------------------------

<canvas></canvas>

Console output:

first up stack.js:8:5 first right stack.js:22:5 first down stack.js:36:5 first up stack.js:8:5 first right stack.js:22:5 first up stack.js:8:5 first right stack.js:22:5 first up stack.js:8:5 first right stack.js:22:5 first up stack.js:8:5 first right stack.js:22:5 first up stack.js:8:5 first right stack.js:22:5 first up stack.js:8:5 first right stack.js:22:5 first up stack.js:8:5 first right stack.js:22:5 first up stack.js:8:5 first right stack.js:22:5 first up stack.js:8:5 first right stack.js:22:5 first up stack.js:8:5 first right stack.js:22:5 first up stack.js:8:5 last up stack.js:18:9 first right stack.js:22:5 last right stack.js:32:9 first right stack.js:22:5 last right stack.js:32:9

Upvotes: 2

Views: 1767

Answers (1)

Piyin
Piyin

Reputation: 1834

You should only call window.requestAnimationFrame(up); at the bottom, and then call the others when progress gets over 100. Like this:

function up(){
    //...
    if(progress < 100){
        window.requestAnimationFrame(up);
    }else{
       progress = 0;
       console.log('last up');
       window.requestAnimationFrame(right);
    }
}

This would be the complete code:

var canvas = document.querySelector('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

var c = canvas.getContext('2d');
var progress = 0;
function up(){
    console.log('up');
    c.clearRect(0, 0, window.innerWidth, window.innerHeight);
    c.beginPath();
    progress += 3;
    c.arc(300, 300 - progress, 50, 0, 2*Math.PI, false);
    c.stroke();
    if(progress < 100){
        window.requestAnimationFrame(up);
    }else{
        progress = 0;
        console.log('last up');
        window.requestAnimationFrame(right);
    }
}
function right(){
    console.log('right');
    c.clearRect(0, 0, window.innerWidth, window.innerHeight);
    c.beginPath();
    progress += 3;
    c.arc(300 + progress, 200, 50, 0, 2*Math.PI, false);
    c.stroke();
    if(progress < 100){
        window.requestAnimationFrame(right);
    }else{
        progress = 0;
        console.log('last right');
        window.requestAnimationFrame(down);
    }
}
function down(){
    console.log('down');
    c.clearRect(0, 0, window.innerWidth, window.innerHeight);
    c.beginPath();
    progress += 3;
    c.arc(400, 200 + progress, 50, 0, 2*Math.PI, false);
    c.stroke();
    if(progress < 100){
        window.requestAnimationFrame(down);
    }else{
        progress = 0;
        console.log('last down');
    }
}
window.requestAnimationFrame(up);
canvas {
  border: 1px solid black;
}

body {
  margin: 0;
}
<canvas></canvas>

Also available here: https://jsfiddle.net/kvmt6ru9/

Upvotes: 1

Related Questions