[게임] 매직 메모리 게임 2

 

 

back이미지를 클릭했을 경우 

card의 정보를 출력하게끔 만듬

 

 

 

 

테스트 해보기 

 

 

 

카드 두 개를 선택 시 같은 카드를 클릭하면 맞췄습니다. 

다른 카드를 클릭하면 틀렸습니다. 출력하기

 

 

 

 

function App() {
  // 카드와 턴수 useState 만들기
  // useState 사용
  const [cards, setCards] = useState([]); //카드는 배열로 시작함
  const [turns, setTurns] = useState(0);
  const [choiceOne, setChoiceOne] = useState(null); //첫 번째 카드 선택
  const [choiceTwo, setChoiceTwo] = useState(null); //두 번째 카드 선택

  const shuffleCards = () => {
    //카드 섞기
    const shuffledCards = [...cardImages, ...cardImages]
      .sort(() => Math.random() - 0.5)
      .map((card) => ({ ...card, id: Math.random() }));

    setCards(shuffledCards); //섞은 카드를 저장
    setTurns(0); // 턴 수를 0으로
  };

  //카드 선택 시 기억하기
  function handleChoice(card) {
    //console.log(cards, turns);
    //첫 번째 카드를 선택했으면, 두 번째 카드에 넣고 없으면 첫 번째에 입력하기
    choiceOne ? setChoiceTwo(card) : setChoiceOne(card);
  }

  return (
    <div className="App">
      <h1>Magic Match</h1>
      <button onClick={shuffleCards}>New Game</button>
      <></>
      <div className="card-grid">
        {cards.map((card) => (
          <SingleCard card={card} handleChoice={handleChoice} key={card.id} />
        ))}
      </div>
    </div>
  );
}

 

 

 

SingleCard.jsx

import "./SingleCard.css";
import React from "react";

const SingleCard = ({ card, handleChoice }) => {
  function handleClick() {
    handleChoice(card);
  }
  return (
    <div className="card">
      <div>
        <img className="front" src={card.src} alt="card front"></img>
        <img
          onClick={handleClick}
          className="back"
          src="/img/cover.png"
          alt="card back"
        ></img>
      </div>
    </div>
  );
};

export default SingleCard;

 

 

app.js에 카드 선택 시 비교할 수 있게 useEffect 사용

 

  //선택들을 비교하기 (useEffect)
  useEffect(() => {
    if (choiceOne && choiceTwo) {
      if (choiceOne.src === choiceTwo.src) {
        console.log("카드를 맞췄습니다!");
        resetTrun();
      } else {
        console.log("틀렸습니다!");
        resetTrun();
      }
    }
  }, [choiceOne, choiceTwo]);


  //맞추거나 틀렸을 때 선택들을 모두 초기화 (턴 수는 증가함)
  const resetTrun = () => {
    setChoiceOne(null);
    setChoiceTwo(null);
    setTurns((prev) => prev + 1);
  };

 

 

 

 

 

 

테스트하기

 

 

 

 

 

 

 

matched 추가 매치했을때 체크하기

 

 

 

  //선택들을 비교하기 (useEffect)
  useEffect(() => {
    if (choiceOne && choiceTwo) {
      if (choiceOne.src === choiceTwo.src) {
        //같은 이미지의 카드들만 matched를 true로 업데이트된다. 
        setCards((prevCards) => {
          return prevCards.map((card) => {
            if (card.src === choiceOne.src) {
              return { ...card, matched: true };
            } else {
              return card;
            }
          });
        });
        resetTrun();
      } else {
        console.log("틀렸습니다!");
        resetTrun();
      }
    }
  }, [choiceOne, choiceTwo]);

 

 

 

 

맞추기 전에는 현재 matched가 false로 되어있다( 기본값) 

 

 

 

같은 그림 ( 검) 을 선택해본다

 

 

2번 6번 을 보면 true로 바뀐것을 확인 할 수 있다. 

 

 

 

추가적으로 같은 그림을 클릭했을 때도 해당 카드들이 true로 변경되는것을 확인 가능하다.