HTML canvas and scripting animation in javascript

Question

I'm able to code animations, I understand keyboard input but I'm struggling to put everything together. I'm basically coding a connect 4 game but I've simplified the problem I'm having.

When I press spacebar it will call movePiece function

function keyboardMove(e){
    switch(e.keyCode) {
    case 32:
        movePiece(0, 0, 1000);
        break;
    }

movePiece() will move a circle from the top of the canvas to the bottom. I want this to happen slowly so I've updated the Y position by 0.1 every 25 milliseconds

function movingPiece(x, startY, endY){

var y = startY;

    while(y<endY)
    {
        setInterval(function(){
            b_ctx.globalCompositeOperation="destination-over";
            b_ctx.fillStyle = "yellow";
            b_ctx.beginPath();
            b_ctx.arc(x, startY, 45, 0, Math.PI*2, true);
            b_ctx.fill();
        }, 25);

        y+=0.1;
    }
}

The animation doesn't work or at least not visually. I'd appreciate if someone could explain the best way to complete an animation following a keyboard press

In your code, the while loop sets up all these new intervals in quick succession. 25 ms later, all those intervals run for the first time. And 25 ms later for the second time. And so on. You probably were looking for setTimeout with cumulative delay. Cleaner solution: use requestAnimationFrame and update positions according to time passed between frames, request new frame until animation has finished. — le_m
– le_m, Commented May 14, 2017 at 1:45

Michał Sałaciński · Accepted Answer · 2017-05-14 01:43:19Z

Keyboard pressing is irrelevant here - it just calls the function. There are several issues with this code:

Typo in function name
If the circle should ever move, you have to pass y, not startY, as only y is being changed
You have nested loops here, as setInterval is loop itself. It can be stopped using clearInterval(), so "while" isn't necessary
"destination-over" may not be the best choice here.

var c = document.querySelector('#c')
var b_ctx = c.getContext('2d') ;

function movingPiece(x, startY, endY){

var y = startY;

   
    
        var inter = setInterval(function(){
          
            b_ctx.globalCompositeOperation="copy";
            b_ctx.fillStyle = "yellow";
            b_ctx.beginPath();
            b_ctx.arc(x, y, 45, 0, Math.PI*2, true);
            b_ctx.fill();
           y+=0.1;
           if (y>endY) clearInterval(inter)
        }, 25);

       
    
}
movingPiece(0, 0, 1000);

<canvas id="c"></canvas>

Collectives™ on Stack Overflow

HTML canvas and scripting animation in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related