React에서 심볼 매칭 게임 만들기

이 게시물은 무엇에 관한 것입니까?

안녕하세요 휴머노이드 여러분. 오늘 우리는 React Js에서 기본 Symbol 매칭 게임을 구현하려고 노력할 것입니다. 이 게시물은 필요한 최소한의 논리보다는 스타일링에 중점을 두지 않습니다.

여기에서 앱을 확인하세요: Symbol Matching Game

콘텐츠

규칙

새 게임 시작

게임 재설정

게임 로직 구축

각각에 대해 자세히 살펴보고 구현 방법을 살펴보겠습니다.

규칙

일치를 위해 동일한 기호가 있는 타일 2개를 선택합니다

.

타일이 동일하지 않으면 숨겨집니다

.

모든 기호가 일치하면 게임이 완료됩니다

.

새 게임 시작

새 게임이 시작되자마자 우리는 게임에서 사용될 기호에 대한 임의의 시퀀스를 생성해야 합니다. 이 게임을 구축하기 위해 우리는 4개의 기호와 8개의 타일을 고려하고 있습니다. 즉, 동일한 기호의 2개 타일을 일치시킵니다. 고려하는 기호 : @, #, $, %

각 타일에는 필요한 기능을 구현하기 위한 특정 매개변수, 즉 상태가 있어야 합니다.

Tile state = {
  id,
  value, 
  isOpened, 
  isMatched
}

무작위 시퀀스를 생성하기 위해 아래 논리를 사용합니다.

const SYMBOLS = ["@", "#", "$", "%"];
const l = [...SYMBOLS, ...SYMBOLS];
l.sort(function (a, b) {
      return 0.5 - Math.random();
});

여기서 l은 게임에 사용되는 보드를 나타내는 데 사용되는 배열입니다.

게임 재설정

재설정 기능을 구현하려면 게임 상태를 재설정해야 합니다. 재설정해야 하는 상태는 다음과 같습니다.

새 보드 생성

열린 활성 타일을 빈 목록으로 재설정

카운트를 0으로 재설정

게임 로직 구축

2개의 타일이 같으면 일치하고 2개의 타일이 다르면 타일을 재설정합니다.

두 번째 타일이 열리자마자 일치하는 타일을 계산합니다. 열린 타일이 같으면 일치하지 않으면 열린 타일을 닫습니다.

이벤트 : 타일 클릭 시

const onBoardItemClick = (id) => {
    setActiveOpeningItems((openedItems) => [...openedItems, id]);
    setBoard((b) =>
      b.map((_i) => {
        if (_i.id === id) {
          return {
            ..._i,
            isOpened: true,
          };
        }
        return _i;
      })
    );
  };

수행된 작업:

열려 있는 활성 항목에 현재 타일을 추가합니다

.

클릭한 타일에 대해 isOpened 상태를 true로 설정합니다

.

이벤트 : 매칭 로직

useEffect(() => {
    if (activeOpenedItems.length === 2) { // trigger matching logic when there are 2 active opened tiles
      const fn = () => {
        const item1 = board.find(({ id }) => id === activeOpenedItems[0]);
        const item2 = board.find(({ id }) => id === activeOpenedItems[1]);
        const isMatch = item1.value === item2.value;
        if (isMatch) {
          setBoard((board) =>
            board.map((item) => {
              if (item.id === item1.id || item.id === item2.id) {
                return {
                  ...item,
                  isMatched: true,
                };
              }
              return item;
            })
          );
        } else {
          setBoard((board) =>
            board.map((item) => {
              if (item.id === item1.id || item.id === item2.id) {
                return {
                  ...item,
                  isOpened: false,
                };
              }
              return item;
            })
          );
        }
        setActiveOpeningItems([]); // Reset active opened after matching operations are completed
      };
      setTimeout(fn, 1500); // To provide a delay is selection for user experience 
    }
  }, [activeOpenedItems, board]);

수행된 작업:

일치하는 타일: 열려 있는 활성 타일에 대해 isMatched 상태를 true로 설정합니다

.

타일이 일치하지 않음: 열린 활성 타일에 대해 isOpened 상태를 false로 설정

열린 활성 타일을 빈 목록으로 재설정

setTimeout에서 일치하는 코드를 실행하여 게임의 사용자 경험에 대한 지연을 제공합니다

.

걸은 걸음 수를 센다

이 기능을 구현하기 위해 우리는 모든 타이틀 클릭에 대한 카운트를 증가시킵니다.

onBoardClick={() => {
                onBoardItemClick(b.id);
                setClicks((c) => c + 1); // Increment count on click
 }}

모든 타일이 일치하면 게임 완료

게임이 끝났는지 확인하려면 보드의 모든 타일이 일치하는지 계산해야 합니다.

const finished =
    board.length > 0 &&
    board.filter((b) => b.isMatched).length === board.length;

결론

이 게임을 구현하면 원하는 논리를 구현하기 위해 React에서 상태 및 부작용을 사용하는 방법을 배울 수 있습니다. 이 앱은 실제 응용 프로그램에 사용되는 새로운 구성 요소 학습의 일부로 만들어졌습니다.
안전을 유지하고 다른 사람에게 손을 빌려주세요 :)

Symbol matching game

Project Source

Vignesh Iyer