Open
Conversation
기능 목록 정리
게임 타이틀과 규칙 및 예시 UI를 구현했습니다: - <h1> 태그로 게임 타이틀 표시 - <section class="rules"> 태그로 규칙 및 예시 코드 분리 - <b> 태그로 특정 단어 강조
텍스트 필드 및 확인 버튼 UI를 구현했습니다: - 디자인 요구 사항에 맞춰 <br> 태그로 줄 바꿈 - <section class="input"> 태그로 코드 분리 - �<input type="text" />로 텍스트 필드 구현 - <Input type="button" />로 버튼 구현
결과 UI를 구현했습니다: - <h3> 태그로 결과 타이틀 표시 - 추후 힌트가 표시될 태그 구현 - 유저에게 제안하는 메시지가 표시될 태그 구현 - 게임 재시작 버튼 태그 구현 - 버튼의 속성을 나타내는 css 선택자 구현
#1 게임 UI 구현
�게임의 상태 및 로직을 관리하는 Game 클래스를 구현했습니다. - 1~9까지 서로 다른 세 개의 정수를 만드는 generateRandomNumber 메서드 구현 - user의 input값을 통해 결과를 도출하는 compareResult 메서드 구현 - user의 input값을 통해 strike, ball, nothing을 판별하는 countHits 메서드 구현 - 유저 input값의 유효성을 검사하는 isValid 메서드 구현 - input 값을 초기화하고 focus를 주는 resetInputEl 메서드 구현 - 에러메시지를 출력하고, resetInputEl 메서드를 출력하는 alertHandler 메서드 구현 - strike, ball, nothing 값에 따라 결론 값을 생성하는 setResult 메서드 구현 - result 값을 출력할 수 있는 getResult 메서드 구현
코드 가독성을 위해 String 타입의 includes() 메서드 값을 반전시킨 값을 return 하는 isNotIncludes 메서드를 구현했습니다.
�게임의 상태 및 로직을 관리하는 Game 클래스를 구현했습니다. - 1~9까지 서로 다른 세 개의 정수를 만드는 generateRandomNumber 메서드 구현 - user의 input값을 통해 결과를 도출하는 compareResult 메서드 구현 - user의 input값을 통해 strike, ball, nothing을 판별하는 countHits 메서드 구현 - 유저 input값의 유효성을 검사하는 isValid 메서드 구현 - input 값을 초기화하고 focus를 주는 resetInputEl 메서드 구현 - 에러메시지를 출력하고, resetInputEl 메서드를 출력하는 alertHandler 메서드 구현 - strike, ball, nothing 값에 따라 결론 값을 생성하는 setResult 메서드 구현 - result 값을 출력할 수 있는 getResult 메서드 구현
코드 가독성을 위해 String 타입의 includes() 메서드 값을 반전시킨 값을 return 하는 isNotIncludes 메서드를 구현했습니다.
HTML 문서 내 태그 이벤트와 게임 로직을 결합했습니다. - Game 클래스 import 후 인스턴스 생성 - input 버튼 클릭 시 입력된 값을 바탕으로 결론을 도출하는 compareResult 메서드 실행 - 정답 시 게임 재시작 버튼 및 메시지 출력 - 재시작 버튼 클릭 시 게임 초기화 및 새 게임 시작
디자인 요구사항에 맞춰 스타일을 적용했습니다.
HTML 구조에 맞게 태그 이름을 수정했습니다.
디자인 요구사항에 맞춰 컴포넌트들의 위치를 수정했습니다. - span 태그를 div 태그로 변경하여 컴포넌트 수직 배치
feat: 게임 동작 및 관리 로직 구현
게임 타이틀과 로그 section 구현 및 스타일을 적용했습니다.
Dom 조작 로직을 모듈로 분리했습니다.
프로그램 전반에서 메시지를 관리하고 재사용하기 위한 constants 모듈
프로그램 전체에서 요소에 쉽게 접근하고 코드의 가독성을 향상 시키기 위해 elements 모듈로 분리했습니다.
게임 인스턴스와의 상호작용이 가능하며, 사용자 상호작용을 처리할 수 있습니다. - game 인스턴스를 의존성 주입하는 initGameInstance 함수 구현 - TextField에서 'Enter' 입력 시의 로직을 처리하는 handleInputTextFieldKeyPress 함수 구현 - 확인 버튼 클릭시의 로직을 처리하는 handleInputBtnClick 함수 구현 - 재시작 버튼 클릭시의 로직을 처리하는 handleRestartBtnClick 함수 구현 - 게임 타이틀 시작 버튼 클릭 시의 로직을 처리하는 handleTitleStartBtnClick 함수 구현 - DOM 로딩 완료시의 로직을 처리하는 handleDOMContentLoaded 함수 구현 - 게임 종료 버튼 클릭 시의 로직을 처리하는 handleFinishBtnClick 함수 구현
main.js에 있던 코드들을 모듈화 했습니다.
- 에러 메시지, 결과 메시지를 constants.js 모듈의 상수로 대체하였습니다. - 로그를 출력하는 addLog 함수가 추가되었습니다. - 마지막 로그 값을 반환하는 getLastLog 함수가 추가되었습니다. - 순차적 동작을 위해 setResult에 콜백함수가 추가되었습니다.
feat: 게임 타이틀 및 로그 기능 추가
- 야구공 모양의 favicon이 추가되었습니다. - '숫자 야구' 라는 제목의 타이틀이 추가되었습니다.
디자인 요구사항에 부합하도록 margin-bottom 값을 수정했습니다.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Works
CheckLists
ScreenShots
게임 타이틀
인 게임
Video
2024-05-06.2.45.59.mov