HTML/CSS/JS 기반의 기능적이고 다양한 옵션을 갖춘 웹 카드 게임을 구현할 때 유용합니다.
Develop a memory matching card game using HTML5, CSS3, and JavaScript. Create visually appealing card designs with flip animations. Implement difficulty levels with varying grid sizes and card counts. Add timer and move counter for scoring. Include sound effects for card flips and matches. Implement leaderboard with score persistence. Add theme selection with different card designs. Include multiplayer mode for competitive play. Create responsive layout that adapts to screen size. Add accessibility features for keyboard navigation. Implement progressive difficulty increase during gameplay.
HTML5, CSS3, JavaScript를 사용하여 메모리 맞추기 카드 게임을 개발하세요. 카드 뒤집기 애니메이션을 포함한 시각적으로 매력적인 카드 디자인을 만드세요. 그리드 크기와 카드 수가 다양하게 조절되는 난이도를 구현하세요. 점수 계산을 위한 타이머와 이동 횟수 카운터를 추가하세요. 카드 뒤집기 및 매칭에 대한 음향 효과를 포함하세요. 점수가 유지되는 순위표를 구현하세요. 다양한 카드 디자인이 있는 테마 선택 기능을 추가하세요. 경쟁 플레이를 위한 다중 사용자(멀티플레이어) 모드를 포함하세요. 화면 크기에 맞게 조정되는 반응형 레이아웃을 만드세요. 키보드 탐색을 위한 접근성 기능을 추가하세요. 게임 플레이 중 점진적인 난이도 상승을 구현하세요.
출처 · prompts.chat · Memory Card Game — 원문은 출처에 게시된 그대로이며, 권리는 원작자에게 있습니다.
Gemini로 프롬프트를 실행해 생성한 화면입니다. 화면 안에서 직접 조작하실 수 있습니다.
Web Audio API 기반 자체 합성 효과음과 3D 카드 뒤집기 애니메이션을 갖춘 TPI 브레인 메모리 카드 게임입니다. 싱글 플레이 난이도 모드, 아케이드 단계별 상승 모드, 2인 턴제 대결 모드, 3가지 그래픽 테마, 키보드 접근성 조작을 지원하는 완전한 반응형 웹 애플리케이션입니다.
Develop a memory matching card game named TPI Memory Challenge using HTML5, CSS3, and JavaScript. Create visually appealing card designs with flip animations. Implement difficulty levels (Easy 4x3, Medium 4x4, Hard 6x4) with varying grid sizes and card counts. Add timer and move counter for scoring. Include sound effects using Web Audio API for card flips, matches, and game clear. Implement leaderboard with score persistence. Add theme selection (TPI Neon, TPI Classic, TPI Nature) with different card designs. Include multiplayer mode for competitive play (Player 1 vs Player 2). Create responsive layout that adapts to screen size. Add accessibility features for keyboard navigation (Arrow keys, Tab, Enter/Space bar). Implement progressive difficulty increase during gameplay in Arcade mode.
Gemini로 실행한 결과입니다. 입력 항목에는 국내 환경의 예시값을 적용했습니다(AI 생성 — 사실 확인 필요).
Develop a memory matching card game named mopick Memory Challenge using HTML5, CSS3, and JavaScript. Create visually appealing card designs with flip animations. Implement difficulty levels (Easy 4x3, Medium 4x4, Hard 6x4) with varying grid sizes and card counts. Add timer and move counter for scoring. Include sound effects using Web Audio API for card flips, matches, and game clear. Implement leaderboard with score persistence. Add theme selection (mopick Neon, mopick Classic, mopick Nature) with different card designs. Include multiplayer mode for competitive play (Player 1 vs Player 2). Create responsive layout that adapts to screen size. Add accessibility features for keyboard navigation (Arrow keys, Tab, Enter/Space bar). Implement progressive difficulty increase during gameplay in Arcade mode.
Web Audio API 기반 자체 합성 효과음과 3D 카드 뒤집기 애니메이션을 갖춘 mopick 브레인 메모리 카드 게임입니다.
싱글 플레이 난이도 모드, 아케이드 단계별 상승 모드, 2인 턴제 대결 모드, 3가지 그래픽 테마, 키보드 접근성 조작을 지원하는 완전한 반응형 웹 애플리케이션입니다.
mopick 개선안
원문을 그대로 넣으면 AI 가 매번 다르게 답하거나 중요한 부분을 빠뜨릴 수 있습니다. 개선안은 원문의 뜻과 언어는 그대로 두고 역할 · 바꿔 넣을 입력 칸 · 결과 형식 · 지킬 조건을 보완해 다시 쓴 버전입니다. 원문과 같은 곳(ChatGPT · Claude 등)에 그대로 붙여 넣어 쓰면 됩니다.
AI 평가 점수 — 명확성 · 구체성 · 결과 형식 · 재사용성 기준(100점)
AI 역할레슨 01 배우기 ›
원문 · 없음AI 에게 맡길 역할이 정해져 있지 않아 답의 관점 · 수준이 그때그때 달라질 수 있었습니다.
개선 · 역할을 정함Act as a Senior Web Developer. Create a complete, production-ready Memory Matching Card Ga
입력 칸레슨 05 배우기 ›
원문 · 없음바꿔 넣을 자리가 표시돼 있지 않아 쓸 때마다 원문을 직접 고쳐야 했습니다.
개선 · 1개[single HTML file / modular HTML, CSS, JS files]
이 개선안에 쓰인 기법 — 프롬프트 클래스에서 배우기
원문
Develop a memory matching card game using HTML5, CSS3, and JavaScript. Create visually appealing card designs with flip animations. Implement difficulty levels with varying grid sizes and card counts. Add timer and move counter for scoring. Include sound effects for card flips and matches. Implement leaderboard with score persistence. Add theme selection with different card designs. Include multiplayer mode for competitive play. Create responsive layout that adapts to screen size. Add accessibility features for keyboard navigation. Implement progressive difficulty increase during gameplay.
개선안 · 색칠한 [칸]에 내 내용을 넣어 쓰세요
Act as a Senior Web Developer. Create a complete, production-ready Memory Matching Card Game using clean HTML5, CSS3 (Grid & animations), and vanilla JavaScript. Requirements: - Core: Smooth card flip animations, timer, move counter, sound effects (Web Audio API), and progressive difficulty levels. - Features: Theme switcher, 2-player local mode, and persistent leaderboard using `localStorage`. - UX & Accessibility: Fully responsive design and complete keyboard navigation (ARIA standards). Output Format: Provide fully functional code in [single HTML file / modular HTML, CSS, JS files] with clear comments and brief setup instructions.