주차 연습

Driving Practice Game

🚗 Experience Driving Practice on the Web!

Experience the thrill of driving in this immersive Three.js NEXT game. Enhance your driving skills while emphasizing the value of safe and meaningful journeys. Join us in promoting the importance of driving for connectivity and safety

https://car-drive-practice.vercel.app/

✅ 개발 설명

• Next.js 프레임워크로 작업 되었습니다. (R3f, Drei), [react-next-three] 공식 보일러 플레이트를 참고함.

• cannon으로 물리엔진을 추가 하였습니다. 엑셀, 브레이크를 통해 차량의 스피드를 제어할 수 있습니다.

• firebase로 구글 회원가입, 로그인을 구현하였습니다. [공식독스] 및 공식 유튜브 참조

• 저장 데이터를 LocalStorage와 firebase 클라우드에 저장 하였습니다.

• scss로 스타일링을 주었습니다. framer-motion으로 애니메이션을 주었습니다.

• zustand로 전역값 관리를 합니다. ex( 게임 오버, 성공, 준비를 관리 합니다.)

✅ 자동차 주차 연습 게임

• 카메라 화면이 3개로 이루어져 있어서 전환을 할 수 있습니다.

• X 축을 체크하여 핸들과 앞바퀴 방향을 정합니다.

• 엑셀, 브레이크를 통해 차량의 스피드를 제어할 수 있습니다.

• 기어를 통해 자동차와 같은 조작을 합니다.

• 주차를 120초 이내에 클리어하면 “성공” 입니다.

• 클리어한 시간에 따라 별 점수가 있습니다.

• 벽이나 다른 차량에 부딪히면 “실패” 입니다.