사용 사례

취미 프로젝트 개발

광범위한 프로그래밍 지식이 없어도 게임과 애플리케이션을 쉽게 빌드할 수 있습니다.

모델

•

닌자 에이전트

브라우저 기반 메모리 매치 카드 게임을 만들기 위한 단계별 지침과 전체 JavaScript 코드를 알려주세요. 이전 게임 개발 경험이 없는 것으로 가정할 수 있습니다.

쿼리 사용해보기

닌자 에이전트

•

코더

메모리 매치 카드 게임 개발 연구 보고서

핵심 요약

이 보고서는 게임 개발 경험이 없는 개발자를 위해 설계된 브라우저 기반 메모리 매치 카드 게임을 빌드하기 위한 포괄적인 지침과 코드를 제공합니다.구현에서는 HTML, CSS 및 JavaScript를 사용하여 플레이어가 카드를 뒤집어 쌍을 찾는 대화형 매칭 게임을 만듭니다.

연구 방법론

제공된 대화에 대해 다음을 포함한 분석이 수행되었습니다.

초기 코드 구현 검토
코드 문제 식별 및 개선 필요
포괄적인 단계별 지침 개발

기술 요구 사항

사전 요구 사항

HTML, CSS, 자바스크립트에 대한 기본적인 이해
코드 편집기 (비주얼 스튜디오 코드, 서브라임 텍스트 등)
웹 브라우저

프로젝트 구조

게임에는 세 가지 기본 파일이 필요합니다.

index.html
style.css
script.js

구현 가이드

1.HTML 구현

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Memory Match Game</title>
7    <link rel="stylesheet" href="style.css">
8</head>
9<body>
10    <div class="game-container">
11        <div class="game-info">
12            <div class="moves">Moves: <span id="moves-count">0</span></div>
13            <button id="restart">Restart Game</button>
14        </div>
15        <div id="game-board"></div>
16    </div>
17    <script src="script.js"></script>
18</body>
19</html>

2.CSS 구현

1.game-container {
2    max-width: 800px;
3    margin: 0 auto;
4    padding: 20px;
5}
6
7#game-board {
8    display: grid;
9    grid-template-columns: repeat(4, 1fr);
10    gap: 10px;
11    margin-top: 20px;
12}
13
14.card {
15    aspect-ratio: 1;
16    position: relative;
17    transform-style: preserve-3d;
18    transition: transform 0.5s;
19    cursor: pointer;
20}
21
22.card.flipped {
23    transform: rotateY(180deg);
24}
25
26.card-front, .card-back {
27    position: absolute;
28    width: 100%;
29    height: 100%;
30    backface-visibility: hidden;
31    border-radius: 8px;
32    display: flex;
33    align-items: center;
34    justify-content: center;
35}
36
37.card-front {
38    background-color: #2196F3;
39    transform: rotateY(180deg);
40}
41
42.card-back {
43    background-color: #E0E0E0;
44}
45
46.card.matched {
47    transform: rotateY(180deg);
48    pointer-events: none;
49}

3.자바스크립트 구현

1document.addEventListener('DOMContentLoaded', () => {
2    const gameBoard = document.getElementById('game-board');
3    const movesDisplay = document.getElementById('moves-count');
4    const restartButton = document.getElementById('restart');
5    
6    const symbols = ['🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼'];
7    let cards = [...symbols, ...symbols];
8    let flippedCards = [];
9    let matchedPairs = 0;
10    let moves = 0;
11    let isProcessing = false;
12
13    function shuffle(array) {
14        for (let i = array.length - 1; i > 0; i--) {
15            const j = Math.floor(Math.random() * (i + 1));
16            [array[i], array[j]] = [array[j], array[i]];
17        }
18        return array;
19    }
20
21    function createCard(symbol) {
22        const card = document.createElement('div');
23        card.className = 'card';
24        card.innerHTML = `
25            <div class="card-front">${symbol}</div>
26            <div class="card-back"></div>
27        `;
28        card.dataset.symbol = symbol;
29        card.addEventListener('click', flipCard);
30        return card;
31    }
32
33    function flipCard() {
34        if (isProcessing || 
35            this.classList.contains('flipped') || 
36            flippedCards.length === 2) return;
37
38        this.classList.add('flipped');
39        flippedCards.push(this);
40
41        if (flippedCards.length === 2) {
42            isProcessing = true;
43            moves++;
44            movesDisplay.textContent = moves;
45            checkForMatch();
46        }
47    }
48
49    function checkForMatch() {
50        const [card1, card2] = flippedCards;
51        const match = card1.dataset.symbol === card2.dataset.symbol;
52
53        if (match) {
54            card1.classList.add('matched');
55            card2.classList.add('matched');
56            matchedPairs++;
57            if (matchedPairs === symbols.length) {
58                setTimeout(() => alert(`Congratulations! You won in ${moves} moves!`), 500);
59            }
60        } else {
61            setTimeout(() => {
62                card1.classList.remove('flipped');
63                card2.classList.remove('flipped');
64            }, 1000);
65        }
66
67        flippedCards = [];
68        setTimeout(() => {
69            isProcessing = false;
70        }, 1000);
71    }
72
73    function initGame() {
74        gameBoard.innerHTML = '';
75        matchedPairs = 0;
76        moves = 0;
77        movesDisplay.textContent = moves;
78        
79        shuffle(cards).forEach(symbol => {
80            gameBoard.appendChild(createCard(symbol));
81        });
82    }
83
84    restartButton.addEventListener('click', initGame);
85    initGame();
86});

주요 특징

반응형 그리드 레이아웃
카드 플립 애니메이션
매치 체킹 로직
무브 카운터
재시작 기능
승리 상태 감지

가능한 개선 사항

타이머 구현
난이도 수준
테마 선택
사운드 이펙트
점수 추적 시스템

문제 해결 가이드

카드 플립 문제: CSS 변환 속성 확인
매칭 문제: 심볼 비교 로직 확인
레이아웃 문제: 그리드 설정 조정

결론

이 구현은 코드 가독성과 확장성을 유지하면서 메모리 매치 게임을 위한 견고한 기반을 제공합니다.모듈식 구조를 통해 쉽게 추가하고 수정하여 게임플레이 기능을 향상시킬 수 있습니다.

닌자의 AI 어시스턴트를 경험하세요

지금 무료로 사용해 보십시오.요금제는 월 19달러부터 시작합니다.

무료로 사용해보기 플랜 보기