링크 역할을 하는 게임은 무엇인가요?

브라우저에서 실행되는 모든 것: 퍼즐 게임, 카드 게임, 텍스트 게임, 소규모 아케이드 게임, 프로토타입. 다운로드, 설치 또는 플레이어에 없는 런타임이 필요한 경우에는 그렇지 않습니다. 제약은 장르가 아니라 브라우저입니다.

휴대전화에서도 작동하나요?

하나에 대한 컨트롤을 구축하는 경우에만 가능합니다. 브라우저 게임을 휴대폰에서 플레이할 수 없는 일반적인 이유는 키보드 입력 때문이며, 터치 컨트롤을 추가하는 것은 플레이할 수 있는 사람을 가장 넓힐 수 있는 유일한 변화입니다. 대부분의 플레이어가 전화를 사용하고 있다고 가정합니다.

진행 상황을 저장할 수 있나요?

NOS 공유 링크에서 플레이어는 소유자가 저장한 것부터 시작하고 다시 로드하면 진행 상황이 사라집니다. 귀하가 직접 호스팅하는 페이지에서 브라우저 저장소는 해당 장치에 점수를 유지하지만 동기화되지 않으며 플레이어가 점수를 지울 수 있습니다.

게임 전체가 하나의 파일에 있어야 하나요?

꼭 그럴 필요는 없으며 도움이 됩니다. 자체 포함된 페이지에는 로드에 실패할 일이 없고, 경로 문제가 없으며, 이동할 때 깨질 일이 없습니다. 소규모 게임의 경우 가장 강력한 배송 방법입니다.

멀티플레이어는 어떻습니까?

플레이어 간의 실시간 작업에는 메시지를 전달하기 위해 서버가 필요하지만 페이지는 그렇지 않습니다. 하나의 장치에서 핫시트 멀티플레이어가 제대로 작동합니다. 네트워크 플레이가 필요한 경우 페이지는 클라이언트가 될 수 있지만 그 뒤에서 무언가가 실행되고 있어야 합니다.

게임 링크: 아무것도 설치하지 않고 플레이할 수 있게 해주세요

게임을 링크로 공유한다는 것은 플레이어가 한 번만 탭하면 다운로드할 것도 설치되지도 않은 채 플레이한다는 의미입니다.

소규모 게임이나 프로토타입의 경우, 그 격차는 실제로 플레이할지 여부를 결정하는 가장 큰 요소입니다.

휴대폰의 브라우저 게임입니다. 플레이 영역은 아래 터치 컨트롤로 화면을 채웁니다.

이 가이드에서는 터치 컨트롤, 게임을 하나의 파일로 유지, 처음 10초, 진행 상황 저장 및 페이지가 실행되는 위치를 다룹니다.

터치 컨트롤은 선택 사항이 아닙니다

브라우저 게임이 실행되지 않는 가장 일반적인 이유는 키보드가 필요하기 때문입니다.

링크로 전송된 게임은 이를 수신한 대부분의 사람들이 휴대폰에서 실행하게 됩니다. 화살표 키를 사용할 수 없고 WASD를 사용할 수 없으며 플레이어는 몇 초 안에 WASD를 닫습니다.

<div class="pad" aria-label="Controls">
  <button data-dir="left" aria-label="Left">&larr;</button>
  <button data-dir="right" aria-label="Right">&rarr;</button>
  <button data-act="fire" aria-label="Fire">&bull;</button>
</div>

.pad { display: flex; gap: 0.75rem; justify-content: center; padding: 1rem; }
.pad button {
  width: 4rem; height: 4rem; border-radius: 1rem;
  font-size: 1.5rem; touch-action: manipulation;
}
@media (pointer: fine) { .pad { display: none; } }

두 가지 세부 사항이 많은 작업을 수행합니다. 조작 터치 동작은 브라우저가 탭이 두 번 탭 확대/축소인지 확인하기 위해 기다리는 것을 중지합니다. 그렇지 않으면 모든 입력에 눈에 띄는 지연이 추가됩니다. 그리고 포인터 쿼리는 마우스가 있는 장치의 패드를 숨기므로 데스크톱 플레이어는 키보드 버전을 얻습니다.

버튼을 정말 크게 만드세요. 4렘은 넉넉하지 않고 엄지 손가락으로 작동하는 최소값입니다.

가능한 한 파일에 보관하세요.

자체 포함된 페이지에는 외부 종속성이 없으므로 로드되지 않은 스타일시트, 변경된 경로의 스크립트, 이동할 때 작동하지 않고 로컬에서 작동하는 자산 등 전체 실패 클래스를 제거합니다.

소규모 게임의 경우 가장 강력한 배송 방법입니다. 스타일과 스크립트를 인라인하고 작은 자산을 직접 인코딩합니다. 자체 포함된 HTML 파일 및 단일 HTML 파일 게임의 기술입니다.

단점은 파일 크기입니다. 수백 킬로바이트 이상의 자산을 별도로 로드하고 진행 상태를 표시하는 것이 하나의 큰 페이지보다 낫습니다.

처음 10초가 모든 것을 결정한다

플레이어는 어려운 수준에서 종료하지 않습니다. 그들은 무엇을 해야 할지 알 수 없었기 때문에 처음 10초 만에 그만 두었습니다.

첫 번째 상호 작용을 명확하고 즉각적으로 만드십시오. 메뉴가 있는 타이틀 화면도 없고, 읽을 지침도 없고, 입력할 이름도 없습니다. 페이지가 나타난 후 1초 이내에 무언가가 움직이거나 무언가를 탭할 수 있는 것이 분명해집니다.

지침을 앞쪽에 두기보다는 필요한 곳에 두십시오. 기계공이 가장 중요한 순간에 한 줄 힌트가 아무도 읽지 않은 문단보다 더 잘 가르칩니다.

데스크탑에서 동일한 게임. 터치 패드가 숨겨지고 키보드 컨트롤이 나열됩니다.

진행 상황 저장 중

귀하가 직접 호스팅하는 페이지에서 브라우저 저장소는 해당 장치 방문 사이에 점수 또는 저장을 유지합니다. NOS 공유 링크에서 플레이어는 소유자가 저장한 것부터 시작하고 자신의 진행 상황은 다시 로드할 때까지만 지속됩니다.

localStorage.setItem('best', String(score));
const best = Number(localStorage.getItem('best') || 0);

유용하지만 신뢰할 수 없습니다. 장치별, 브라우저별이며 플레이어가 지울 수 있습니다. 약속한 저장 시스템이 아니라 복귀 플레이어가 최고 점수를 유지할 수 있도록 편의를 위해 사용하십시오.

여러 장치에서 살아남아야 하는 모든 것에는 계정과 서버가 필요합니다. 이는 다른 프로젝트입니다. 로컬 스토리지의 배경입니다.

다른 사람에게 제공되는 동일한 페이지에 대한 자신의 컴퓨터에 있는 페이지입니다.

페이지가 부족한 경우

한계를 분명히 하십시오.

네트워크 멀티플레이어에는 플레이어 간에 메시지를 전달하는 서버가 필요합니다. 한 장치의 핫시트는 괜찮습니다. 다른 곳에서 친구와 대결하는 것은 아닙니다.

플레이어 전체의 리더보드에는 점수를 저장하기 위한 중앙 위치가 필요합니다. 지역 최고 점수가 작동합니다. 전역 테이블은 그렇지 않습니다.

대규모 자산 로드는 로드 상태가 없으면 어색하고 단일 파일에 있는 경우에는 어색합니다.

안티치트는 존재하지 않습니다. 페이지의 모든 내용은 플레이어가 읽고 변경할 수 있으므로 브라우저에서 제출된 점수는 신뢰할 수 없습니다.

퍼즐, 프로토타입 또는 친구에게 보내는 게임에는 이러한 것들이 중요하지 않습니다.

주소에 넣어두세요

터치 컨트롤을 추가하고, 독립성을 유지하고, 첫 번째 탭을 명확하게 만들고, 공유 링크를 생성하세요.

플레이어가 한 번 탭하면 재생됩니다. 이것이 전체적인 장점이고 큰 장점입니다.

게임을 링크로 공유하는 방법