← Back to Portfolio

🎮 Input / Output

Asynchronous I/O

Project Evidence Required

Use async/await or Promises for API calls.

Assessment Method

Code review: async/await or .then() chains

What it is

Asynchronous operations don’t block the main thread. JavaScript represents them with Promises, which can be consumed using .then() chains or the cleaner async/await syntax. await pauses an async function until the Promise resolves, without freezing the whole JS runtime.

Why it matters

The game loop runs at 60 frames per second. If a network request blocked the main thread, the game would freeze whenever a request was in flight. Async I/O keeps the game responsive while requests run in the background.

How GateGame implements it

All Leaderboard and NPC AI fetches use async/await. The level transition uses requestAnimationFrame (async via the browser) and setTimeout to schedule a fade-out before swapping levels — neither blocks the game loop. The player can keep moving while a leaderboard refresh runs.

Code Example

// Async transition to next level, scheduled without blocking
requestAnimationFrame(() => {
  fade.style.opacity = '1';
  setTimeout(() => {
    topGame.transitionToLevel();
  }, 800);
});

// async/await keeps the function readable
async function submitScore(score) {
  const res = await fetch('/api/leaderboard', { /* ... */ });
  return await res.json();
}

Key Takeaway

async/await reads like sequential code but doesn’t block the game loop. The level keeps running at 60fps while the network does its thing.

---