September 8, 2016 7:36 am

How to Make a Game Loop in JavaScript

Let’s get it straight: without a good code for a game loop, your game will go nowhere. The game loop represents the core because it covers three main parts of development: the actual loop of the game, the timing mechanism, and the interpolation that helps its speed become independent from the loop game.

How to Make a Game Loop in JavaScript

The game loop controls the computing physics, the AI, and the end result on the screen, so this is why it is so important for the bigger picture.

Today, we are going to learn how to create a game loop in JavaScript. Even though the game loop is in charge with the timeline of the entire game, all it needs are basic JavaScript code lines. Let’s begin!

BasicGame Loop

Start by naming the variable declaration, before going to the actual code writing. I’ve introduced “Game” where you can define any basic game you want. It is easy to find free code lines for basic games on the web, such as , and use them to experiment your game loop on. Save the game script in the same folder where you saved your game loop file, and use the name of the script to refer to it in your game loop code as the variable. In this case, the variable is TicTacToe.

Move on to the actual code lines. Start by calling the time when to draw a frame that is the TicTacToe.Draw functions that name all the entities of your game. The TicTacToe.update comprises all the mechanics that the game is based on.

So, the following code lines will send the message that while the game is running, the entities like Position are updated plus the same entitiesare drawn on the screen.

However, this is just a basic game loop which actually makes the game run forever. We have to add more instructions, so the game knows when to set the loop, create the timing mechanism and the interpolation. So let’s move on to the following steps.

Set an Interval

Your game needs an Interval to determine its loop and the window.SetInterval is just the function you need. This function runs a code repeatedly with a fixed time window between each interval.

Firstly, , and then your game starts, by drawing it with TicTacToe.draw functions and updating them on the screen. Closelyafterward you need to state the start of the game loop with an interval of 1,000 per 50 frames per second and then stop the game with clearInterval.

Streamline The Game Loop

At this point, the game loop burns too much Central Processing Units (CPU) to effectively recreate a smooth animation experience for your players. According to Chrome’s Task Manager, my CPU usage is down to 48% of its total capacity, so the game uses way too many resources for its basic status.

This is why we are going to make full use of , and its function is to announce the browser that you want to perform an animation. This method is window.requestAnimationFrame() and will spare you from a lot of headaches. What it does is that it tells the 炒外汇入门 browser to update your animation before the upcoming repaint. Basically, if you want to animate your game in real time use this method, as it will remove jerks. It does not actually sync with the refresh rates, but it limits the drawing operations to a normal number.

To get also compatible with other browsers, there’s included a fallback set on setInterval that is limited to 60 frames per second.

This concludes the end of the tutorial. All in all, game loop is an essential yet basic aspect of any game and without which your game experience will suffer drastic consequences.

Tutorial Categories:

Author Dustin Ford

Dustin Ford is a Colorado-based writer and Contributing Editor at TopWebHost. He is deeply fascinated with everything that has to do with personal branding, online marketing, technology, and gadgets.


Tutorial Categories: