끝말잇기

순서도 수정하기

세부적으로 순서도를 수정한다.
순서도를 따라 코드를 짜면 편리하다는 장점이 있으며, 문제점을 한눈에 보기 편하다.

첫번째 사람인지 정하기

첫번째 사람인지 정하는 방법은 무엇일까?
바로 제시어가 없는 경우이다.
즉, 제시어가 없는 경우, 1번째 사람이며, 제시어가 있을 경우, 1번째가 아닌 사람이다.

그럼 if, else 문으로 제시어가 있는 경우와 없는 경우를 나누어 생각하면 될것같다.
제시어를 입력하는 칸이 으로 되어있으니, word를 선택한다.

const $word = document.querySelector('#word'); // word 선택


const onClickButton = () => {
	if (!word) { 
    	// 제시어가 비어있을 때
    } else { 
    	// 제시어가 비어있지 않을 때
    }
}

위처럼 프로그래밍하여 첫번째 사람인지 정할 수 있다.

올바른 단어인지 판단하기

순서는 정했으니, 이제 끝말잇기를 하면서 올바른 단어인지 판단해야한다.
변수를 사용하여, 제시어와 새로 입력한 단어를 담게 만들어주자.

순서도를 보면 제시어가 비어있을 때는 입력한 단어가 제시어가 되며,
제시어가 비어있지 않을 때는 입력한 단어가 올바른지 판단한다.

끝말잇기 게임은 제시어의 마지막 단어와 입력할 단어의 첫글자가 동일해야하는 게임이다.
그러므로 이 점을 이용하여 만들어보자.

const $input = document.querySelector('#input'); // 입력칸 선택하기
const $word = document.querySelector('#word'); // 표시된 제시어 선택하기

let word // 제시어
let newWord // 새로 입력한 단어

const onClickButton = () => {
	if (!word) { 
    	// 제시어가 비어있을 때
        word = newWord; // 입력한 단어가 제시어가 된다.
        $word.textContent = word; // 표시된 제시어를 입력한 단어로 바꾸기
        $input.value = ''; // 입력 후 입력란 초기화하기
    } else { 
    	// 제시어가 비어있지 않을 때
        if (word[word.length - 1] === newWord[0]) { 
        	// 제시어의 마지막 글자와 입력 글자의 첫 글자가 같다면
         	word = newWord; // 입력한 단어가 제시어가 된다.
         	$word.textContent = word; // 표시된 제시어를 입력한 단어로 바꾸기
            
            input.value = ''; // 입력 후 입력란 초기화하기
        } else { 
        	// 제시어의 마지막 글자와 입력 글자의 첫 글자가 같지 않다면
            alert('올바르지 않은 단어입니다.');
            
            $input.value = ''; // 입력 후 입력란 초기화
        }
    }
}
$button.addEventListener('click', onClickButton);

TEST

제시어가 비어있을 때

첫번째 참가자가 제시어 넣었을 때

다음 참가자가 올바른 단어를 넣었을 때

다음 참가자가 올바르지 않은 단어를 넣었을 때