[HTML/ CSS/ JS] random 끝말잇기 게임
superpil
[HTML/ CSS/ JS] random 끝말잇기 게임개발노트/Code2019. 10. 7. 16:27@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.매 턴 마다 랜덤으로 순번이 정해진다.</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{
  background: rgba(9, 93, 65, 0.267);
}

 

 

-javascript

const player_nickname_Box = document.getElementById('player_nicknameBox');
const player_number = document.getElementById('player_number');
const player_number_btn = document.getElementById('player_number_btn');
const play_content = document.getElementById('displayWord_box');
const game_turn = document.getElementById('playerList_box');
const turn = document.getElementById('displayTurn_box');
const word_form = document.getElementById('word_form');
const word_input = document.getElementById('word_input');
let nickame = [];
let start_word;
let answer_word;
let player_reset = 0;
let nickame_reset = 0;

// 닉네임 전부 입력했을때 랜덤으로 턴 알림
function noticeTurn(){
  let count = parseInt(Math.random() * nickame.length);
  turn.textContent = nickame[count] + ' 님 턴 입니다!';
}
// 닉네임 설정시 화면에 닉네임 표시
function noticeNickname(inputLength){
  let nickname_span = document.createElement('span');
  if(nickame.length === inputLength.length){
    player_nickname_Box.innerHTML = '';
    nickname_span.textContent = 'player List : ' + nickame
    game_turn.appendChild(nickname_span);
    word_input.focus();
    noticeTurn();
  }else{
    nickname_span.textContent = '모든 닉네임을 입력하세요!';
    game_turn.appendChild(nickname_span);
  }
}
// 인원수 뽑아서 닉네임 설정
function displayNickname(nick_btn){
  let Nickname_value = player_nickname_Box.querySelectorAll('input');
  nick_btn.addEventListener('click',function(){
    Nickname_value.forEach(function(input, index){
      if(input.value === ""){
        word_input.readOnly = true;
        word_input.placeholder = '닉네임 입력 시 열림!';
        nickame = [];
        return false;
      }else{
        nickame.push(input.value);
        word_input.readOnly = false;
        word_input.placeholder = 'Game Start!';
        input.value = '';
        game_turn.innerHTML = '';
      }
    })
    noticeNickname(Nickname_value);
  })
}

function game_set_number(){
  let player_total = parseInt(player_number.value);
  if(player_reset === 0){
    if(player_total < 2 || isNaN(player_total)){
      alert('2명 이상 플레이 가능!');
      player_number.focus();
      player_number.value = '';
    }else{
      player_reset = 1;
      player_number_btn.textContent = 'Reset';
      player_number.readOnly = true;
      const player_name_btn = document.createElement('button');
      player_name_btn.textContent = '닉네임 설정 후 게임시작!';
      for(let i = 0; i < player_total; i++){
        var player_name = document.createElement('input');
        let player_text = document.createElement('span');
        player_text.textContent = i + 1 + 'player: ';
        player_nickname_Box.appendChild(player_text);
        player_nickname_Box.appendChild(player_name);
        player_nickname_Box.appendChild(player_name_btn);
      }
      displayNickname(player_name_btn);
      player_number.value = '';
    } 
  }else{
    player_number.readOnly = false;
    word_input.readOnly = true;
    word_input.placeholder = 'game close!';
    player_reset = 0;
    player_number_btn.textContent = '참가자 인원수';
    player_nickname_Box.innerHTML = '';
    game_turn.innerHTML = '';
    turn.textContent = '';
    play_content.innerHTML = '';
    start_word = undefined;
    answer_word = undefined;
    nickame = [];
  }
}

// 끝말잇기 단어 비교;
function formSubmit(event){
  event.preventDefault();
  answer_word = word_input.value;
  if(start_word === undefined){
    start_word = word_input.value
    play_content.textContent = start_word;
  }else if(start_word.charAt(start_word.length - 1) === answer_word.charAt(0)){
    let word_text = document.createElement('span');
    word_text.textContent = '-' + answer_word;
    play_content.appendChild(word_text);
    start_word = answer_word;
  }else{
    start_word = undefined;
    answer_word = undefined;
    play_content.innerHTML = '';
    word_input.readOnly = true;
    word_input.placeholder = 'game end';
    player_number.focus();
    alert('마! 니 틀릿다!');
  }
  word_input.value = '';
  noticeTurn();
}

word_form.addEventListener('submit',formSubmit);
player_number_btn.addEventListener('click',game_set_number);

 

 

https://github.com/pygmalion0909/-Word-chain-

 

pygmalion0909/-Word-chain-

Contribute to pygmalion0909/-Word-chain- development by creating an account on GitHub.

github.com

 

 

 

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

[HTML/ CSS/ JS] 단어장  (0) 2019.10.28
[HTML/ CSS/ JS] random 끝말잇기 게임 - 리팩토링  (0) 2019.10.18
(HTML / CSS / JS) 버튼 클릭 시 자동 합계(2019/9/4)(리팩토링 필요!)  (0) 2019.09.04
[HTML / CSS]input[type="text"]에 아이콘 넣기  (0) 2019.08.09
[HTML / CSS / JS] input / label 사용해서 이미지 슬라이드 만들기  (0) 2019.07.31
superpil
@superpil :: 주니어 개발자의 성장기

개발 기록

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

개발노트/Code 추천 글
more
image

티스토리툴바