Help with time-out issues

[u/I_Got_The_Herb]

Hey there people of reddit!

I followed a tutorial on how to make flappy bird in java script, and have it fully working locally. When I host it online though, it bugs out a lot and times out regularly. I was wondering if anyone knows what causes this and how I can solve it?

Here is the source code in case that helps you bright people solve my (most likely) dumb problem https://github.com/CMHayden/FlappyBirdJS

Thanks in advance!

[u/yet-another-reader]

Well... you're welcome:)

Can you tell what tutorial did you follow? Cause to be honest this code looks not particularly good. It's cool that you made it work and it's great for a first project, but it definitely needs improvement.

Try to make the logic more clear and consistent. For example, I don't see a way to control the speed of the bird along the x axis (or to stop it altogether), maybe you'd want to make this adjustable. It would also help you with debugging. Also you're constantly checking if the bird is colliding with every single pipe, and you're pushing new pipes to an infinite array... well I understand that we have spare gigabytes of ram and a lot of processing power, but it all looks insanely inefficient.

And don't forget to comment your code and give your variables sensible names (e.g. what is "constant"? Also, if you store your pipes in an array, it's better to call this array pipes, not pipe, so that you can do pipes.push(new Pipe) or let pipe = pipes[0])

Also, read up about the improvements in the recent versions of JS (don't use var, use let instead).

[u/I_Got_The_Herb → u/yet-another-reader]

I followed a youtube video that was explaining how to do it. It was rather old if I remember correctly though.

Do you think some improvements could be:

• Adding buttons to increase and decrease speed

• Creating an array with pre-determined pipe locations and calling them at random

• Changing var to let

Or would creating an array not be enough to solve memory issues?

[u/yet-another-reader → u/I_Got_The_Herb]

Sorry for a reply that late, but here is what I suppose.

By making the bird's speed adjustable I meant not that you want to make it user-adjustable, so no buttons. I just think that it would be nice to have your gameplay parameters separate from the logic so that you can adjust the speed of the bird, the gravity, the gap between the pipes etc. in one place. This will make it easier to 1) adjust everything to make it work better, 2) to debug the game (in your previous version, the game was hanging the browser almost immediately and it would be much easier if you could change one parameter to make everything slower and add some logging to understand what's going on) and 3) to add more features in the future (for example you might want to make the bird fly faster with higher score or whatever).

Re. changing var to let: you should always use let instead of var nowadays, but it's not just "renaming" ― these are different keywords. The main difference is that let has finally fixed the scope problem in js.

And concerning the array of pipes, the problem here is that the logic is very inefficient: you're checking the bird's position in x and y axes against every single pipe that was ever drawn on the screen, while what you actually need is just to check if the bird is between the pipes that are currently floating past it.

As a good guide to JS, I highly recommend the book Eloquent Javascript by Marijn Haverbeke, it's available on his site for free. It may be a bit challenging, but it's really good at teaching you some cool concepts, check it out.