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

https://blog.naver.com/drv983/222860183874

🎪 매직 메모리 게임

 

 

 

압축 풀고 vsCode로 열기

 

 

 

 

 

 

 

 

node_modules를 삭제하면 용량이 많이 줄어듬 

깃허브에서 다운로드 받아서 실행하고자 할 때

삭제한 다음에 npm install을 하여 node_modules를 만들 수 있음

 

 

 

npm start를 통하여 실행해 준다

 

 

 

 

 

파일 정리하기 

 

 

 

App.js

 

 

 

function App() {
  // 카드와 턴수 useState 만들기
  // useState 사용
  const [cards, setCards] = useState([]); //카드는 배열로 시작함
  const [turns, setTurns] = useState(0);

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

    setCards(shuffledCards); //섞은 카드를 저장
    setTurns(0); // 턴 수를 0으로
  };
  console.log(cards, turns);
  return (
    <div className="App">
      <h1>Magic Match</h1>
      <button onClick={shuffleCards}>New Game</button>
    </div>
  );
}

 

카드배열을 두 번 넣음 (위의 카드 이미지 6개)

순서를 랜덤으로 섞음 

 

map은 리턴을 하는데, 위에서 랜덤을 섞은 카드와 아이디를 랜덤으로만들어서 리턴한다. 

 

 

 

 

 

 

콘솔에서 확인하기 

 

 

화면에 표시하기 

map으로 화면 표시할 때는 ket값이 있어야 waring이 안뜸 

그래서 key값 추가 

 

 

 

 

 

App.css

grid를 사용함

 

 

 

4등분

 

 

 

 

만약 3등분 하고 싶으면?

 

열과 열사이의 간격

 

 

 

 

 

 

 

App 에서 클래스 card 부분을 분리하여 css 적용하자.

 

SingleCard.css

.card {
  position: relative;
}
.card img {
  width: 100%;
  display: block;
  border: 2px solid #fff;
  border-radius: 6px;
}

 

 

 

 

 

 

 

css impot하기 

 

 

 App.js 파일에서 만들었던 것 잘라내기해서 넣음

 

 

props중에 card만 필요하니까 

중괄호{} 를 사용해서 card만 받아올 수 있음 

그리고 props.card.src 대신에 card.src로 바꿔서 사용이 가능하다.

 

 

 

 

 

 App.js

 

 

 

 

 

 

 

 

---

참고하기 

https://cpro95.tistory.com/504

자바스크립트 배열 셔플 무작위 섞는 방법 javascript array shuffle