브라우저 게임 기초

HTML은 구조, CSS는 표현, JavaScript는 상호작용을 담당합니다. 카드·퀴즈·메뉴는 HTML/CSS, 스프라이트·입자는 Canvas 2D, 3D와 복잡한 렌더링은 WebGL이 적합합니다. 아이디어를 충족하는 간단한 방식을 선택하세요.

애니메이션은 requestAnimationFrame과 경과 시간을 사용합니다.

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

update와 draw는 게임이 구현합니다. 시간 제한은 백그라운드 복귀 시 급변을 줄이지만 완전한 시간 모델은 아닙니다.

터치 영역을 넉넉히 하고 적절히 키보드를 지원하며 중요한 조작이 호버에 의존하지 않게 하세요. 가로·세로 화면을 일찍 확인하고 첫 씬 우선 로딩, 이미지 압축, 적절한 오디오, 로딩 안내를 준비합니다. 다음은 프로젝트 구조입니다.