𝗠𝗘𝗥𝗡 𝗦𝘁𝗮𝗰𝗸 학습 𝟯𝟮일 차

오늘은 뱀과 사다리 게임을 만들었습니다.

HTML5, CSS3, 그리고 Vanilla JavaScript를 사용했습니다.

어제는 가위바위보 게임을 만들었습니다. 오늘은 더 큰 도전을 해보고 싶었습니다. 100개의 셀로 이루어진 그리드 위에서 위치를 추적해야 했습니다.

두 가지 주요 기술적 영역에 집중했습니다:

  1. 그리드 생성 100개의 HTML div를 일일이 작성하지 않았습니다. 루프를 사용하여 프로그래밍 방식으로 그리드를 생성했습니다. CSS Grid를 사용하여 10x10 레이아웃을 만들었습니다.

  2. 게임 로직 뱀과 사다리를 처리하기 위해 긴 if-else 문을 사용하는 것을 피했습니다. 대신 JavaScript 객체를 사용하여 이동 경로를 매핑했습니다. 덕분에 코드가 깔끔해졌습니다.

이 객체는 시작 타일을 목적지 타일로 매핑합니다:

로직 예시:

const gameModifications = {
    4: 14, 9: 31, 21: 42, 28: 84, 51: 67, 72: 91, 80: 99,
    17: 7, 54: 34, 62: 19, 64: 60, 87: 36, 93: 73, 95: 75, 98: 79
};

이 프로젝트를 통해 게임에서 상태(state)와 좌표(coordinates)를 관리하는 방법을 배웠습니다.

출처: https://dev.to/ali_hamza_589ec7b3eb6688d/day-32-of-learning-mern-stack-15o1