가시성이 바뀔 때의 동작을 정하세요
반사 신경 게임에서는 document.visibilityState가 hidden으로 바뀔 때 플레이를 일시 중지하고 카운트다운을 멈추며, 누르고 있던 키 상태를 지우세요. 페이지가 다시 보이면 재개 버튼을 표시합니다. 턴제 퍼즐은 일시 중지 화면 없이 보드를 그대로 둘 수 있으며, 그동안 오디오를 끄고 애니메이션 시계를 초기화할 수 있습니다.
구현하기 전에 타이머, 움직이는 위험 및 누른 키에 대해 예상되는 동작을 적어 두십시오. 그런 다음 각 경우마다 전환하고 돌아오십시오. 이 작은 매트릭스는 논리적으로 유지되는 키나 게임이 보이지 않는 동안 만료되는 타이머와 같은 버그를 포착합니다.
재개하기 전에 시간 기준을 초기화하세요
visibilitychange 이벤트를 감지하고 일시 중지 결정과 렌더링을 분리하세요. 돌아왔을 때 이전 프레임 타임스탬프를 현재 애니메이션 타임스탬프로 설정하거나, 재개 후 첫 프레임에서 시계를 초기화하도록 표시합니다. 그러지 않으면 다음 델타에 숨겨져 있던 전체 시간이 포함되어 객체가 갑자기 움직일 수 있습니다.
흐림 및 초점에만 의존하는 대신 페이지 가시성 API를 사용하십시오. 창은 표시된 상태에서 초점을 잃을 수 있으며 가시성은 문서가 실제로 숨겨져 있는지 여부를 전달합니다. 자동 저장 정책을 독립적으로 유지하세요. 일시 중지 동작과 지속성은 목적이 다르므로 별도로 테스트해야 합니다.
브라우저 게임 배경 탭 일시 중지 관련 질문
requestAnimationFrame이 숨겨진 탭에서 계속 실행되나요?
대부분의 브라우저는 배경 탭이나 숨겨진 iframe에서 애니메이션 콜백을 일시 중지하고 타이머 콜백도 제한될 수 있습니다. 이러한 동작을 정확한 시계가 아닌 가시성을 처리하기 위한 이유로 간주하세요.
숨겨진 경우 모든 게임이 일시 중지되어야 합니까?
모든 디자인에 맞는 단일 정책은 없습니다. 보이지 않는 시뮬레이션이 도전을 바꾸는 게임을 일시 중지합니다. 턴 기반 플레이의 경우 현재 보드를 보존하는 것만으로도 충분할 수 있습니다. 두 경우 모두, 돌아올 때 의도적으로 타이밍과 오디오를 재설정하십시오.
추가 읽을거리
오래된 정보를 발견하셨나요? 수정 사항 제보