JavaScript 입문 : 지뢰찾기 게임 - 기본적 HTML / CSS 만들기, 지뢰를 심기위한 랜덤숫자 뽑기

본격적인 지뢰심기 게임을 만들어 보도록 하겠습니다. 1차적 결과는 다음과 같이 나오도록 할 예정입니다. 

 

 

잠깐 그림에 대해 설명드리면 처음에는 가로 10칸, 세로 10칸인 2차원 배열을 만들고 그 중에서 지뢰를 10개 랜덤하게 만들고자 합니다. 지금은 편의상 지뢰를 'X'로 표시하고 우측 클릭에서 물음표와 깃발을 각각 '?'와 '!'로 표시할 예정입니다. 향후 전체코드가 완료되었을때는 지뢰 그림과 깃발 등 조금 더 데코레이션 하는 방향으로 할 예정입니다. 

 

본 코딩은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다. 

 

1. 기본적인 HTML / CSS 만들기 

 

역시 기본틀이 되는 HTML과 CSS를 고민해야 하는데요. 10 X 10 바둑판 배열은 2차원 배열이라고 보면 되겠습니다. 2차원 배열은 자바스크립트에서 이중반목문으로 만들 수 있고요. 

 

HTML상에서는 다음과 같이 몇초가 걸리는지 확인하는 타임테이블 <div>태그와 테이블 그리고 결과가 나오는 <div>태그가 필요합니다. 

 

 

스타일시트에서는 테이블을 구성하는 기본테이블을 나타낼 예정인데 이런 테이블 문제에서는 각각의 칸을 나타내는 곳이 target이 되고 그 역할을 테이블 구조상 <td> 태그에서 담당하는 것은 잘 알고 있을겁니다. 

 

클래스를 이용하여 전체 바둑판의 색은 진한 회색으로 열린칸은 흰색으로 깃발 색은 빨간색 마지막으로 물음표의 색상은 오렌지색으로 지정을 하도록 하겠습니다. 

 

 

상기와 같은 기본 HTML과 CSS를 먼저 만들고 자바스크립트를 통해 게임을 만들도록 하겠습니다. 

 

2. 랜덤하게 지뢰심기

 

랜덤하게 지뢰를 심는다는 것은 다음 순서로 고민할 수 있을 것 같습니다. 

 

① 게임의 편의를 위해 시작되는 가로, 세로, 지뢰의 수를 고정

② 지뢰찾기 게임에 등장하는 각종 성황들을 나타낼 수 있는 객체 고민 

③ 초반에 모을 수 있는 변수를 모으고 지뢰찾기 순서를 자바스크립트에서 고민

④ 랜덤하게 지뢰를 나열

 

상기 순서에 대해 순서도상 기본시작편이라고 볼 수 있겠습니다. 

 

자바스크립트로 HTML 태그를 활성화시키고 나서 가로 세로 지뢰의 수를 지정해 주는데 편의상 각각 10이라고 하고 세탕을 진행하도록 하겠습니다. 

 

 

초반 작업중 어려운 부분인데 지뢰찾기 상황에 따라 코드를 만들어서 대입해야 합니다. 우선 나올 수 있는 상황들을 정리해 보면 지뢰, 깃발, 물음표, 닫혀있는 상황, 열린상황 등이 있을 것으로 예측이 되네요. 그런데 강좌를 보고나니 깃발과 물음표는 다시 지뢰가 있는 경우와 없는 경우로 나뉠 수 있을 것 같습니다.

 

이러한 가정들을 하나의 코드숫자로 표현을 해 두면 향후 프로그래밍할 경우 유용하게 사용이 됩니다. 

 

그런데 이런 가정들을 생각한다는 것은 어렵습니다. 우선 다음과 같이 닫힌칸(지뢰 유무)과 열린칸 그리고 지뢰에 대한 코드 숫자를 만들어 놓고 시작하겠습니다. 코드 숫자를 만든다는 것은 숫자를 대입하여 좀 더 원활하게 프로그래밍하는 목적도 있습니다. 

 

다음과 같이 작성을 하는데 숫자는 편의상 구분을 위해 만든 숫자로 이해하면 됩니다. 향후 구분을 하기 쉽게 대문자로 해 보도록 하겠습니다. 

 

 

상기 코드숫자에서 OPENED를 0으로 하는편이 편하더군요. 나머지 숫자는 임의의 숫자입니다. 강좌에서 나온 숫자가 그래도 이해하기가 편해서 따라했습니다. 

 

그리고 다음과 같이 향후 사용될 변수를 넣을 위치를 마련해 주면 좋을 듯 합니다. 

 

 

지뢰찾기 게임의 큰 순서를 고민해야 하는데 다음과 같이 생각할 수 있을 듯 합니다. 

 

 

상기 그림을 보면 가장 기본적인 뼈대가 되는 구조입니다. 즉, 게임을 시작하는데 있어 필요한 함수들을 만들어 가는 과정으로 보면 될 듯 합니다. 

 

가능한 모든 프로그램에서 게임이 시작이 되는데 랜덤하게 지뢰를 형성하고 대기 상태로 있어야 우클릭을 하던 좌클릭을 하던 진행할 수 있기 때문입니다. 지뢰를 심는 함수인 plantMine(  )부터 작성을 하면 됩니다. 

 

그 중에서 오늘은 지뢰가 연결되기 위한 랜덤숫자를 만들어 보는 것으로 하겠습니다. 이는 로또공을 뽑거나 카드뒤집기 게임에서 랜덤하게 숫자를 뽑는 원리와 같습니다. 전체를 랜덤하게 섞고 그 중 원하는 숫자만큼 빈 배열에 넣도록 하겠습니다. 여기서 사용되는 방식은 Fisher-Yates Shuffle입니다. 

 

 

제대로 뽑혔는지 console.log(  ) 함수를 사용해 보았습니다. 콘솔에는 다음과 같이 찍히겠죠. 

 

 

상기 내용을 보면 처음에는 100개의 인덱스가 뽑혔고 그 후 랜덤하게 10개를 뽑은 것을 볼 수 있습니다. 마지막에 console.log(candidate)를 확인하면 90개가 남겠죠. 

 

관련된 랜덤 추출은 반드시 이해하기까지 공부를 해야합니다. 

 

다음시간에는 하나하나 코드를 만들어가면서 새롭게 배우는 논리적 사고방식에 대해서도 알아 보겠습니다. 

 

2022.03.29 - [컴퓨터 알아가기/JavaScript] - JavaScript 입문 : 숫자 야구 게임 - 무작위(랜덤) 숫자 만들기

JavaScript 입문 : 숫자 야구 게임 - 무작위(랜덤) 숫자 만들기

2022.03.29 - [컴퓨터 알아가기/JavaScript] - JavaScript 입문 : 숫자 야구 게임 - 무작위(랜덤) 숫자 만들기

JavaScript 입문 : 숫자 야구 게임 - 무작위(랜덤) 숫자 만들기