[HTML/ CSS/ JS] random 끝말잇기 게임 - 리팩토링
superpil
[HTML/ CSS/ JS] random 끝말잇기 게임 - 리팩토링개발노트/Code2019. 10. 18. 07:59@superpil
Table of Contents

-HTML

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900&display=swap&subset=korean" rel="stylesheet">
	<link rel="stylesheet" href="reset.css">
	<link rel="stylesheet" href="style.css">
	<title>Document</title>
</head>
<body>
  <div id="warp">
    <!-- title -->
    <h1>Random 끝말잇기 게임</h1>
    <!-- write word -->
    <div id="writeWord_box">
      <form action="" id="word_form">
        <input type="text" placeholder="game close!" id="word_input" readonly>
      </form>
    </div>
    <!-- player set -->
    <div id="playerSet_box">
      <div id="playInfor">
        <h2>게임 방식은 다음과 같습니다.</h2>
        <p>1.플레이 인원을 정한다.</p>
        <p>2.닉네임을 정한다.</p>
        <p>3.게임 순서는 매 턴 마다 Random!! 으로 정해진다.</p>
        <p>4.GAME START에 단어를 작성하여 게임을 시작한다.</p>
        <input type="text" id="player_number">
        <button id="player_number_btn">참가자 인원수</button>
      </div>
      <div id="player_nicknameBox"></div>
    </div>
    <!-- game turn -->
    <div id="gameTurn_box">
      <div id="playerList_box"></div>
      <div id="displayTurn_box"></div>
    </div>
    <!-- display word -->
    <div id="displayWord_box"></div>
  </div>

	<script src="main.js"></script>
</body>
</html>

 

 

-reset.css

body{
  margin: 0;
  padding: 0;
  background: rgb(220, 20, 60);
  font-family: 'Noto Sans KR', sans-serif;
}
h1, h2, h3, h4, h5, h6, p, div, span, a, button, input, label, ul, ol, li, img{
  padding: 0;
  margin: 0;
  line-height: 1.3em;
  font-size: 16px;
  font-weight: normal;
  list-style: none;
  text-decoration: none;
  color: black;
}

 

 

-style.css

/* warp */
#warp{
  width: 80%;
  margin: 0 auto;
}
/* title */
h1{
	text-align: center;
	color: azure;
	font-size: 50px;
	letter-spacing: 5px;
}
/* writeWord_box  */
#writeWord_box{
	margin: 13px auto;
	text-align: center;
}
#word_input{
	width: 350px;
	height: 100px;
	text-align: center;
	font-size: 40px;
	font-weight: bold;
	border-radius: 3px;
	border: none;
}
#word_input::placeholder{
	font-size: 30px;
	text-transform: uppercase;
	font-weight: bold;
}
/* playerSet_box */
#playerSet_box{
	text-align: center;
}
#playInfor{
  width: 600px;
  margin: 0 auto;
}
#playInfor h2{
  color: rgb(37, 36, 36);
  font-size: 25px;
	font-weight: bold;
	padding: 20px;
}
#playInfor p{ 
  color: rgb(37, 36, 36);
  font-weight: 700; 
  text-align: left;
  margin-left: 160px;
  padding: 5px 0;
}
#player_number{
	width: 30px;
	height: 30px;
	border-radius: 3px;
	border: none;
	padding-left: 6px;
	box-sizing: border-box;
}
#player_number_btn{
	background: dodgerblue;
	width: 120px;
	height: 50px;
	margin-left: 10px;
	border-radius: 3px;
	border: 1px solid rgb(13, 67, 121);
	cursor: pointer;
	font-weight: bold;
}
/* player_nicknameBox */
#player_nicknameBox{
	width: 750px;
	margin: 10px auto;
}
#player_nicknameBox input{
	width: 150px;
	height: 30px;
	border: none;
	border-radius: 3px;
	padding-left: 20px;
	box-sizing: border-box;
	margin: 5px 0;
  font-size: 19px;
}
#player_nicknameBox span{
	font-size: 20px;
	padding: 20px 0;
	margin-left: 10px;
	font-weight: 300;
}
#player_nicknameBox button{
  background: rgb(37, 36, 36);
  color: crimson;
	margin-left: 50px;
	width: 200px;
	height: 50px;
	border-radius: 3px;
	border: none;
	cursor: pointer;
	font-weight: bold;
}
/* gameTurn_box */
#gameTurn_box{
  width: 600px;
  margin: 0 auto;
  text-align: center;
}
/* gameTurn_box playerList_box */
#playerList_box{
  font-size: 19px;
  font-weight: 550;
  text-align: center;
}
#playerList_box span{
  font-size: 19px;
}
/* gameTurn_box displayTurn_box */
#displayTurn_box{
  font-size: 50px;
  font-weight: 900;
  color: rgb(219, 219, 219);
}
/* displayWord_box */
#displayWord_box{
  text-align: center;
  color: rgb(219, 219, 219);
  font-weight: bold;
  font-size: 22px;
  padding: 30px;
}

 

 

-Javascript

const player_number = document.getElementById('player_number');
const player_nickname_Box = document.getElementById('player_nicknameBox');
const word_form = document.getElementById('word_form');
const word_input = document.getElementById('word_input');
const turn_display = document.getElementById('displayTurn_box');
let userNickname = [];
let checkSpaceName = [];
let standardWord;
let comparisonWord;
let turnCount = 0;
let stopGame = true;

// 설정모음
// 닉네임 입력란 만들기 설정
const makeNicknameObj = {
  btn : document.createElement('button'),
  createEl : function(number,targeting){
    for(let i = 0; i < number; i++){
      let player_name = document.createElement('input');
      let player_text = document.createElement('span');
      player_text.textContent = i + 1 + 'player: ';
      this.btn.textContent = '닉네임 설정 후 STATR';
      targeting.appendChild(player_text);
      targeting.appendChild(player_name);
      targeting.appendChild(this.btn);
    } 
  },
}

// 속성 설정
propertySet = {
  bundle : function(target, inner, place, text, tf){
    target.innerHTML = inner;
    target.placeholder = place;
    target.textContent = text;
    target.readOnly = tf;
  },
  falseToggle : function(){
    player_number_btn.textContent = '참가자 인원수';
    player_nickname_Box.innerHTML = '';
    word_input.placeholder = 'game close!';
    player_number.style.visibility = 'visible';
    turn_display.textContent = '';
    displayWord_box.innerHTML = '';
    userNickname = [];
    standardWord = null;
    comparisonWord = null;
    word_input.readOnly = true;
    toggleResetBtn = true;
    turnCount = 0;
  },
  trueToggle : function(){
    player_number_btn.textContent = 'RESET';
    player_number.style.visibility = 'hidden';
    toggleResetBtn = false;
    stopGame = true;
  },
}

// 게임단어를 화면에 보이기
function displayWord(){
  const displayWord_box = document.getElementById('displayWord_box');
  if(stopGame){
    displayWord_box.textContent = 'Turn Word : ' + standardWord;
  }
}

// 랜덤 턴 알림
function noticeTurn(){
  if(stopGame){
    let randeomTurn = parseInt(Math.random() * checkSpaceName.length);
    turnCount += 1;
    turn_display.textContent = `${turnCount}turn : ${checkSpaceName[randeomTurn]}님!`;
  }
}

// 시작단어랑 다음 단어 첫글자라 맞는지 확인
function checkWord(){
  if(standardWord.charAt(standardWord.length - 1) === comparisonWord.charAt(0)){
    standardWord = comparisonWord;
  }else{
    alert('마! 니 틀릿다! \n 게임이 최기화 됩니다!');
    propertySet.falseToggle();
    stopGame = false;
  }
}

// 끝말잇기 게임시작 단어 넣기
function enterWord(event){
  event.preventDefault();
  (!standardWord) ? standardWord = word_input.value : (comparisonWord = word_input.value, checkWord());
  noticeTurn();
  displayWord();
  word_input.value = '';
}

// 게임 단어 넣어서 게임 시작
word_form.addEventListener('submit', enterWord);

// 게임단어 입력창 활성화 시키기
function openGame(){
  propertySet.bundle(word_input, null, 'game start', null, false);
  word_input.focus();
}

// 닉네임 화면에 나타내기
function showNickname(){
  propertySet.bundle(player_nickname_Box, '', null, checkSpaceName, null);
}

// 닉네임 모두 입력 여부 and 빈값 체크
function checkNickname(){
  checkSpaceName = userNickname.filter(function(element){
    return element.replace(/(\s*)/g, "");  // 빈공간 빼고 배열에 담는다.
  })
  if(checkSpaceName.length === userNickname.length){
    showNickname();
    openGame();
    turn_display.textContent = `Start Player : ${checkSpaceName[0]} 님!! 시작단어를 입력하세요!`;
  }else{
    userNickname = [];
    checkSpaceName = [];
    propertySet.bundle(word_input, null, '닉네임 전부 입력 시 열림!');
  }
}

// 닉네임 배열에 담기(닉네임 저장)
function saveNickname(){
  const nickname_input = document.querySelectorAll('#player_nicknameBox > input');
  nickname_input.forEach(function(input){
    userNickname.push(input.value);
  })
  checkNickname();
}

// 닉네임 입력란 생성하기
function makeNicknameInput(number){
  makeNicknameObj.createEl(number, player_nickname_Box);
}

// 게임 참가자 2명 이상인지 확인하기
function checkNumber(){
  const startNumber = Number(player_number.value);
  if(startNumber < 2 || isNaN(startNumber)){
    propertySet.bundle(player_nickname_Box,null,null,'2명 이상 플레이 가능! RESET버튼!');
  }else{
    makeNicknameInput(startNumber);
  }
}

// 게임 리셋 버튼
let toggleResetBtn = true;

function SwitchToggle(){
  (toggleResetBtn) ? (checkNumber(), propertySet.trueToggle()) : propertySet.falseToggle();
}

// 플레이어 인원 버튼
player_number_btn.addEventListener('click', SwitchToggle);

// 닉네임 저장 버튼
makeNicknameObj.btn.addEventListener('click', saveNickname);

'개발노트 > Code' 카테고리의 다른 글

[HTML/ CSS/ JS] input checkbox 다루기  (0) 2019.11.03
[HTML/ CSS/ JS] 단어장  (0) 2019.10.28
[HTML/ CSS/ JS] random 끝말잇기 게임  (0) 2019.10.07
(HTML / CSS / JS) 버튼 클릭 시 자동 합계(2019/9/4)(리팩토링 필요!)  (0) 2019.09.04
[HTML / CSS]input[type="text"]에 아이콘 넣기  (0) 2019.08.09
superpil
@superpil :: 주니어 개발자의 성장기

개발 기록

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!

개발노트/Code 추천 글
more
image

티스토리툴바