할로윈 카드 짝 맞추기 — 완성형 프롬프트 출처: https://ntsapp.dev/devlog/prompt-halloween-match/ 아래 전체를 한 번에 복사해 AI 에게 그대로 주세요. --------------------------------------------------------------- HTML 파일 하나로 끝나는 "카드 짝 맞추기" 게임을 만들어 주세요. 파일을 더블클릭하면 바로 열려야 하고, 인터넷이 끊겨도 돌아가야 합니다. [완성 기준 — 이 다섯 가지가 되면 끝입니다] 1. 시작을 누르면 카드 16장(그림 8가지 × 2장)이 뒤섞여 전부 덮인 채로 깔린다. 2. 카드를 누르면 뒤집힌다. 두 장이 같은 그림이면 뒤집힌 채로 남고, 다르면 잠깐 보여 준 뒤 다시 덮인다. 3. 두 장을 뒤집을 때마다 "뒤집은 횟수"가 1 오른다. 짝을 맞추면 "맞춘 짝"이 1 오른다. 4. 여덟 쌍을 모두 맞추면 걸린 시간과 뒤집은 횟수를 알려 주고 멈춘다. 5. 시작을 다시 누르면 새로 섞여 처음부터 시작한다. [반드시 지킬 것] - 외부 파일을 하나도 받아 오지 않습니다. 그림은 이미지 파일이 아니라 코드로 그린 인라인 SVG 로 만드세요. 라이브러리도 쓰지 마세요. HTML·CSS·자바스크립트만 씁니다. - 섞기는 피셔-예이츠로 하세요. sort 에 난수를 넣어 섞으면 결과가 치우칩니다. - 틀린 두 장이 다시 덮이는 동안에는 다른 카드가 눌리지 않게 막으세요. (안 막으면 세 장 이상이 열려 짝 판정이 꼬입니다.) - 이미 맞춘 카드는 다시 눌리지 않게 하세요. - 최고 기록(가장 적은 뒤집은 횟수)만 localStorage 에 저장합니다. 저장이 막힌 환경(시크릿 모드 등)에서도 오류 없이 그냥 동작해야 합니다. try/catch 로 감싸고, 못 쓰면 화면에 한 줄로 알려 주세요. - 키보드만으로도 할 수 있어야 합니다. 카드는 button 으로 만들고 Tab 으로 이동, Enter·Space 로 뒤집습니다. 덮인 카드의 aria-label 은 그림을 알려 주면 안 됩니다(덮여 있는데 읽히면 정답이 새어 나갑니다). - 휴대폰 세로 화면에서도 카드가 넘치지 않게 하세요. 좁으면 한 줄에 3장으로 줄입니다. - prefers-reduced-motion 을 켠 사람에게는 뒤집기 애니메이션을 끄세요. [화면] - 위에 숫자 네 칸: 뒤집은 횟수 · 맞춘 짝(n / 8) · 걸린 시간 · 최고 기록. - 가운데 카드판, 아래 "새 판 시작" 버튼과 지금 상황을 알려 주는 한 줄. - 색은 어두운 할로윈 분위기(남보라 바탕에 주황 강조)로 하고, 맞춘 카드는 초록으로 구분해 주세요. [마지막에 해 주세요] - 어디를 고치면 카드 수나 그림을 바꿀 수 있는지 두세 줄로 알려 주세요.