단어 팡팡 게임 만들기

영어 단어 학습 게임을 HTML 파일로 만들어줘. 기능: - 화면 위에서 영어 단어들이 랜덤으로 떨어져 내려옴 - 화면 아래쪽에 찾아야 할 단어의 뜻이 표시됨 (예: "농구") - 뜻에 해당하는 영어 단어를 클릭하면 사라지고 다음 문제로 넘어감 - 틀린 단어를 클릭하면 흔들리는 효과 - 60초 타이머와 점수판 표시 일단 아래 단어 5개로 테스트해줘: - basketball: 농구 - soccer: 축구 - tennis: 테니스 - baseball: 야구 - badminton: 배드민턴 하나의 HTML 파일로 만들어줘.

파일을 열었는데 [문제 상황을 여기에 써줘]. 예) "단어가 안 떨어져요" / "클릭해도 반응이 없어요" / "타이머가 멈춰요" 수정해줘.

게임 시작 화면에 엑셀 파일(.xlsx)을 업로드하는 버튼을 추가해줘. 엑셀 파일 형식: - 1행: 헤더 (A열: "단어", B열: "뜻") - 2행부터: 실제 단어 데이터 파일을 올리면 그 단어들로 게임이 시작되게 해줘. xlsx 파일을 읽으려면 SheetJS 라이브러리를 CDN으로 불러와서 사용해.

엑셀 파일에 시트가 여러 개 있을 때, 어떤 시트(단원)를 쓸지 고를 수 있게 해줘. 파일을 올리면 시트 목록이 버튼으로 나타나고, 원하는 시트를 누르면 그 단어들로 게임이 시작되게 해줘.

정답을 맞췄을 때와 틀렸을 때 효과를 추가해줘. - 정답: 단어가 팡! 하고 터지는 애니메이션 + 상쾌한 효과음 - 오답: 단어가 흔들리는 애니메이션 + 실패 효과음 - 효과음은 Web Audio API로 직접 만들어줘 (외부 파일 없이)

게임 설정 화면에 게임 시간을 고를 수 있는 옵션을 추가해줘. 선택지: - 30초 (빠르게) - 60초 (보통) ← 기본값 - 90초 (여유롭게) - 120초 (넉넉하게)

게임이 끝났을 때 결과 화면을 더 풍성하게 만들어줘. - 최종 점수와 함께 칭찬 메시지 (점수에 따라 다르게) · 100점 이상: "완벽해요! 영어 왕! 👑" · 70~99점: "훌륭해요! 조금만 더! 🌟" · 70점 미만: "다시 도전해봐요! 💪" - "한 번 더 하기" 버튼 - 승리/패배 효과음

게임의 전체 색상 테마를 바꿔줘. 원하는 스타일: [아래 중 하나를 골라 붙여넣기] 예시 1 — 오렌지 따뜻한 느낌: 주색: #E65100 (진한 오렌지) 배경: #FFFAF5 (크림색) 강조: #FF8F00 (황금 오렌지) 예시 2 — 파란 시원한 느낌: 주색: #1565C0 (진한 파랑) 배경: #E3F2FD (연파랑) 강조: #0288D1 (밝은 파랑) 예시 3 — 초록 자연 느낌: 주색: #2E7D32 (진한 초록) 배경: #F1F8E9 (연초록) 강조: #558B2F (올리브)

게임의 폰트와 전체 분위기를 초등학생 영어 수업에 어울리게 바꿔줘. - 제목과 점수: 귀엽고 굵은 영문 폰트 (Baloo 2 추천) - 한글: 깔끔한 고딕 폰트 (Noto Sans KR) - 버튼: 모서리가 둥글고 눌리는 느낌 - 단어 카드: 입체감 있는 말풍선 스타일 Google Fonts에서 불러와서 사용해줘.

게임 시작 화면(오버레이)을 더 예쁘게 만들어줘. - 상단에 멋진 게임 제목 (예: "🏀 단어 팡팡 게임") - 제목 아래에 짧은 설명 문구 - 설정 영역은 흰 카드 스타일로 정리 - 시작 버튼은 크고 눈에 잘 띄게

게임 배경에 웹캠 화면이 나오게 해줘. - 게임 화면 뒤에 카메라 영상이 거울처럼 뒤집혀서 나와야 해 - 카메라 영상 위에 반투명하게 게임 UI가 올라오는 느낌 - 카메라 권한을 거부했을 때는 그냥 배경색으로 대체해줘

화면을 좌우로 나눠서 2명이 동시에 게임하는 모드를 추가해줘. - 화면 중앙에 세로 구분선이 생김 - 왼쪽(P1)과 오른쪽(P2)에 각자의 목표 단어와 점수가 표시됨 - 단어들이 각자의 영역 안에서만 떨어짐 - 60초 후 더 높은 점수인 사람이 승리 - 설정 화면에서 "1인 모드 / 2인 모드" 선택 가능

MediaPipe Hands 라이브러리를 사용해서 손가락으로 단어를 터치하는 기능을 추가해줘. - CDN: https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js - 검지 손가락 끝 위치를 추적해서 단어 위에 올리면 클릭되게 해줘 - 손 포인터를 동그란 원으로 화면에 표시해줘 - 설정에서 "터치/마우스" 와 "손 동작" 중 선택 가능하게 해줘

너는 숙련된 프론트엔드 개발자이자 초등학생도 이해할 수 있게 설명하는 코딩 튜터다. 앞으로 내가 웹앱을 만들고 싶다고 요청하면 다음 규칙을 반드시 지켜라. [개발 규칙] 1. HTML, CSS, JavaScript를 반드시 하나의 HTML 파일에 작성한다. 2. 별도의 파일 분리는 하지 않는다. 3. 내가 바로 복사하여 실행할 수 있도록 완전한 코드만 제공한다. 4. 누락된 코드 없이 처음부터 끝까지 작성한다. 5. CDN 사용이 가능하면 설치가 필요 없는 방법을 우선 사용한다. 6. React, Vue 등의 프레임워크가 필요한 경우 CDN 방식으로 구현한다. 7. 특별한 이유가 없다면 순수 HTML/CSS/JavaScript를 우선 사용한다. 8. 모바일과 PC 모두 사용할 수 있도록 반응형으로 제작한다. 9. 디자인은 현대적이고 깔끔하게 만든다. 10. 색상은 보기 편한 색상을 사용한다. 11. 버튼, 입력창 등의 UI는 충분히 크게 만든다. 12. 오류가 발생하지 않도록 전체 코드를 검토한 후 제공한다. 13. 외부 API가 필요한 경우 사용 방법도 함께 설명한다. 14. 초보자가 이해할 수 있도록 코드 주석을 적절히 넣는다. 15. 내가 수정 요청을 하면 전체 코드를 다시 제공한다. 16. 기능 추가 시 기존 기능이 삭제되지 않게 유지한다. 17. 웹앱 제목과 주요 기능을 상단에 표시한다. 18. 저장 기능이 필요하면 LocalStorage를 활용한다. 19. 데이터가 많아질 경우 검색, 정렬, 필터 기능을 고려한다. 20. 접근성(Accessibility)을 고려한다. [응답 형식] 0. 내가 입력한 프롬프트 원문을 그대로 먼저 보여준다. 1. 먼저 구현 내용을 간단히 설명한다. 2. 그 다음 완성된 HTML 파일 전체를 제공한다. 3. 코드 중간 생략 금지. 4. "이후 계속 작성" 금지. 5. "나머지는 동일" 금지. 6. 항상 실행 가능한 최종본 제공. [추가 규칙] - 사용자가 초보자라고 가정한다. - 가장 간단하면서 유지보수가 쉬운 구조를 사용한다. - UI/UX 품질을 높인다. - 에러 방지 로직을 포함한다. - 필요한 경우 샘플 데이터도 생성한다.

방금 만든 게임에서 문제가 생겼어. [증상을 여기에 구체적으로 설명] 예) "파일을 열면 빈 화면만 나와" 예) "단어를 클릭해도 아무 반응이 없어" 예) "타이머가 시작되지 않아" 전체 코드를 다시 주지 말고, 수정해야 할 부분만 알려줘.