Javascript 공부를 하면서 실습을 위한 토이 프로젝트를 진행해 보았다.
비기너들이 많이 해본다는 코드펜의 행맨 게임이 적당해 보여 참고하였다.
목표
- 플로우 차트를 작성해 보자.
- ES6를 최대한 활용해 보자.
- canvas를 사용해 보자.
플로우 차트
플로우 차트는 노션으로 작성하였다. 작성하고 보니 로직을 정리하는데 많은 도움이 되었다. 함수 작성하는 순서도 헤매지 않고 쭉 작성할 수 있었다. 그러라고 있는 거지만 새삼 편리성을 느꼈달까.
간략하게 작성해 보자면,
- 게임 시작
- 알파벳 버튼 클릭
- 정답 단어 스펠링과 비교(true/false)
- 맞으면 스펠링 표시, 틀리면 목숨 1 차감 & 행맨 그리기
- 단어 스펠링을 전부 맞추면 게임 종료
- 목숨이 0이면 게임 종료, 0이 아니면 2번으로 돌아감
2번~6번 과정이 반복- 힌트 버튼 클릭 시 힌트 팝업 표시
- 다시하기 클릭 시 게임 재시작, 1번으로 돌아감
여기서 세부 사항이 여러 갈래로 나뉘니 복잡하게 되었다. 다른 사람이 쓴 플로우 차트를 참고 해보기도 했지만 반복되는 부분이라든지 어떻게 수정해야 더 간결하게 보일지 (노션으로만 해서 그런 건지...)잘 모르겠더라. 피드백이 있는 분은 자유롭게 댓글 남겨주시길 부탁드린다.
코드
코드펜을 참고하여 작성하면서 좀 더 예쁘게 바꿀 수 있는 부분과 ES6 문법을 사용할 수 있는 부분은 수정하였다. 확실히 실제로 코드를 짜니까 습득이 훨씬 수월했다. 플로우 차트와 조금 다른 부분도 추가되었다(필요 없을 거로 생각했던 맞춘 스펠링 개수 파악 부분이 추가되었다.). 다음에는 사용자가 원하는 데이터를 넣고 사용할 수 있게 플러그인 식으로 써보면 좋겠다는 생각도 들었지만 그건 시간이 된다면 진행해 보기로 한다.
사용한 ES6
const 와 let
const alphabet = ["a", "b", "c", ...];
let topic, word, hint, lives, letterBtn, blanks, correctCounter, drawOrder;화살표 함수
const frame1 = () => draw(0, 130, 300, 130);Template Literals ( ` )
topicText.innerHTML = `주제는 ${topic}입니다.`;구조분해할당
({ topic, word, hint } = randomData);
Spread(전개)
if ([...word].indexOf(guessLetter) != -1) {
// true
[...word].forEach((correctLetter, i) => {
if (correctLetter == guessLetter) {
blanks[i].innerHTML = correctLetter;
correctCounter += 1;
correctCounter == word.length && gameClear();
}
});
}Canvas
canvas는 처음 사용해보았는데 방식이 svg와 거의 비슷하다. 다만 getContext 메서드를 '2d'로 사용을 했을 때 한정이고, 'webgl'이나 'webgl2' 같은 컨텍스트를 사용하게 되면 방식이 아예 달라지는 것 같다. 3d 모션 그래픽을 구현할 때 주로 사용하던데 나중에 꼭 구현해보고 싶다.
마치며
솔직히 한 달이면 업무도 하면서 충분히 할 줄 알았는데, 일정이 겹치고 겹쳐서 꽤 바빠지며 시간이 촉박하게 되었다. 시간이 좀 더 있었으면 분명 더 나았을 부분도 있기에 아쉽다. 그래도 어찌어찌 마무리는 되었고 뿌듯함도 느낀다. 아직 갈 길이 멀지만, 앞으로도 토이 프로젝트나 스터디를 하나씩 진행해 가면 분명 발전할 것이라 생각한다.
