Основы браузерных игр

HTML задаёт структуру, CSS — вид, JavaScript — взаимодействие. HTML/CSS подходят карточкам, викторинам и меню; Canvas 2D — спрайтам и частицам; WebGL — 3D и сложной графике. Выбери простейший подходящий вариант.

Для анимации используй requestAnimationFrame и прошедшее время:

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);

Игра предоставляет update и draw. Ограничение уменьшает скачки после фоновой вкладки, но не является полной моделью времени.

Сделай удобные сенсорные зоны, полезную поддержку клавиатуры и действия без обязательного наведения. Рано проверь ориентации, загружай первую сцену вначале, сжимай изображения, продумывай звук и индикацию загрузки. Далее — структура.