오픈 소스 프로젝트에 새로운 기능 추가

이것은 Hactoberfest의 두 번째 블로그 게시물입니다. 지난 프로젝트에서는 큰 프로젝트의 오류를 수정하는 작업을 했습니다. 그래서 이번에는 응용 프로그램에 기능을 추가하기 위해 더 작은 프로젝트를 찾으려고 노력했습니다. 그리고 match-three-game 이라는 프로젝트를 찾았습니다. 이번 오픈소스 프로젝트의 게임은 제가 가장 좋아하는 게임인 캔디크러쉬였습니다.
그래서 이 프로젝트를 진행하기로 했습니다. 이 프로젝트에는 열려 있는 문제가 많이 있었습니다. 하지만 대부분은 UI나 기능상의 버그에 관한 것이었다. 새로운 기능을 추가하고 싶어서 기능상의 문제에 대한 이슈를 찾아보려 했습니다.

타이머가 종료되었을 때 게임을 재생하라는 메시지를 표시하는 새 기능을 추가해야 하는 항목issue을 찾았습니다.

이 프로젝트는 설정하기가 매우 쉬웠습니다. npm을 사용하여 브라우저에서 index.html 파일을 실행하고 열면 됩니다.

문제를 해결하기 전에 시간을 내어 코드를 읽습니다. 코드를 읽는 동안 코드에 쓰여진 내용을 이해할 수 없는 경우. 나는 그것을 조사했다. 이것은 큰 프로그램이 아니기 때문입니다. 프로그램의 논리를 완전히 이해하는 데는 많은 시간이 걸리지 않습니다.

로직의 이해를 마친 후 먼저 프롬프트 팝업을 추가하고 HTML 파일에 버튼을 넣기 시작했습니다.

 <div class = "replay_popup" id = "replay_popup">
        <div class = "replay_popup_content">
            <p>GAME OVER</p>
            <p>Do you want to play again?</p>
            <div id = replay_button>REPLAY</div>
        </div>

그리고 리플레이 버튼에 이벤트 리스너를 추가하고 타이머가 종료되었을 때만 표시되도록 했습니다.

  const replay_popup = document.getElementById('replay_popup');
  const replay_button = document.getElementById('replay_button');

// replay button click event listner
 replay_button.addEventListener("click",replayGame) 

//function to restart the game if replay button clicked.
function replayGame(){ 

      replay_popup.style.display = "none";
      startGame();

  }

기능을 추가한 후의 스크린샷입니다.



이 코드를 수정하는 동안 연구해야 할 정도로 어려운 작업은 아니었지만 자바스크립트로 게임을 작업한 것은 처음이라 흥미로웠다.

pull request을 생성한 후 프로젝트 관리자가 "아름답다"라는 댓글을 남겼습니다. 내가 개발한 것을 좋아하는 사람이 있다는 것을 알게 된 것은 좋은 경험이었던 것 같다.

이 문제의 경우 모든 것이 매우 순조롭게 진행되었습니다. 그리고 이 응용 프로그램에서 응용 프로그램의 논리에 문제가 있다는 버그도 발견했습니다. 그래서 내가 찾은 것에 대해 프로젝트에 문제를 만들었습니다. 다음 호에서는 내가 찾은 문제에 대해 작업할 것입니다.