Question:
I have no idea why, but the JavaScript while loop refuses to work in my code. Though I have the free version, I know it’s not a CPU or RAM problem as the bars are not even halfway. The website won’t even load if a while loop is in the JavaScript code. (I am using HTML, CSS, and JavaScript) I am truly lost on what to do. Repl link/Link to where the bug appears: https://replit.com/@SteelFox/JavaScript-Snake-Game#script.js Screenshots, links, or other helpful context:
Thanks for the comment but defiantly not! I tried to toss a console.log(“Hi”); in there and not only did the website not load, it froze my computer so hard I had to restart it. Do you have any other suggestions?
It does not visibly crash (although the snake does not move)
Are you sure your computer is okay? I don’t think your little JS program should be crashing your computer. What browser and OS are you using? Did you run out of RAM?
Idk. This is an 8 Gb of Ram computer which should be enough. I am using the latest version of Google Chrome. Do you pay for a Replit service? That might play into it because I don’t. Maybe I’ll try on my other computer and see how it goes.
I have the Hacker plan but no matter what plan you have a simple website hosted on Replit should not kill your computer. I think the issues are unrelated. 8GB RAM is a limitless supply for some people. I personally find it insufficient.
That is a good idea.
In that case everything works 100% on my end so I’m thinking something is up with your device.
I updated Chrome and it helped out but it still isn’t loading properly. There are no more updates that I know of for my computer software. Any more advice?
My Hacker plan doesn’t affect the performance of your Repl so it is not the money that is the problem. I tried loading the page again and this time the page loaded some but is still loading more and spiking CPU. That is really odd.
If you don’t have a super CPU you will immediately crash most browsers with that loop and anything that doesn’t crash won’t work and will take up most of CPU.
While the code is stuck in that loop JS can’t do anything else like run the events, so game can never get set to true, and the loop can never end.
Just in general you shouldn’t have infinite while loops like this in webpages.
Instead you should be using setInterval
setInterval(() => {
// game loop stuff
}, 1000); // 1000 milliseconds = 1 second
This has nothing to do with Replit, JavaScript within a HTML page is run by your browser. An infinite while loop will crash your tab because it blocks the normal event loop in JavaScript, basically the DOM can’t update so the page can’t do anything until the loop is finished.
A game loop in JavaScript should almost always look like this:
let previousFrame = 0;
function game_loop(currentFrame) {
// the time in seconds since the last feame
const deltaTime = (currentFrame - previousFrame) / 1000;
// run your game here
// ...
// keep track of when the last frame was
previousFrame = currentFrame:
// call the game loop function again (creating an 'indirect' loop through recursion)
window.requestAnimationFrame(game_loop);
}
// start the game loop
window.requestAnimationFrame(game_loop);
window.requestAnimationFrame is a special function that makes this all work, your browser should automatically run an animation frame every frame. Your browser should also sync to the user’s screen’s refresh rate; this function is usually called around 60 times a second (but you can usually disable this syncing, so don’t assume that this will always be called 60 times a second, you often also want to cater for old or poor performant devices which cannot run intensive operations this fast).
