inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

[리뉴얼] 코딩자율학습 제로초의 자바스크립트 입문

셀프체크 - 쿵쿵따 만들기

쿵쿵따 추가적인 조건을 붙여서 만들었는데 어떤지 평가 부탁드립니다 ㅠㅠ

293

강태민

작성한 질문수 16

0

제가 추가적으로 구현한건 아래와 같습니다.

  1. 끝말잇기 단어를 잘못 선택하면 탈락

  2. 기존에 썼던 단어를 또 사용하면 탈락

  3. 참가자가 한 명 남으면 게임이 끝남
    => 참가자는 number를 배열로 만들어서
    틀리면 배열의 숫자를 제거하는걸로 구현했습니다.

 

 const number = Number(prompt("몇 명이 참가하나요?"));
      if (number) {
        const $order = document.querySelector("#order");
        const $word = document.querySelector("#word");
        const $input = document.querySelector("input");
        const $button = document.querySelector("button");
        const numArray = Array(number)
          .fill()
          .map((v, i) => i + 1);

        let word;
        let newWord;
        const compareArray = [];
        let order = Number($order.textContent) - 1;
        const onClickButton = () => {
          if (
            (!word || word[word.length - 1] === newWord[0]) &&
            newWord.length === 3
          ) {
            if (compareArray.includes(newWord) === false) {
              word = newWord;
              $word.textContent = word;
              compareArray.push(word);
              console.log(compareArray, numArray);

              if (numArray[order] + 1 > numArray.length) {
                $order.textContent = numArray[0];
                order = 0;
              } else {
                $order.textContent = numArray[order + 1];
                order += 1;
              }
            } else {
              alert("이미 있는 단어입니다. 탈락입니다.");
              numArray.splice(numArray.indexOf(numArray[order]), 1);
              $order.textContent = numArray[order];
              console.log(numArray, order);
            }
          } else if (newWord.length !== 3) {
            alert("작성해야 할 단어는 총 3글자입니다.");
          } else {
            alert(
              `잘못된 단어입니다. ${numArray[order]}번 참가자는 탈락입니다.`
            );
            numArray.splice(numArray.indexOf(numArray[order]), 1);
            $order.textContent = numArray[order];
            console.log(numArray, order);
          }
          if (numArray.length === 1) {
            alert(
              `게임이 종료되었습니다 승리자는${numArray[0]}번 참가자입니다`
            );
          }
          $input.value = "";
          $input.focus();
          console.log(newWord);
        };

        const onInput = (event) => {
          newWord = event.target.value;
        };

        $button.addEventListener("click", onClickButton);
        $input.addEventListener("input", onInput);
      }

javascript

답변 1

0

제로초(조현영)

오오오 정말 잘 하셨네요!! 참가자 배열과 compareArray 참 좋은 것 같습니다!

0

강태민

감사합니다! 제로초님 질문이 하나 더 있습니다!

  1. prompt로 값을 받지 않고 input으로 값을 받고 싶습니다.


    => input으로 값을 받으려는 이유는 참가자를 받는 페이지와 게임을 하는 페이지를 다르게 하고 싶습니다.


    => 그런데 구글링을 어떻게 해야할지생각이 잘 나지 않아서 혹시 힌트라도 조금 얻을 수 있을까요? ex. 특정 기능구현을 구글링하면 좋다 (?)

늦은 시간에 답변주셔서 감사합니다!

0

제로초(조현영)

페이지를 넘나들게 되면 조금 많이 복잡해집니다. 두 페이지 간에 데이터 공유하는 게 어려워서요. 차라리 두 페이지 모두를 한 페이지에 만들어놓고 숨겼다가 보여주는 식으로 하시는 게 좋을 것 같습니다.

0

강태민

네! 감사합니다 ^^

지금 생각나는건 number입력 전에는 게임하는 페이지는 css로 숨겼다가

number에 값이 들어오면 게임하는 페이지가 보이게 하는게 생각이 나는데..

 

완성이 된다면 후기 남기겠습니다!! 감사합니다 ㅎㅎ 좋은 밤 되세요 :)

자바스크립트 입문 강의 재생 안됨

0

76

2

쿵쿵따 조건문 질문입니다.

0

72

2

렛츠가릿 자바스트립트와 공유가 되나요

0

77

1

수강을 하기 전 공부순서에 관한 질문이 있습니다.

1

100

2

안녕하세요

0

101

2

1~45 필터링하는 코드에서 find대신 some써주는게 나을거같습니다.

1

76

2

고차 함수 작성법과 수업 진도 관련한 질문

0

82

3

break와 continue 9:55 내 continue 구문 질문

0

153

2

옵셔널 체이닝 적당한 깊이는 어느 정도인가요?

0

121

2

로또 추첨기 중 입력값을 검사할 때

0

136

2

2-14.else,else if,switch 관련 질문입니다.

0

109

2

가위바위보 이미지(rsp.png)가 안보여요

0

264

3

Math.random() 에 9을 곱하는 이유

0

174

4

클로저 관련해서 질문있습니다.

1

188

2

유튜브 댓글 보고 왔습니다!- 퀴즈 중복된 숫자 검사 for 문

0

246

1

event.target.textContent관련 질문

0

273

2

객체 참조 관련 질문

0

179

1

-2+ -2 = -4 음수 더하기 음수 - 셀프체크 계산기

0

464

1

별찍기 마름모 문제입니다.

0

351

2

숙제 질문

0

217

1

5강 async/await으로 가독성 높이기에서

0

231

1

야구게임 관련 질문입니다

0

186

1

쿵쿵따, 계산기에서 변수 선언

0

181

1

지뢰 힌트 사라짐(대괄호)

0

167

1