Javascript shift array issue

Question

I am very new to JS.

Was studying this tutorial (https://youtu.be/0ArCFchlTq4). Have noticed something interesting in this project, and it's bothering me a lot. May be someone can help me to come up with some answers.

There is this part of code, in which we shift the array of pipes (code listed below). But after the shift, the leftmost pipe makes this wierd thing - it's holds the movement for brief moment, making pipeline visually shift few pixels backwards relative to foreground, for example, which is moving with the same speed as pipes. This happens in the same moment as shift command is executed, and affects only the next pipe in array.

Will be so happy if someone can explain this to me, and maybe give a hint on a fix. Thank you!

 // if the pipes go beyond canvas, we delete them from the array
            if(p.x + this.w<= 0){
            
                this.position.shift();
                score.value += 1;
                SCORE_S.play();
                score.best = Math.max(score.value, score.best);
                localStorage.setItem("best", score.best);
            }
        }
    },
    
    reset : function(){
        this.position = [];
    }
    
}

there is a doc on shift : developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… — Mister Jojo
– Mister Jojo, Commented Jun 27, 2021 at 3:10
Thank you for the doc, it helped to understand what's going on! — GreenhornV
– GreenhornV, Commented Jun 27, 2021 at 11:49

thebigfundamentals · Accepted Answer · 2021-06-27 06:00:00Z

1

I believe it is due to the behavior of the .shift() method.

As you can see on MDN, it changes the length of the array in which it is called. I haven't gone through the whole code, but from

if(p.x + this.w<= 0){
        
            this.position.shift();
            score.value += 1;
            SCORE_S.play();
            score.best = Math.max(score.value, score.best);
            localStorage.setItem("best", score.best);
        }
    }
}

we can see that the first pipe inside position, an array, is being deleted, and when it happens every other pipe will be affected to its order inside the array. I can't see a reason why it would make the small froze on the pipes other than that.

answered Jun 27, 2021 at 6:00

thebigfundamentals

598 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

GreenhornV Over a year ago

Thank you sooo much for your answer! It helped me both to understand what's going on and how to fix it! After the first pipe is delited, the new first pipe in array for some reason skips this one pixel step, as if it's drops from next eteration of gameloop and assumes the old position. So in order to fix this, after the shift, I added the command to compensate x position for the new [0 pipe]. Now before the next eteration of draw function the x position of first pipe is correct and everything looking good.

GreenhornV Over a year ago

I have added if statement for this compensation, so game doesn't crash if there is only one pipe in array: this.position.shift(); if((this.position.length >= 1)){ this.position[0].x -= 1; }

Collectives™ on Stack Overflow

Javascript shift array issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related