첫 개인 프로젝트 - Black Jack (블랙잭 게임 JS 구현)

이번에 학교 텀프로젝트 겸 개인 프로젝트를 처음으로 진행해서 만들어 보았다.

https://github.com/ssigner/Black_Jack

GitHub - ssigner/Black_Jack

HTML, CSS, Java Script 를 사용해서 만들었으며, 카지노에 가면 흔히 있는 게임인 블랙잭을 토대로 간단하게 만들었다.

깃헙 페이지를 이용해서, 정적 사이트의 웹페이지 배포도 해보았다.

https://ssigner.github.io/Black_Jack/

BLACK JACK

첫 뷰

처음 뷰는 이렇게 되어 있으며, RULE 텍스트 클릭시, 룰 북이 나온다. firstView() 함수를 생성해서, 처음 웹페이지 시작시 뷰가 나오도록 해줬다.

BET! 버튼을 눌렀을 때

가진 칩 개수만큼 베팅 입력창에 입력하고 BET! 버튼을 누르면, PLAY 버튼이 활성화 되고, BETTING 텍스트로 자신이 얼마나 베팅을 했는지 알려준다.

PLAY 버튼 클릭

PLAY 버튼 클릭시, HIT 과 STAY 버튼이 활성화 되고, 첫 패가 공개가 된다. 규칙상 딜러의 카드는 한 장만 공개하고, 플레이어는 딜러의 카드를 보고 HIT 버튼을 누를지, STAY 버튼을 누를지 결정이 가능하다.

HIT 버튼 클릭

HIT 버튼 클릭시, 플레이어는 카드를 한장 더 받는다. 카드 컨테이너는 CSS의 flex-inline 속성으로 구현하였다. 카드가 나타나는 이미지도, CSS의 opacitiy 속성을 이용해서, 페이드인 애니메이션을 2초 주었다.

STAY버튼 클릭

STAY 버튼 클릭 시, 딜러의 히든 카드가 공개되며, 딜러의 점수가 17이상이 아니면, setTimeout() 함수를 재귀를 사용해서 2.5초마다 카드를 한 장씩 받도록 해주었다.

 

decision(파라미터) 함수를 이용해서, 만약 딜러가 이겼으면 배팅에 건 칩이 사라지고, 플레이어가 이기면 배팅에 건 칩의 2배만큼 받아서 칩에 반영이 된다. 비기면 배팅에 건 칩을 그대로 다시 받는다. 그리고 Black Jack 텍스트 밑에 결과가 텍스트로 나타난다. 그리고 next_game 컨테이너가 display: "block" 속성을 갖게 된다.

만약 가진 칩을 다 잃었으면, AGAIN? 버튼이 활성화 되지 않고, 칩이 남아있으면 AGAIN? 버튼이 활성화 된다. 

AGAIN? 버튼을 누르게 되면, 게임이 다시 시작 되고, 번 칩 수 만큼 다시 배팅을 할 수 있게 된다. STOP 버튼을 누르면, 지금 가진 칩이 high score에 반영되고, 브라우저의 로컬 스토리지에 반영이 된다.

로컬 스토리지에 반영된 모습

high score는 웹페이지를 처음 시작할때, 브라우저에서 로컬 스토리지에 highScore란 키가 있으면 그 안의 값을 가져와서 document에 반영해 주는 함수를 사용했고, highScore란 키에 값이 없으면 ( 이러면 null값이 나온다 ) highScore란 키랑 값에 0을 넣어준다.

이렇게 지금까지 첫 개인 프로젝트를 소개했고, 프로젝트를 진행하면서 느꼈던 좋았던 점과 아쉬운 점을 쓰려고 한다.

 

좋았던 점

• 첫 완성 개인 프로젝트
• 첫 깃헙 커밋 기록
• flex 속성을 스스로 공부해서 이용해 볼 수 있던 좋은 기회
• 각 버튼마다 함수를 지정해서 구현
• 페이즈를 나눠서, 각 페이즈마다 어떻게 설계를 해야 할지, 고민해 볼 수 있었던 기회
• 카드 저장소를 js파일을 나눠서 export 했던건 좋았음
• 프로젝트를 하면서, git을 잘 이해하게 되었음

아쉬운 점

• 클래스를 사용한 MVC 모델의 부재 - 다음 프로젝트는 강의내용 바탕으로 해 볼 예정
• 가끔씩 웹페이지에 반응이 없고 멈추는 일이 생김 -> 해결, cardsCheck이 true로 가득차서 while문이 계속 도는것이 원인. 게임이 끝날때마다 cardsCheck배열 초기화로 해결
• queryselector을 사용하여 Class를 이용해서 document전체에서 찾는게 아닌, queryselector를 이용해 찾은 element 내부에서만 document 조작을 했으면 좋지 않았을까
• document.getElementById.innerHTML 을 이용한 내부 html접근 방식이 아니라, MVC 모델이용해 뷰를 나누고 각 뷰를 관리하는 컨트롤러를 사용했으면 더 좋지 않았을까 - 이것 또한 클래스의 이용 부재