프로젝트 설명
기업 사내 이벤트용 모바일 웹 러너 미니게임입니다. 직원이 회사 핵심가치 아이템(안전·혁신·균형·공정)을 모으고 위험요소(과속·무단횡단 등)를 피하며 달리는 구조로 핵심가치 내재화 캠페인에 맞춰 설계했습니다. (고객사 요청으로 브랜드·캐릭터를 변경한 레퍼런스 데모)
주요 기능
- 성명·사번·부서 입력 → 개인/부서 랭킹 산정 구조
- Canvas 기반 실시간 주행: 차선 이동(탭/방향키) 점수·목숨·속도 HUD 아이템·장애물 랜덤 스폰
- 결과 화면: 점수·주행거리 획득 핵심가치 집계 오늘의 학습 포인트 개인/부서 TOP3
- 외부 이미지 없이 CSS/SVG로만 그래픽 구성 → 로고·캐릭터 교체 용이
- 모바일 우선(390px) 반응형 앱 설치 없이 링크 실행
기술 Next.js + React HTML5 Canvas TypeScript Vercel 배포
작업 범위 게임 룰·화면 기획 캔버스 엔진 구현 UI/HUD 결과·랭킹 화면 배포
