H5 예제 · Star Sprint

체력 3으로 시작해 순찰 로봇 2대를 피하며 45초 안에 별 5개를 모읍니다. WASD/방향키 이동, P 일시 정지, R 다시 플레이. 모바일 뷰포트에는 방향 버튼이 있습니다. 소스에는 HTML/JS와 Vite 버전이 모두 포함됩니다.

다운로드 및 실행

새 native-h5 폴더에 압축을 풀고 루트에 package.json이 오게 합니다. 해당 폴더에서 한 경로를 선택하세요.


python3 -m http.server 8000 --bind 127.0.0.1 --directory plain/dist


npm ci
npm run dev

직접 실행 버전은 http://127.0.0.1:8000/, Vite는 http://127.0.0.1:5173/ 입니다. 기록상 위치는 데스크톱의 Move to Combos/native-h5이며 실제 경로를 사용하세요.

로컬 Star Sprint: 시작, 이동, 별 수집, 점수 확인.

로컬 Star Sprint: 시작, 이동, 별 수집, 점수 확인.

테스트와 게시

별을 모아 점수가 증가하고 5개에서 승리하는지 확인합니다. 충돌 피해, 시간 초과 패배, 일시 정지, 다시 플레이도 검사하세요. Vite는 dev를 중지한 뒤:


npm run build
npm run preview

http://127.0.0.1:4173/ 에서 확인하며 직접 실행 버전은 plain/dist를 사용합니다. 게시 후 자신의 combos.json을 유지하세요.

기록된 Vite 배포는 pc,mobile, revision 1입니다. Star Sprint 플레이 , Canvas 코드 07752. 로컬과 온라인에서 키보드로 완전 클리어했습니다. 모바일 조작은 뷰포트만 확인했고 실제 휴대폰에서는 검증하지 않았습니다.

Combos 공개 페이지에서 첫 별을 수집하는 Star Sprint.

Combos 공개 페이지에서 첫 별을 수집하는 Star Sprint.

소스와 다운로드

index.html/src/style.css는 Canvas, HUD, 버튼, 배치, 터치를 담당합니다. src/main.js는 입력, 이동, 수집, 충돌, 시간, 승패, 그리기입니다. package.json/vite.config.js는 빌드 스크립트와 상대 URL, plain/dist는 빌드 불필요 버전입니다.

다음은 점수 처리 설명이며 Combos 연동 필수 코드는 아닙니다.


if (!star.collected && Math.hypot(
  star.x - state.player.x, star.y - state.player.y
) < 35) {
  star.collected = true;
  state.score++;
}
if (state.health <= 0 || state.elapsed >= 45) show('lost');
else if (state.score === 5) show('won');

두 완성본 ZIP 모두 압축 해제 루트에 index.html이 있습니다.

출처: Combos 개발자 연동 가이드 . 원문 확인일: 2026-10-08, CLI v1.14.2. 예제 결과는 원문에 기록된 실행 결과입니다.