Asteroids - Simple JS Game
Hello friends, I hope you're all doing well. I have a problem with the Asteroid game that Web Bae posted as a cloneable (https://webflow.com/made-in-webflow/website/Asteroids-Clone-Simple-JS-Game). The issue is that when the user fails in the game and presses start game again, the asteroids move faster and in greater numbers. This happens every time, getting faster and faster until the user refreshes the page. After the user fails in the game 2-3 times and starts again, too many asteroids come towards them, making it impossible to play. How can I set it up so that each time at the beginning of the game, there are fewer asteroids, gradually increasing in number until the user fails in the game. Thank you in advance to everyone for taking the time and providing answers ❤️
31 Replies
Alright this is a super interesting question, I think this happens because every time you press the start button, it runs the spawnEnemies function, the problem is, that function never actually ends, so every time you press the start button it's like adding another instance of the function that adds more enemies — i'm trying to figure out a solution for this now but awesome that you caught this
Okay so. here's a big chunk of code that will replace everything in the 'Before </body>' script tag that's already in the webflow project—just replace everything inside the <script></script> tags with this:
It's exactly the same as what's there except i added a state if the game is running, and then we use that to only run the spawnEnemies() function once
Now, @infernus does this work for what you want, seeing as it was kind of an error, or do you still want to make it slower every time?
Totally made the game too easy in that script, here's the right one:
Thank you very much for your time. Now the game is working properly, but it seems to me that the asteroids are now too slow, and there are fewer of them. I feel like I could play the game indefinitely.
Yeah i was getting that too, alright try this one now for more what you mentioned on your original message. Every time an enemy spawns, it decreases the spawntime until the next enemy spawn by 50 nano seconds, until it gets to 200 miliseconds as the fastest it will spawn. The default rate is 1000 so this should eventually get pretty difficult
I still feel like it's a bit too easy; if I want to make the game even harder, do I just need to decrease this?
if (spawnRate > 200) {
spawnRate -= 50;
}
What if I want to replace the circular dot in the middle with, for example, a circular SVG icon, is that possible?
So if that's still too easy you can allow the spawn rate to get to 0
if(spawnRate>0){
spawnRate -= 50;
}
You can also decrease the initial spawn rate value that is inside the init() function if you think the game is starting too slow (currently it's set to 1000)
the svg icon, I'm not 100% sure, let me look at that some more
So i'm not too sure but maybe chatGPT can help with this, essentially you'd want to change the class constructor I think. I'll look some more though and let you know if i find anything 🙂
Thank you very much, my friend, for your time.
alright check this out, pretty cool stuff — so i updated the enemy constructor to accept an image, then in the spawnEnemies() function I added an imageSrc const which you can set to the path of your image
Also @Web Bae — when you're back, check out this thread a little earlier to see a fix for the asteroid game being too hard in the current cloneable, unless that was the goal hahaha 😂
Now my enemies are SVG logos 😅 . I meant for the central point in the middle to be the logo, not the enemies
In any case, incredible job. Thank you so much.
LOL my bad 😂
In that case, it would be a similar change just to the
player class, and then to the player creation in the init() functionI did it, but for some reason, the game won't start now 🤔
Interesting could you send a link to the page?
I managed to do it, but in the end, I don't like it because the ball I'm launching goes from the center of the SVG logo and crosses over it. Maybe it looks better when the SVG is an enemy 😅