🐕 띵똥, 저기 간식이야!

👯‍♀️ 팀 소개

• 2023 코드스쿼드 해커톤과 미니세미나 프로젝트
• 2023.05.15 ~ 2023.05.19

푸반&아티유니버스 팀

푸반	아티
gunoc	lolWK

🎮 게임 소개

띵똥이가 간식을 먹을 수 있도록 도와줄까요?
웹캠에 손동작을 등록하고, 방향을 가리켜 띵똥이를 이동시켜보세요!
정확한 손동작으로 다른 띵똥이보다 먼저 간식을 쟁취하세요
간식을 가장 많이 먹은 띵똥이가 승리합니다!

플레이 방법

1. 화살표 모양 박스를 눌러 손동작을 등록합니다.
2. 모든 방향을 등록하면 준비를 눌러주세요.
3. 머신러닝 라이브러리의 손동작 학습이 끝나면 준비가 완료됩니다
4. 모든 참가자가 준비를 완료하면, 참가자 한 명이 시작버튼을 누를 수 있습니다
5. 게임을 시작하면 타이머가 작동합니다
6. 60초 동안 가장 많은 간식을 먹은 띵똥이가 승리합니다

플레이 링크

띵똥, 저기 간식이야!

---

🤔마주했던 어려움

• 키보드 이벤트를 키보드를 누르지 않고 어떻게 발생시키는가?
  • 디스패처로 이벤트를 전해줌
• 카메라 두 대의 화면이 서로 보이게 하려면?
  • webRTC문제
  • 짧은 개발 기한에 비해 도입해야 하는 기술의 난이도가 높고 추가해야 할 도구가 많아서 개발 방향을 수정하는 쪽으로 결정했다
  • 처음 기획은 2인 게임이었지만 점수와 승패는 공유하되, 화면은 각자의 화면만 보이도록 결정하여 여러명이 참여할 수 있게 되었다
• 키보드이벤트가 손동작이 인식될 때마다 일어나다보니 너무 빠르고 많이 입력됨
  • 디바운스를 걸어주어야할까?
  • 성능을 고려하면 고쳐야할 기능이지만 개발 기한이 짧고, 현상태가 더 난이도가 높고 웃겨서 유지 하기로
• 크롬 카메라 권한 요청이 뜨지 않는 문제
  • 권한 요청을 막아두지 않았음에도 다양한 조건에서 요청이 되고 안되기에 원인을 알아내지 못했다
  • 링크에 접속하자마자 권한을 요청하는 게 아니라 요소 클릭 등 특정 이벤트가 일어난 뒤에 요청을 띄워보기로

😄해낸 것들!

• 머신러닝 라이브러리를 연동시켰다
  • 아이디어가 탄생한 핵심 도구를 포기하지 않고 개발에 이용하였다
• 게임성을 놓치지 않도록 코인을 먹고, 점수 경쟁이 가능하게 개발했다
• 파이어베이스 리얼타임 데이터베이스의 사용
• 파이어베이스 배포
• 깃을 통한 협업
  • 이슈관리와 프로젝트 관리

📚기술스택

• 웹캠으로 손동작을 인식시킬 ml5.js(머신러닝 라이브러리)
• db와 배포 firebase
• es6 javascript

---

⛳그라운드룰

아침 스크럼

• 매일 15분
• 한 사람씩 진행 상황 말하기
  • 짧게 컨디션 어떤지 근황 공유
  • 어제 하던 일 공유, 막힌 부분 도움 요청
  • 오늘의 계획 수립

작업 장소

• Gather Town

TODO 관리

• 깃허브 이슈
• 프로젝트(칸반보드)
• 노션