지뢰 찾기
지뢰 찾기... 네, 그 옛날 Windows '95에서 플레이했던 것을 기억하는 그 오래된 고전 게임입니다(사실 Windows 8까지 Microsoft의 소프트웨어 업데이트에서 구현되었습니다). 지뢰 찾기는 1960년대와 1970년대의 초기 메인프레임 게임에서 유래되었습니다. 지뢰 찾기의 초기 조상은 Jerimac Ratliff의 큐브였습니다. 기본 게임플레이 스타일은 1980년대 퍼즐 게임 장르의 인기 부분이 되었습니다.
여기에서 지뢰찾기 기록을 살펴보세요.
실제 지뢰찾기가 무엇인지 아시나요? 나도 이 글을 읽기 전까지는 그러지 않았다.
90년대에 컴퓨터를 처음 접했을 때 이 게임을 많이 했던 기억이 나네요. 그래서 본격적으로 돌아가기 위해서는 이보다 더 좋은 게임이 무엇일까 생각했습니다.
내 버전
시작하기
여기에서 게임을 즐겨보세요!
기본 게임플레이
- 난이도를 선택하세요.
- 쉬움 = 9x9, 지뢰 10개
- 중형 = 16x16, 지뢰 40개
- 어려움 = 30x30, 광산 160개
- 타이머를 시작하고 시작하려면 보드의 아무 곳이나 클릭하세요. *숫자는 특정 셀에 인접한 지뢰 수를 나타냅니다.
- 지뢰라고 생각되면 "Shift + 클릭"을 사용하여 셀에 플래그를 추가하세요.
승/패
- 지뢰에 부딪히면... 게임이 끝나요, 친구.
- 지뢰가 없는 세포를 모두 찾아 승리하세요!
(알아... 내... 스위퍼...?)
사용된 기술
좋은 세 명의 친구:
HTML
소스 코드에서 볼 수 있듯이 대부분의 작업이 JavaScript에서 발생하므로 HTML은 매우 간결합니다. 말할 것도 없이 게임판 자체는 단순한 테이블일 뿐입니다.
CSS
나는 이것을 Windows '95 데스크톱 보기의 이전 모습에 맞게 스타일링하는 데 많은 재미를 느꼈습니다. 나는 여전히 완벽하게 만들기 위해 약간의 문제를 해결하고 싶습니다(MS에서 사용하는 정확한 글꼴을 찾을 수 없습니다).
CSS를 사용하면서 가장 어려웠던 점은 테이블 스타일(테두리, td 크기 등)을 파악하는 것이었습니다.
자바스크립트
JavaScript를 사용하여 작동하는 웹 앱을 작성하는 것은 이번이 처음이었기 때문에 이 섹션이 나에게 프로젝트의 가장 큰 도전이었다는 것은 그다지 놀라운 일이 아닙니다.
다음은 몇 가지 주요 내용입니다.
- 난이도를 클릭할 때 테이블 크기를 동적으로 조정
- 나는 (물론 Jim의 도움으로) 테이블의 ID에서 숫자를 분석하여 기본적으로 가져온 숫자에 따라 행/열을 추가하는 ${size} 변수로 변환하는 함수를 만들었습니다. 이 개념이 내 마음을 사로잡았습니다.
- 차례로 시각적 테이블과 일치하는 배열 배열을 동적으로 생성합니다.
- row#, col#, Bomb t/f, # of 인접 폭탄(그 자체로 또 다른 과제, btw)에 수많은 속성을 할당한 개별 "셀 개체"를 만드는 데 사용한 "Cell" 클래스 만들기 , t/f를 공개하고 t/f를 표시했습니다.
- 이 접근 방식을 사용하면 더욱 간결한 코드를 작성하고 반복해서 반복하지 않고 모든 셀 개체에 대해 실행되는 클래스의 메서드를 만드는 것이 훨씬 쉬워졌습니다.
- 경과된 초를 표시하는 기능적 타이머를 만듭니다.
- 배열에 폭탄을 무작위로 배치합니다.
- DOM의 모든 것을 렌더링합니다.
- 클릭 핸들러를 다양한 이벤트에 할당합니다.
- 승/패 논리 만들기
- 기능이 모두 동기식으로 연결되는 제어 흐름을 파악합니다.
- 재귀 에 대해 배우고 그러한 효과를 생성하는 함수를 올바르게 작성하는 방법을 배웁니다.
내 디자인 선택
나는 OG Windows '95 모양을 사용하기로 결정했습니다. 나는 "모방. 동화. 혁신"을 굳게 믿습니다. 학습 모델이므로 첫 번째 프로젝트에서는 학습 과정의 모방 단계를 실행하고 시작하기 전에 걸어야 한다고 생각했습니다.
이 길을 선택하게 되어 매우 기쁩니다. 단순히 원래 게임의 스타일을 맞추려고 노력하면서 많은 것을 배웠기 때문입니다.
그렇게 말하면서, 나는 언젠가 곧 이것의 현대화된 버전을 만들 예정입니다.
다음 단계!
이 프로젝트는 저에게 정말 즐거웠습니다. 나는 그것을 계속해서 개선하고 앞으로 몇 년 동안 배운 많은 교훈을 다시 언급할 계획입니다.
- 앞서 언급한 것처럼 CSS를 현대적이고 깔끔하고 단순하며 미니멀한 UI로 전환하는 "디스플레이 토글"을 만들고 싶습니다.
- 보드가 완전히 드러났을 때 셀 너비/높이가 몇 픽셀씩 조정되는 것과 같이 머리를 잡아당기게 만드는 어리석고 작은 미학적 버그가 있습니다. 그걸 고쳐야 해요.
- 또한 Windows '95에 좀 더 구체화하여 시작 버튼에 기능을 추가하고 오른쪽 하단에 시계를 추가하고 일부 기능적인 바탕 화면 아이콘을 추가하고 싶습니다.
- 제가 정말 다루고 싶은 어려운 기능은 사용자가 숫자(행/열/광산 번호)를 입력하여 난이도를 선택할 수 있는 기능을 만드는 것입니다.
비오는 날이겠죠.
읽어주셔서 감사합니다! 게임을 즐겨보시길 바랍니다 :)
