사전에 있지도 않은 모든 단어로도 다 된다.
그래서 병신같은 쿵쿵따다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>병신같은 쿵쿵따</title>
<style>
@font-face {
font-family: 'KBO-Dia-Gothic_bold';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/KBO-Dia-Gothic_bold.woff') format('woff');
font-weight: 700;
font-style: normal;
}
* {
font-family: KBO-Dia-Gothic_bold;
font-size: 70px;
font-weight: 700;
}
html, body {;
margin: 0;
padding: 0;
background-color: #1C2126;
color: white;
display: flex;
justify-content: center; /* 수평 가운데 */
align-items: center; /* 수직 가운데 */
min-height: 100vh;
}
#container {
display: flex;
flex-direction: column; /* 컨텐츠 세로 */
align-items: center;
vertical-align: center;
width: 1300px;
height: 300px;
margin: auto;
}
titleBox {
font-size: 120px;
color: white;
margin-top: -200px;
margin-bottom: 100px;
}
#inputValue {
text-align: center;
border-radius: 50px;
/*background-color: #1C2126;*/
background-color: #242b30;
border-style: none;
caret-color: white;
color: white;
}
#comment {
color: rgb(128, 128, 128);
font-size: 20px;
}
#inputValue:focus {
border-style: none;
outline: none;
}
</style>
</head>
<body>
<container id="container">
<titleBox>병신같은 쿵쿵따</titleBox>
<span id="comment"></span>
<span id="ment">몇 명이 참여하나요?</span>
<div id="player"></div>
<span id="word"></span>
<input type="text" id="inputValue" placeholder="플레이어 수 입력">
<button id="enter">입력</button>
</container>
<script>
const $order = document.querySelector('#order');
const $player = document.querySelector('#player');
const $button = document.querySelector('button');
const $input = document.querySelector('input');
const $word = document.querySelector('#word');
const $ment = document.querySelector('#ment');
const $comment = document.querySelector('#comment');
const $inputValue = document.querySelector('#inputValue')
const connect = new Audio('Connect.wav');
const audio = new Audio('Enter.wav');
const error = new Audio('Error.wav');
const audioCount = new Audio('Count.wav');
let word; // 제시어
let newWord; // 새로 입력한 단어
let gameStart = 0;
let number = 0 // 초기 플레이어 수
let turn = 1;
const game = () => {
if ($inputValue.value <= 1 && gameStart === 0) {
$ment.textContent = '쿵쿵따를 혼자서 한다구요?';
$inputValue.value = '';
setTimeout(() => {
$ment.textContent = '몇명이 참여하나요?';
}, 2000);
} else {
if (number === 0) {
number = parseInt($inputValue.value);
}
$inputValue.placeholder = '';
if (gameStart === 0) {
$ment.textContent = '좋아요, 게임 시작합니다 !';
$inputValue.value = '';
connect.play();
let count = 3;
let startCount = setInterval(() => {
$ment.textContent = count;
audioCount.play();
count--;
if (count === -1) {
clearInterval(startCount);
$ment.textContent = 'START!';
audio.play();
setTimeout(() => {
$ment.textContent = '제시어를 입력해주세요';
gameStart = 1;
}, 1000);
}
}, 1000);
} else {
if (!(word) && $inputValue.value.length === 3) {
word = $inputValue.value;
$ment.textContent = '제시어 : ' + word;
audio.play();
turn++;
$player.textContent = turn + ' 번째 플레이어';
} else if (!($inputValue.value.length === 3) || !($inputValue)) {
error.play();
$comment.textContent = '쿵쿵따는 세 글자로 하는거 아시죠?'
} else if (!(word[word.length - 1] === $inputValue.value[0])) {
error.play();
$comment.textContent = '잘못 입력 했습니다. 다시 입력해 주세요.'
} else {
audio.play();
word = $inputValue.value;
$ment.textContent = '제시어 : ' + word;
if (turn == number) {
turn = 1;
} else {
turn++;
}
$player.textContent = turn + ' 번째 플레이어';
}
$inputValue.value = '';
}
}
};
document.querySelector('#enter').addEventListener('click', game);
window.addEventListener('keydown', (event) => {
const key = event.key;
if (key === 'Enter') {
document.querySelector('#enter').click();
}
})
</script>
</body>
</html>'WEB' 카테고리의 다른 글
| 숫자 야구 게임 (0) | 2023.09.21 |
|---|---|
| 계산기 만들기 (0) | 2023.09.14 |
| HTML/CSS - NAVER 메인 따라 만들기 - 3. 최상단 버튼 생성 (0) | 2023.08.31 |
| HTML/CSS - NAVER 메인 따라 만들기 - 2.이미지 소스 추출 (0) | 2023.08.31 |
| HTML/CSS - NAVER 메인 따라 만들기 - 선엔딩, 소스코드 (0) | 2023.08.31 |
