자바스크립트로 간단한 숫자 맞추기 게임을 만들어보자

 

 안녕하세요. 진득 코딩입니다.

 

 그동안 자바스크립트의 기본적인 문법에 대해 알아보았습니다.

 

 이번 시간에는 본격적으로 이러한 문법들을 이용하여 간단한 게임을 만들어보도록 하겠습니다.

 

게임 구상하기

 

 

 시작부터 무작정 코딩을 시작하는 것보다는 만들 게임을 구상해 보고 프로그래밍을 하도록 하겠습니다.

 

 규모가 큰 대형 프로젝트라면 설계부터 하나하나 하는 것이 좋지만 간단한 게임이기 때문에 약식으로 이렇게 적고 넘어가도록 하겠습니다.

 

 전체적으로 랜덤 번호를 받아서 해당 랜덤 번호를 맞추는 게임입니다.

 

 유저가 숫자를 추측한 값이 더 크다면 UP!!이라고 알려주고 작다면 DOWN!!, 맞췄다면 맞췄다고 알려주는 기능을 만들도록 하겠습니다.

 

 그리고 리셋을 하게 되면 게임이 처음부터 다시 시작되며 기회는 일단 3회로 지정해 두고 횟수를 지정할 수 있도록 기능을 추가하면 좋을 것 같습니다.

 

 만약 유저가 1~100 범위 밖의 숫자를 입력하거나 이미 입력한 숫자를 또 입력하면 알려주고 기회를 깎지 않는 기능도 추가해 보도록 하겠습니다.

 

index.html 기본 로직

 

 

 일단 기본적인 로직을 만들었을 때의 html을 살펴보도록 하겠습니다.

 

 body에는 결과가 나오는 공간과 랜덤 번호가 나오는 공간이 있습니다.

 

 또한 숫자를 입력받는 <input> 태그도 보이고 게임을 실행하는 버튼도 있습니다.

 

 해당 html과 js 파일을 연결해주는 <script> 태그도 살펴볼 수 있습니다.

 

main.js 기본 로직

 

 

 main.js 기본 로직을 살펴보도록 하겠습니다.

 

 우선 위에는 index.html에서 받아온 데이터들을 선언한 변수에 넣어주었습니다.

 

 그리고 goButton을 눌렀을 때의 이벤트를 만들어 주었습니다.

 

 pickRandomNum() 함수는 랜덤 번호를 생성하여 랜덤 번호를 출력해 주는 기능을 가지고 있습니다.

 

 play() 함수는 play를 눌렀을 때 랜덤 번호와 유저 번호를 비교하고 해당 결과를 출력해 주는 기능을 가지고 있습니다.

 

 

 기본적인 로직만 넣은 상태에서의 시연 영상입니다.

 

 로직만 넣은 상태여서 굉장히 허접하지만 이 상태에서 구현했던 로직들을 잘 돌아가는 것을 확인할 수있습니다.

 

index.html 기능 추가

 

 

 기본 로직에서 추가 기능 및 UI/UX 업그레이드를 위해 기능을 추가했습니다.

 

 이때 생기게 될 index.html의 변화에 대해 살펴보도록 하겠습니다.

 

 우선 기회 설정하는 <input> 태그와 <button> 태그, 이를 설명해 줄 라벨이 추가되었습니다.

 

 또한 남은 기회를 출력해 줄 <div> 태그와 reset을 위한 <button> 태그가 추가되었습니다.

 

 마지막으로 랜덤 번호를 보여줬다가 안 보여줬다 할 수 있는 랜덤 번호 보기 <button> 태그가 추가되었습니다.

 

main.js 기능 추가

 

 

 기능만 생각했을 때는 간단한 로직들이 추가되었지만 main.js는 많이 복잡해졌다고 보일 수 있습니다.

 

 하지만 하나하나 살펴보면 크게 어려운 부분은 없기 때문에 하나하나 살펴보도록 하겠습니다.

 

 우선 선언과 listener 부분을 살펴보도록 하겠습니다.

 

 우선 게임 종료와 게임 시작 시 남은 기회 버튼을 비활성화를 위한 boolean 변수가 추가되었습니다.

 

 또한 남은 기회를 알려주기 위한 변수가 추가되었습니다.

 

 새로 생긴 리셋 버튼, 랜덤 번호 버튼, 기회 수 설정 버튼을 index.html에서 가져와서 JS 변수로 선언해 두었습니다.

 

 또한 기회 횟수를 설정하는 input 창이 추가되었습니다.

 

 남은 기회를 알려주는 chanceArea를 추가해 주었고  그동안 입력했던 숫자를 출력해 주는 historyArea를 추가해 주었습니다.

 

 또한 유저가 그동안 입력한 숫자들을 담기 위한 배열도 추가되었습니다.

 

 또한 listener은 reset 버튼을 눌렀을 때, 랜덤 버튼을 눌렀을 때, setChanceButton을 눌렀을 때의 이벤트를 추가해 주었습니다.

 

 처음 웹페이지가 실행되었을 때 출력되는 남은 기회가 chances 값으로 입력 필드를 초기화해주었습니다.

 

 input 박스에 초점이 맞춰지면 초기화되는 함수는 간단한 함수이기도 하고 따로 재사용하지 않는다고 판단하여 익명 함수로 사용하였습니다.

 

 

 게임 시작 시 자동으로 실행되는 함수에는 처음부터 랜덤 번호가 보이지 않도록 기본 값을 "?????"으로 설정해 주었습니다.

 

 추가로 남은 기회를 chanceArea에 추가해 주었습니다.

 

 goButton을 눌렀을 때 실행되는 play() 함수는 Number로 한번 형변환 해주어 숫자가 들어오지 않았을 때를 대비해 주었습니다.

 

 또한 게임이 시작되면 기회 횟수를 더 이상 설정하지 못하도록 setChanceButton을 비활성화해주었습니다.

 

 원래 있던 함수는 따로 빼고 if문으로 처리해 주었고 여러 함수들을 추가해 주었습니다.

 

 이제 play() 함수에 있는 여러 함수들을 살펴보도록 하겠습니다.

 

 

 먼저 유저가 사용한 숫자를 중복으로 입력했을 때 알려주는 함수를 추가해 주었습니다.

 

 if문을 사용하여 해당 숫자가 이미 배열에 포함되어 있으면 false를, 포함되어 있지 않으면 배열에 포함시키고 true를 return합니다.

 

 다음 함수는 남은 기회를 보여주는 함수입니다.

 

 위에서 선언한 남은 기회 변수의 수를 1 감소시키고 바뀐 변수를 다시 chanceArea에 출력해 줍니다.

 

 compareValue() 함수는 원래 있던 로직을 그대로 옮겨두고 정답을 맞힌 경우에는 gameOver를 true로 반환합니다.

 

 controlChances() 함수는 남은 기회를 모두 소진하게 되면 go 버튼을 비활성화하여 더 이상 게임을 진행하지 못하게 하는 함수입니다.

 

 마지막으로 그동안 입력했던 숫자를 표시해 주는 showHistory() 함수를 추가해 주었습니다.

 

 

 다음은 새로 추가된 reset 관련 기능 함수에 대해 살펴보도록 하겠습니다.

 

 reset 버튼을 누르게 되면 resetChances 함수가 호출되고 게임을 실행하는 함수가 호출됩니다.

 

 또한 history 배열과 출력 화면을 초기화해 주고 화면에 출력되던 문구들도 원래 문구를 출력하도록 설정해 주었습니다.

 

 resetChances() 함수에는 기회가 3으로 돌아가게 하고 다른 여러 요소들도 처음 상태로 되돌려놓는 함수입니다.

 

 

 다음은 controlRandom 버튼을 눌렀을 때의 함수입니다.

 

 if문을 사용하여 랜덤 번호 보는 버튼과 해당 출력되는 화면을 제어합니다.

 

 다음은 기회 횟수를 입력하는 부분을 제어하는 함수입니다.

 

 먼저 기회수가 1~10까지의 숫자인지 확인할 수 있도록 예외처리를 하고 바뀐 남은 기회를 다른 화면에도 추가해 주도록 함수를 작성해 주었습니다.

 

 checkRange() 함수는 play() 함수가 호출되었을 때 실행되는 함수로 유효 숫자를 입력했는지 확인하는 함수입니다.

 

 가장 밑에는 pickRancdomNum() 함수를 호출하여 게임이 시작되면 기본적인 세팅을 할 수 있게 해주는 역할을 합니다.

 

HTML/CSS 꾸며주기

 

 

 최종 결과물의 파일 구조입니다.

 

 favicon을 위한 assets 폴더와 font가 들어있는 font 폴더, 배경 화면을 넣기 위한 image 폴더를 추가하였습니다.

 

 

 다음으로 html head부분을 살펴보도록 하겠습니다.

 

 head부분을 살펴보면 font를 사용하기 위한 링크, bootstrap을 사용하기 위한 링크, favicon을 사용하기 위한 링크가 추가되었습니다.

 

 

 body부분은 바뀐 게 많아 보이지만 div로 묶어주고 각각의 요소마다 클래스를 추가해 준 것 밖에 없기 때문에 크게 설명할 부분이 없습니다.

 

 

 다음은 css 부분입니다.

 

 해당 포스팅은 자바스크립트 포스팅이기 때문에 자세하게 살펴보지는 않도록 하겠습니다.

 

 배경 화면에 사진을 넣을 때 body에서 정적 파일을 넣어서 설정해 주었습니다.

 

 단위도 vw를 사용하여 상대적인 단위를 사용하였고 각각의 요소에 주로 클래스를 부여하여 스타일을 주었습니다.

 

 

 또한 반응형 웹페이지를 만들기 위해 미디어 쿼리를 이용하여 웹페이지의 크기에 따라 반응하도록 하여 모바일 유저들도 이용할 수 있도록 만들었습니다.

 

 

 html/css를 추가한 화면입니다.

 

 로직만 있을 때보다는 훨씬 봐줄 만한 모습인 것을 확인할 수 있습니다.

 

 해당 웹페이지는 netlify로 배포한 상태이며 접속해서 살펴보고 싶으신 분들은 아래 주소를 통해 접속하실 수 있습니다.

 

https://jinroguessnumber.netlify.app/

GuessNumberGame

 

---

 

 이번 시간에는 지금까지 배운 개념을 바탕으로 미니 프로젝트를 해보았습니다.

 

 자바스크립트만 배웠을 때에 비해 HTML/CSS를 모두 활용한 미니 프로젝트를 해보니 JS와 HTML/CSS와의 상호작용이 어떤 식으로 돌아가는지 알 수 있는 시간이었습니다.

 

 이번 시간은 여기까지입니다.

 

 궁금하신 사항이나 문의하실 사항은 댓글에 남겨주시면 열심히 답변하도록 하겠습니다.

 

 끝까지 봐주셔서 감사합니다.😊