Browser game basics

HTML provides structure, CSS presentation, and JavaScript interaction. HTML/CSS suits cards, quizzes, menus, and simple controls; Canvas 2D suits sprites and particles; WebGL suits 3D and demanding rendering. Choose the simplest approach that supports your idea.

Use requestAnimationFrame and elapsed time for animation:

game-loop.js


let previousTime;
 
function frame(time) {
  const delta = previousTime === undefined
    ? 0
    : Math.min((time - previousTime) / 1000, 0.05);
 
  previousTime = time;
  update(delta);
  draw();
  requestAnimationFrame(frame);
}
 
requestAnimationFrame(frame);

Your game supplies update and draw. The clamp limits jumps after a background tab resumes; this is a starting point, not a complete timing model.

Make touch targets comfortable, support keyboards where useful, and keep essential actions independent of hover. Check portrait and landscape early. Load the first scene’s assets first, compress images, use audio deliberately, and explain loading progress. Continue with project structure.