Javascript 끝말잇기

인프런 'ZeroCho'님의 '웹 게임을 만들며 배우는 자바스크립트'를 수강하며 학습한 내용입니다.

 

 

 

먼저 브라우저의 콘솔 창을 이용하여 간단한 끝말잇기를 구현하였다.

 

끝말잇기 순서도

1. 끝말잇기 시작 단어가 필요

2. 끝말잇기 다음 단어 입력  

3. 시작 단어의 마지막 글자와 입력한 단어의 첫글자가 일치하는지 확인한다.

  3-1. 일치하면 딩동댕! 을 출력해준다.

    3-1-2. 입력한 단어를 시작단어로 바꿔주고 끝말잇기를 진행한다. (3번으로 이동)

  3-2. 일치하지 않으면 땡!!을 출력해준다. (3번으로 이동)

 

 

 

 

 

 

 

 

prompt() : 질의 응답 창을 나타내 준다. 입력한 값을 반환시켜줌

 

 

이를 토대로 자바스크립트를 이용하여 끝말잇기를 구현하였다.

 

자바스크립트로 html의 태그들을 생성.

• document.body : html에서 body태그가 선택됨.
• var word = document.createElement('div') : div태그를 생성.
• word.textContent= '제로초 ' : 단어는 div태그를 생성한 변수이다. 생성한 div태그 안에 텍스트를 넣어준다.
• document.body.append(word)   : body안에 추가. word를 화면에 표시에 준다.  

 

 

결과

끝말잇기가 화면에 잘 출력되어서 나왔다.

문제는 엔터가 먹히지 않는것!

버튼을 직접 마우스로 클릭해야지만 이벤트가 실행된다. 

그래서 form태그를 만들어서 해결하였다.

 

 

 

 

엔터를 사용해 이벤트가 실행됨을 확인하였다. 

엔터를 사용할 때 마다 페이지가 새로고침이 되는 문제를 해결하기 위해 preventDefault()를 사용하였다.