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 😅
You might be able to set a z-index on the logo, and the projectile, so that the logo is always higher than the projectile!
I placed in Webflow in the <head> for .player and .projectile: position: absolute, for player z-index 2, and for projectile z-index 1, but still, the SVG logo is below the projectile.
Try adding relative to their parent element, and then if that doesn’t work you can try adding !important to the z-indices
And why is the SVG of such poor quality 🤔
That I’m not sure, you can share your live link with me and I can check it out though 🙂
Asteroids Clone
Simple shooting game in the style of asteroids
Alright try this, instead of messing with the css I just moved the player.draw() function after the projectiles in the call stack so that the player get's rendered at the end, therefore on top of the projectiles:
Thank you. You've helped me a lot. Do you perhaps have an idea on how I could add a delay to the score window that appears when the user fails in the game? Sometimes, due to quick mouse clicks, the user accidentally presses "start game" again and fails to see their score.
In the enemies.forEach() block you can update the enemy hits player function with a setTimeout() after the //enemy hits player section that wraps around the modal and score display lines!
Interesting it's not letting me send just the snippet
one second
@AtomicZBRA you rule. I’ll see about updating the code! I wrote this so long ago it feels like now, back when I was still learning JS.
Pretty cool you came across it @infernus
Hello friends, it's me again with this game 😅 . I've encountered a new strange bug and I don't know how to fix it. I've set the appropriate difficulty level for the game, and it can be played for a few minutes, but then it becomes very difficult and fails. When I tested it, I did so on my 60Hz monitor. I noticed that when the same game runs on a 144Hz monitor, it speeds up slightly; the asteroids move faster towards the center, making it harder to play, but still manageable for at least a minute. However, when it comes to a 240Hz monitor, the game becomes too difficult and can barely be played for 10-15 seconds.
Hey @infernus - I’m impressed with how far you’ve taken this project, which was originally a small prototype for me 🙂
Does this article help?
https://www.kirupa.com/animations/ensuring_consistent_animation_speeds.htm
kirupa.com
Ensuring Consistent Animation Speeds
Learn how to ensure consistent speed animations by either fixing the frame rate or by accounting for the delta time.
Hey @Web Bae, I apologize, I forgot to respond. Yes, this article has helped me a lot, everything is explained very nicely, I managed to solve the problem. Thank you very much 🥹