< / > 클론 코딩-Wordle(게임)__3 자바스크립트

- TO-DO LIST -

저번에 이어 워들 게임 클론 코딩을 진행.

완성

 

 

 

- 배운 내용  정리 -

 

이번에는 기능 구현까지 하면서 최종적으로 완성을 했다.

 

- 구현한 기능들 -

 

엔터를 치면 정답 확인 후 다음 줄 진행

정답이 맞으면 초록색으로 표기

틀리면 회색으로 표기

자리는 안 맞지만 정답에 포함되어 있으면 누런색으로 표기

  const handleEnterKey = () => {

    let 맞은_갯수 = 0;

    for (let i = 0; i < 5; i++) {

      const block = document.querySelector(

        `.board-block[data-index='${attempts}${i}']`

      );

      const 입력한_글자 = block.innerText;

      const 정답_글자 = 정답[i];

      if (입력한_글자 === 정답_글자) {

        맞은_갯수 += 1;

        block.style.background = "#6AAA64";

      } else if (정답.includes(입력한_글자)) block.style.background = "#C9B458";

      else block.style.background = "#787c7e";

      block.style.color = "white";

    }

    if (맞은_갯수 === 5) gameover();

    else nextLine();

  };

일단 함수를 만들고 for문을 통해 

각 정답칸의 글자를 정답과 비교할 수 있게 반복문을 돌린다.

예) 1번칸 확인 후 2번 칸 확인............. 5번 칸 확인

 

if문을 통해서 위의 예시의 확인 절차를 진행한다

내가 입력할 글자 와 정답을 비교해서 정답이랑 맞으면 변수 맞은_개수에 +1을 한다

그리고는 기타 자질구리한 스타일을 적용한다

 

else if

정답은 아니지만 정답에 글자가 포함되어 있다면

(이건 .includes()를 통해 해당 글자가 있는지 확인)

 

else 

정답이 없다면 

 

정답이 맞다면 gameover이라는 함수를 실행해 게임 종료 문구를 띄우고 

기능을 정지한다.

 

 

백스페이스로 글자 지우기

  const handleBackspace = () => {

    if (index > 0) {

      const preBlock = document.querySelector(

        `.board-block[data-index='${attempts}${index - 1}']`

      );

      preBlock.innerText = "";

    }

    if (index !== 0) index -= 1;

  };

가장 이해가 어려운 부분이었다.

마찬가지로 함수를 만들고 

index가 0 보다 크면

index -1 을 해주는 거다

(우리에겐 - 칸이 없으니 까)

-1을 하면서 innerText를 통해 글자를 비워준다.

 

 

 

게임 진행 시간 표기

저번에 올렸던 포스팅에 있다

2023.06.23 - [개발공부] - 자바스크립트(5)_시계만들기(웹API )

 

 

정답을 맞히면 게임 종료 및 시간 정지

 게임 종료 시 팝업 및 버튼 기능 제한

  const gameover = () => {

    window.removeEventListener("keydown", handleKeyDown);        // 1

    displayGameover();                                                                       // 2

    clearInterval(timer);

  };

 

게임 오버라는 함수를 만들고 

내부에 다른 함수들을 넣는다

1번 줄은 말 그대로 이벤트를 없애서 키가 눌리는 기능을 제한한다

2번 줄은 게임을 종료 팝업을 띄운다

 

const displayGameover = () => {

    const div = document.createElement("div");

    div.innerText = "게임이 종료됐습니다.";

    div.style =

      "display:flex; justify-content:center; align-items:center; position:absolute; top:40vh; left:45vw; background-color: white; width: 200px; height:100px;";

    document.body.appendChild(div);

  };

html에서뿐만 아니라 자바스크립트에서도 div를 생성할 수 있었고

css기능을 위에처럼 직접 입력해서 구현할 수 있었지만

선생님 말로는 좋은 건 아니니까 하지 말라 신다

 

 - 부족한 점 -

 

사실 이 번 거는 따라가기에 바빠서 어떻게 만들었는지 모르겠다.

 

게다가 원래는 한 줄씩 넘어가야 하는데 영상에서 보다시피 2줄씩 넘어간다

이유를 모르겠다

이 부분의 문제는 html에서 index 번호를 잘 못줘서 그랬다.

row-0의 index는 00~04

row-1은 10 ~ 14

.

.

.

row-5는 50 ~ 54 로 해야됐었다.

나는 row-0의 00~ 마지막 row-5까지 숫자를 순서대로 줘버렸었다.

같은 팀원분들 중 한 분도 나와 같은 문제였었는데

서로 얘기하다가 팀원분께서 발견해서 알려주셨다

감사합니다~

 

알려줄 사람~

 

이번에 하면서 느끼는 것은

결국 함수 안에 얼마큼 다른 함수들을 잘 연결해서 쓰냐인 거 같다

물론 그 자체가 가장 어려운 것이지만.

 

계속하다 보면 익숙해지거나 

혼자 복잡한 로직을 잘 짤 수 있....... 겠지?

 

 

 

 

 

밑에 링크는 클론 코딩 한 워들 게임을 올려놓은 것이다.

https://main--web-worddle.netlify.app/

Worddle

 

 

결론은

 

 

 

 

 

 

워들 클론 끝