Modify this Flappy Bird clone to adjust speed of bird through environment
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I'm looking to modify the following Flappy Bird clone, written in HTML5, so that the bird moves faster or slower through the environment: Specifically, I'd like you to add a variable somewhere in main.js that changes only the speed of the bird. The reason that this is a little complicated (at least for me) is that, technically, the bird doesn't move horizontally at all. All you're changing then is the rate at which the pipes move. But right now all I see is a sprite animation in the CSS, and I can't figure out how to isolate their speed.

awarded to Nuno Freitas

Crowdsource coding tasks.

1 Solution

Winning solution

If you want to change the speed at which pipes move (the bird is always in the same place, it's the pipes that move from right to left) you have to change line 330 and 331 in main.css:

Example to have the bird move a little bit slower (original value was 7500ms):

   position: absolute;
   left: -100px;
   width: 52px;
   height: 100%;
   z-index: 10;

   -webkit-animation: animPipe 10000ms linear;
   animation: animPipe 10000ms linear;

This only influences the speed at which pipes move.

You probably also want to adjust the frequency at which pipes appear. In that case you have to update the pipe loop interval in main.js line 141:

loopPipeloop = setInterval(updatePipes, 1400);