DEV Community

Cover image for Game Loop
Abhiraj Adhikary
Abhiraj Adhikary

Posted on • Edited on

4 3 1 2 2

Game Loop

This is a submission for the Web Game Challenge: One Byte Explainer

Explainer

The Game Loop drives a game by repeating three steps: 1) handles input, 2) updates game state (like movement), and 3) renders visuals. This cycle runs many times per second for smooth gameplay. In web games, requestAnimationFrame() maintains fluid motion.

Additional Context

Example Game: Space Invaders

Process Input: Detect player’s key presses to move the spaceship left or right and shoot lasers.
Update State: Move the spaceship and lasers based on input, update alien positions, and check for collisions.
Render Scene: Draw the spaceship, lasers, aliens, and scores on the screen.
Application: The game loop runs repeatedly, allowing for smooth movement of the spaceship and lasers, and updating alien positions in real-time. requestAnimationFrame() ensures the game runs at the optimal frame rate, providing a fluid and engaging experience for the player.

Credit shared with @koulik_hota_826b4a7c11b8c

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

AWS GenAI Live!

GenAI LIVE! is a dynamic live-streamed show exploring how AWS and our partners are helping organizations unlock real value with generative AI.

Tune in to the full event

DEV is partnering to bring live events to the community. Join us or dismiss this billboard if you're not interested. ❤️