WeCode 9기 사전스터디 과제로 진행된 자기소개 페이지 입니다.
HTML, CSS를 이용해 자기소개 페이지를 만들어보았습니다.
Vanilla JavaScript로 만든 숫자 야구 게임입니다.
숫자 야구는 Bulls and Cows 라고도 불리며, 오래된 컴퓨터 게임입니다. 내기삼아 할 수 있는 게임이자, 초보 프로그래머들이 예제로 많이 제작하는 프로그램이기도 합니다.
출제자는 4자리 수의 숫자를 생각하고, 정답자는 그 숫자를 10번의 기회 안에 맞춰야 합니다.
JS로 만드는 숫자 야구 게임에서는 컴퓨터가 출제자가 됩니다.
출제자는 정답자가 답을 맞추려는 시도를 할 때 마다 힌트를 주어야 합니다.
게임 이름이 숫자 야구인 이유는 힌트를 주는 형식 때문입니다.
- 사용되는 숫자는 1에서 9까지의 중복되지 않는 숫자입니다.
- 숫자는 맞지만 위치가 틀렸을 때는 볼 (이하 B)
- 숫자와 위치가 전부 맞으면 스트라이크 (이하 S)
- 숫자와 위치가 전부 틀리면 아웃
- 물론 무엇이 B이고 S인지는 알려주지 않습니다.
- 3회 이상 아웃이거나, 10번의 정답 기회동안 4S가 나오지 않으면 패배합니다.
- 10번의 정답 기회 안에 4S가 나오면 승리합니다.
예를 들어보겠습니다.
출제자가 임의의 4자리 숫자를 생각했고 이제 정답자가 정답을 외칩니다.
정답자 : 2469 (1S, 1B)
정답자 : 2714 (2S, 1B)
정답자 : 2476 (1S, 2B)
이 경우, 남은 경우의 수는 2743, 2745, 2748 3개 뿐입니다.
이 정답자는 10번의 기회 안에는 정답을 말하겠군요.
- 1~9까지의 서로 다른 숫자를 랜덤하게 추출해서 정답으로 지정
- 정답자가 입력한 숫자에 중복이 있으면 "중복되지 않는 네 자리 숫자를 입력해주세요." 출력하고 횟수 차감 하지말기
- 스트라이크(S)를 체크하여 힌트로 출력
- 볼(B)을 체크하여 힌트로 출력
- 아웃(OUT)을 체크하여 힌트로 출력
- 힌트랑 시도했던 정답은 사라지지 않고, 게임이 끝날때까지 계속 보일 수 있게 => input 창 아래에 log가 계속 남아있도록 추가하기
-
정답자가 제출한 숫자가 4자리인지 체크하고, 4자리 숫자가 아니라면 "4자리 숫자로 입력해주세요." 라는 경고 메세지 출력=> html에서 max,min length를 이용해 구현했음 - 아웃이 3회 이상 나오면 Game Over!
-
사이드바에(상단에 구현함) 남은 기회가 적혀있고, 정답을 입력할때 마다 기회가 1번씩 줄어듬 - 정답 기회 10번 안에 4S가 나오지 않으면 Game Over!! + 정답 알려주기
- 정답 기회 10번 안에 4S가 나오면 Game Homerun!!
- 재시작 버튼 => 클릭하면 페이지 새로고침
- Homerun : "Homerun! 정답 기회 n번 만에 맞추셨군요! 게임을 다시 하고 싶으시면 재시작 버튼을 눌러주세요" 메세지 출력
- Gmae Over : "Game Over! 게임을 다시 하고 싶으시면 재시작 버튼을 눌러주세요" 메세지 출력
- 정답 숫자 박스 => 문제를 맞추는동안은 ?출력, 홈런 혹은 게임오버시 정답 숫자 공개!
- 게임 방법 popup 창으로 안내
- 아무것도 입력 안하거나 문자를 입력하고 도전 버튼 클릭했을때, 횟수 차감되고 0S 0B가 뜬다. => HTML의 input태그에서 required 속성을 이용해 구현
- Game Over 됐을때 정답 입력하면 정답으로 인정됨
- 처음에 숫자를 입력하고 도전하기 전에 남은 기회가 출력이 안됨 => 일단 야매로 페이지 상단에 "남은기회 : 10" 을 출력해둔 상태ㅠ
- 이건 버그는 아니지만, 전연벽수,지역변수에 대해 잘 모를때 일단 만들기 시작했는데.... 스코프를 배우고 나니까 와 내 코딩 개노답....😂
for 안에 if else if 너무 복잡하고, 밖에서는 접근할 수도 없는 그냥 총체적 난국 등장;; 다 뜯어고치고 싶은데 자신이 없다.......😩