-
JavaScript 입문 : 쿵쿵따 게임만들기 (숙제) - 실수 및 보완컴퓨터 알아가기/JavaScript 2022. 2. 8. 19:30728x90반응형
이 글은 제로초 TV의 자바스크립트 강좌를 기본으로 하고 있습니다.
지금까지 자박스크립트에서 '끝말잇기'라는 코딩을 따라서 해보고 배웠다고 생각했습니다. '쿵쿵따'라는 게임을 스스로 만들어 보라는 숙제가 나왔습니다.
숙제를 풀어봐야 겠습니다. '끝말잇기' 게임에사 차례대로 연습했던 것을 복습을 해보고 시도해 보고 최종 안되는 부분은 강좌를 보고 숙지를 해야겠습니다. 그럴려면 '쿵쿵따'게임이 무엇인지부터 알아야겠죠...
▒ 쿵쿵따 게임
<조건>
① 입력할 수 있는 단어는 3글자로 통일
② 3글자가 아니면 '다시 입력하시오' 라는 화면 표시
③ 참가인원수는 prompt 함수를 이용 / prompt 함수에서 취소 선택시 작동불가
④ input 이벤트 발생시 입력한 글자가 3글자인지 확인
순서도를 만들어서 쿵쿵따게임을 만들어 보세요
일단 막막합니다만, '끝말잇기' 게임을 복습하면서 시도해 봅시다.
1. 쿵쿵따 순서도를 위한 사고방식
▶ 일단 예시를 만들어봅니다.
① 참가자의 수는 3명으로 한다
② A가 '개인기'라고 한다.
③ B가 '기구학'이라고 한다.
③ C가 '학용품'이라고 한다.
④ 다시 A가 '품앗이'라고 한다.
⑤ 반복한다.
▶ 기본 순서도 만들기
우선 '끝말잇기' 순서도를 기준으로 '쿵쿵따게임' 순서도를 아래 그림과 같이 해 보겠습니다.
위 그림에서
①번은 처음 시작할 때 prompt함수, 변수 등을 선언하는 자리
②번은 input 이벤트 발생시키는 곳
③번이 본겨적인 onClick 콜백함수가 필요한 곳
으로 1차 설계를 합니다.
2. VS Code 이용 기본 HTML 파일만들기
쿵쿵따를 지칭하는 폴더에 쿵쿵따라는 HTML 파일을 만듭니다. 저는 kkt.html로 시작합니다.
▶ 기본 HTML 파일 만들기
▶ 추가 HTML
<body> 태그 안 기본순서, 제시어, 입력창, 버튼을 만들고 향후 CSS를 대비하여 <head> 태그안에 <style> 태그를 만듭니다. 그 후 자바스크립트 코딩을 위해서 <script>태그도 만들어 놓습니다.
3. 참가인원수 확인
이 부분은 prompt함수를 이용합니다.
참가자수는 기본적으로 숫자형이기 때문에 다음과 같이 숫자형으로 만들어주고 변수를 지정합니다.
4. 이벤트가 될 태그선택
이벤트 발생태그는 <span>, <input>, <button>태그입니다. 미리 변수와 태그를 지정합니다.
5. 이벤트 활성화를 위한 콜백함수 선언
이벤트 발생태그를 선택한 후 활성화를 위하여 콜백함수를 선언합니다.
먼저 순서도상 input 이벤트를 고민해 봅니다. 이벤트가 저장되는 코딩은 event.target.value입니다. 다음과 같이 해줍니다.
그전에 제시어와 신규입력 단어에 대한 변수를 만들어주고 진행합니다.
click 이벤트 기본형을 다음과 같이 만들어 놓습니다.
6. 제시어가 비어있는가 또는 올바른 쿵쿵따인가 코딩하기
지난시간 배운바와 같이 or를 활용한 if ~ else문을 작성하면 됩니다. 조건을 보면 3글자여야 하고 3글자가 아니면 다시 입력하시오라는 문구가 나와야 합니다.
순서도를 보면 다음 판단이 제일 중요하네요
① onClick 콜백함수 if문 조건
제시어가 비어있는가는 or (올바른 쿵쿵따인가 and 3글자인가)로 코딩을 해야합니다. 논리표 기준으로 보면 and가 or보다 우선순위입니다. 외우지 않아도 가만히 생각해 보변 상식적으로 이해가 될 겁니다.
코딩은 다음과 같이 나타냅니다.
글자수가 3개인 경우는 입력하는 단어의 길이를 3으로 놓으면 됩니다. newWord.length === 3
② if문이 참일경우
③ 다음사람으로 넘어가기
이 부분은 '끝말잇기'게임에서 한번 연습했습니다. 이 부분에 대한 순서도를 보면 다음과 같습니다.
역시 if ~ else 문이 필요 하겠네요.
④ 틀린경우
7. prompt 함수에서 취소선택시 작동이 안되게
참가자수를 나타내는 number 상수는 취소가 되었을 경우 Null이 되며 그 값이 parseInt나 Number 안으로 들어가면 false가 됩니다. 즉, if (number) { } 중괄호 안으로 모든 코드를 넣으면 false일경우 if문 내부는 실행되지 않습니다. 다음과 같이 코딩하면 됩니다.
이렇게 코딩을 하면 어느정도 게임에 대한 이해를 가질수 있겠습니다.
그런데 사실 에러를 하나 발견했습니다.
쿵쿵따 첫번째 제시어를 두글자를 넣어도 프로그램이 돌아가네요.. 이럴 경우 에러가 떠야 하는데.. 좀 더 고민해야 겠습니다.
반응형'컴퓨터 알아가기 > JavaScript' 카테고리의 다른 글
JavaScript 입문 : 계산기 만들기 - CSS활용 계산기 그리기 (0) 2022.02.16 JavaScript 입문 : 계산기 만들기 - 순서도 (0) 2022.02.15 JavaScript 입문 (끝말잇기 게임) : 코드 최적화, 순서도 최적화 (0) 2022.02.07 JavaScript 입문 (끝말잇기 게임) : 마무리 하기 - 틀림표시 (0) 2022.02.03 JavaScript 입문 (끝말잇기 게임) : 두번째 제시어부터 코딩하기 (2) - 틀린 단어 판단 및 다음 순서로 넘어가기 (0) 2022.02.02