Game Design in the Browser / in General

Inspired by Google’s offline dino I made this game for fun. I threw this together in a few days and it doesn’t work perfectly but it does work and gave me some more valuable coding practice. Caution: may break on non-Chrome browsers and it’s not built for mobile.

I’m curious, however, about how games with continuous/real-time visualizations are typically programmed and implemented.

For example, what I did here was basically create a function that stepped the game forward and this function was responsible for updating all the game components if they had changed so they could be rendered correctly. Once the game began, this stepping function was just repeatedly called at a high speed to create the appearance of continuous motion.

How is something like this normally handled? Especially with regard to speed and efficiency? As I started write the code I kept adding more and more things to be updated and I couldn’t help but think it can’t be efficient to be doing all these update checks on each call to the step function. Then again, it does seem to work.

I’m basically wondering what patterns exist to solve a problem like this, as I have no knowledge of game programming and just hacked this together in a “here’s an idea, I think this should work, let’s try it and see” approach.

/// Also, as a side note, I’ve noticed here and on another one of my projects that my code runs markedly faster when I am no longer hosting it locally and instead I’ve pushed it to my portfolio site. What I mean is, in this case the game runs much faster. Does anyone have any insight as to why this is?