Two years ago when I was writing my book about building 3D browser games, I was spending a lot of time writing first person games in JavaScript. First person games in particular involve a lot of fast, precise motion, which makes "pointer lock" essential. "Pointer lock" is when a program takes over the mouse cursor, tracking mouse movement on its own and displaying its own cursor if needed (usually locked to the middle of the screen, hence the name).

The main loop is a core part of any application in which state changes over time. In games, the main loop is often called the game loop, and it is typically responsible for computing physics and AI as well as drawing the result on the screen. Unfortunately, the vast majority of main loops found online - especially those in JavaScript - are written incorrectly due to timing issues. I should know; I've written my fair share of bad ones. This post aims to show you why many main loops need to be fixed, and how to write a main loop correctly.

I have a spreadsheet of metrics I track every week. I add a new column to the left every week for that week's data, so that I don't have to scroll forever to the right to see recent information. (Yes, it would be easier to add rows, but that's another story.) All was well until I wanted to add sparklines; since the newer data was on the left, it looked like the sparklines were trending down, when actually the data was just backwards. I needed to find a way to reverse an array in Google Spreadsheets.