[Mini Web Project] 끝말잇기 게임

Cottonmycotton·2021년 10월 11일
0

Mini Web Project

목록 보기
3/4

❗️ 요구사항

  • 게임 시작 전 몇 명의 인원이 참여할지 선택한다
  • 첫 번째 참가자부터 단어를 입력한다
  • 입력된 제시어가 올바른지 판단한다
  • 올바르면 다음 참가자로 넘어가고 만일 잘못된 단어를 입력했을시엔 단어가 틀렸다는 경고창을 띄운다


🖊 게임 시작 전

  • prompt를 사용하여 창을 띄운디 몇 명의 인원이 참여할지 입력한다.
  • confirm 함수는 질문과 확인, 취소 버튼이 있는 창을 보여준다. 템플릿 리터럴을 사용하여 변수 paricipant 받아 질문이 적힌 창을 띄운다.
const participant = parseInt(prompt('몇 명이 참가하나요?'));
const yesOrNo = confirm(`${participant}명 맞나요?`);

🖊 순서 정하기 & 단어 제시하기

  • 참가자수 보다 순번인 수가 작으면 변수 order(순서자리) 1을 더해 if문을 순회해주고 그렇지 않아면 1를 입력시키는 로직으로 순번을 정해준다
const order = parseInt(orderNumber.textContent);

    if (order + 1 > participant) {
      orderNumber.textContent = 1;
    } else {
      orderNumber.textContent = order + 1;
    }
  }
  • word와 newWord를 let으로 선언해준 뒤 제시어가 비어있으면 입력한 단어가 제시어가 되는 로직을 작성해준다. 이 때 제시어를 제출한 다음 input창에 있던 문자를 빈 문자열로 만들어 준다.
  • word가 비어있지 않으면 word의 마지막 글자와 newWord의 첫 번째 자리가 일치하는지 확인한다.
  • submit 해줄때 페이지가 초기화 되는 것을 방지하기 위해 event.preventDefault()를 해준다.
event.preventDefault();

if (!word || word[word.length - 1] === newWord[0]) {
    word = newWord;
    submitWord.textContent = word;
}
  • 오답 입력시 alert를 사용하여 경고 메시지가 담긴 창을 띄운다.
else {
    alert('올바르지 않은 단어입니다!');
  }

🖊 0.5초 단위로 글자색 변경해주기(갑자기 해보고 싶었음...)

  • 색이 담긴 배열을 만든다.
  • Math.random 함수를 사용하여 배열 길이에 맞는 랜덤한 숫자를 추출해준다
  • setIntaval 함수에 함수명과 시간을 설정해주어 0.5초 단위로 함수가 실행되게 만들어준다.
const coloringFont = document.querySelector('#coloring');
let colorList = ['teal', 'rgb(184, 130, 235)', 'cornflowerblue', 'tomato'];
let count = 0;

function randomColor() {
  const randomNumber = Math.floor(Math.random() * colorList.length);
  coloringFont.style.color = colorList[randomNumber];
}

randomColor();
setInterval(randomColor, 500);

💡 전체 코드

⭕️ HTML(body부터)

<body>
  <div class='container'>
  <div class='participant-box' id='coloring'>
    <span class='order-number'>1</span>번째 참가자
  </div>
  <div class="word-box">제시어: <span class='submit-word'></span></div>
  <form class='input-box'>
    <input type='text'>
    <button type='button'>Click Me!</button>
  </form>
  </div>
<script src='index.js'></script>
<script
		src="https://kit.fontawesome.com/6478f529f2.js"
		crossorigin="anonymous"
	></script>
</body>
</html>

⭕️ JavaScript

const participant = parseInt(prompt('몇 명이 참가하나요?'));
const yesOrNo = confirm(`${participant}명 맞나요?`);

const orderNumber = document.querySelector('.order-number');
const submitWord = document.querySelector('.submit-word');
const form = document.querySelector('form');
const input = document.querySelector('input');
const button = document.querySelector('button');

let word; 
let newWord; 

function handleClickButton(event) {
  event.preventDefault();
  
  if (!word || word[word.length - 1] === newWord[0]) {
    word = newWord;
    submitWord.textContent = word;
    const order = parseInt(orderNumber.textContent);

    if (order + 1 > participant) {
      orderNumber.textContent = 1;
    } else {
      orderNumber.textContent = order + 1;
    }
  } else {
    alert('올바르지 않은 단어입니다!');
  }
  input.value = '';
  input.focus();
}

function handleSubmitText(event) {
  newWord = event.target.value;
}

form.addEventListener('submit', handleClickButton);
input.addEventListener('input', handleSubmitText);

const coloringFont = document.querySelector('#coloring');
let colorList = ['teal', 'rgb(184, 130, 235)', 'cornflowerblue', 'tomato'];
let count = 0;

function randomColor() {
  const randomNumber = Math.floor(Math.random() * colorList.length);
  coloringFont.style.color = colorList[randomNumber];
}

randomColor();
setInterval(randomColor, 500);

참조 및 문제 출처: ZerochoTV ES2021 자바스크립트 강좌

profile
투명인간

0개의 댓글