JavaScript/TypeScript Gameloop 🕹️

14/05/2024 Development 5 mins read
Table Of Contents

Overview

This snippet provides a game loop in JavaScript and TypeScript that runs every frame, ensuring more consistent values. It’s a basic snippet that can be modified later to include additional functionalities, such as handling tab switching (as JavaScript is throttled when a tab is switched).

The Gameloop Snippet

// To store last timestep
let lastTime = 0;
// To store time elapsed between frames
let deltaTime = 0;
// Function for the game loop that will be on loop forever.
function gameLoop(currentTime) {
// Calculate deltaTime by subtracting the last timestamp from the current timestamp and converting it to seconds
deltaTime = (currentTime - lastTime) / 1000;
// Update lastTime with the current timestamp
lastTime = currentTime;
// Call the update function to update game objects based on deltaTime
update(deltaTime);
// Call the render function to render game objects
render();
// Request the next frame by recursively calling gameLoop
requestAnimationFrame(gameLoop);
}
// Function to update game logic
function update(deltaTime) {
// Placeholder function to update game objects based on deltaTime
// Example: object.position.x += object.velocity.x * deltaTime;
// Example 2: generators.map((generator) => generator.update(deltaTime))
}
// Function to render game objects
function render() {
// Placeholder function to render game objects. You don't need it if you are using frameworks.
// Example: sprite.style.hidden = true or false.
}
// Start the game loop by requesting the first frame
requestAnimationFrame(gameLoop);
// To store last timestep
let lastTime: number = 0;
// To store time elapsed between frames
let deltaTime: number = 0;
// Function for the game loop that will be on loop forever.
function gameLoop(currentTime: number): void {
// Calculate deltaTime by subtracting the last timestamp from the current timestamp and converting it to seconds
deltaTime = (currentTime - lastTime) / 1000;
// Update lastTime with the current timestamp
lastTime = currentTime;
// Call the update function to update game objects based on deltaTime
update(deltaTime);
// Call the render function to render game objects
render();
// Request the next frame by recursively calling gameLoop
requestAnimationFrame(gameLoop);
}
// Function to update game logic
function update(deltaTime: number): void {
// Placeholder function to update game objects based on deltaTime
// Example: object.position.x += object.velocity.x * deltaTime;
// Example 2: generators.map((generator) => generator.update(deltaTime))
}
// Function to render game objects
function render(): void {
// Placeholder function to render game objects. You don't need it if you are using frameworks.
// Example: sprite.style.hidden = true or false.
}
// Start the game loop by requesting the first frame
requestAnimationFrame(gameLoop);

Code Editor

Counter Increment
Output