JS 끝말잇기

2021-02-22

끝말잇기 구현.

while문

var word = '엠제이';
while(true) {
    var answer = prompt(word);

    // 마지막 인덱스는 글자 길이보다 1이 작은 숫자
    if(word[word.length - 1] === answer[0]) {
        alert('딩동댕');
        word = answer;
    } else {
        alert('땡');
    }
}

for문

for (var word = '엠제이'; true; ) {
    var answer = prompt(word);
    if(word[word.length - 1] === answer[0]) {
        alert('딩동댕');
        word = answer;
    } else {
        alert('땡');
    }
}

끝말잇기 화면에 구현

var body = document.body;
var wordBox = document.createElement('div');
wordBox.textContent = '엠제이';
document.body.append(wordBox);
var form = document.createElement('form');
document.body.append(form);
var input = document.createElement('input');
form.append(input);
var button = document.createElement('button');
form.append(button);
button.textContent = '입력';
var answerBox = document.createElement('div');
document.body.append(answerBox);

form.addEventListener('submit', function wordgame (e) {
    e.preventDefault();
    if(wordBox.textContent[wordBox.textContent.length - 1] === input.value[0]) {
        answerBox.textContent = '딩동댕';
        wordBox.textContent = input.value;
        input.value = '';
        input.focus();
    } else {
        answerBox.textContent = '땡';
        input.value = '';
        input.focus();
    }
});

REFERENCE
https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B2%8C%EC%9E%84-%EA%B0%9C%EB%B0%9C/lecture/17157?tab=curriculum