PROJECT 04 >>>
쿵쿵따게임 만들기
<!--
1. PROJECT 03 에서 만들었던 끝말잇기 게임에서 한단계 발전하여,
1) 인풋값을 세글자로 제한하여 검사하는 조건과
2) 초기 prompt 창에서 '취소' 버튼을 눌렀을 때의 실행조건이 추가되었다.
- * prompt 취소를 누르는 경우 null값을 반환한다.
- 따라서, if문의 괄호 안에는 prompt의 입력값이 저장된 변수를 지정하고, 정상적으로 실행될 코드를 등록하면된다.
else문에는 코드가 실행되지 않도록 지정한다.
2. input의 value가 자꾸 null이거나 undefined 로 떠서 한 한시간동안 잡고있었는데, 변수를 생성해서 저장하니 어찌 풀렸다..? 에러가 떴을 때 그 이유를 분석하고 해결방법을 자세히 쓰고싶지만, 에러뜨면 고치기 바쁘다..ㅠㅠ
3. $order.textContent는 미처 생각하지 못하고 이전 프로젝트 코드에서 복붙함.
코딩할때 여차하면 디테일을 놓치기 십상인것 같다. 아니면 그냥 내가 디테일까지 신경쓸 실력이 안되는지도.
-->
# 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>쿵쿵따!</title>
</head>
<body>
<h2>공포의 쿵쿵따 게임!</h2>
<div>제시어: <span id="word"></span></div>
<div><span id="order">1</span>번째 참가자: <input type="text">
<button>쿵쿵따!</button>
</div>
<script>
var number = prompt('쿵쿵따 게임 START! >> 몇 명이 참가합니까?');
if (number) {
const $order = document.querySelector('#order');
const $btn = document.querySelector('button');
const $input = document.querySelector('input');
const $word = document.querySelector('#word');
let word; // 제시어
let newWord; // 인풋에 입력한 값
const onInput = (event) => {
newWord = event.target.value;
}
const btnKKT = () => {
if (newWord.length === 3 && (!word|| word[word.length-1] === newWord[0])) { // 세글자이면서 끝말을 잇는가?
alert("쿵쿵따!");
word = newWord;
$word.textContent = word;
const order = Number($order.textContent);
if (order+1 > number) {
$order.textContent =1;
} else {
$order.textContent = order +1;
}
} else {
alert('세 글자가 아닙니다!');
}
$input.value = "";
$input.focus();
}
$btn.addEventListener('click',btnKKT);
$input.addEventListener('input',onInput);
} else {
alert("쿵쿵따 게임 멈춰!");
}
</script>
</body>
</html># 출처
Let's Get IT 자바스크립트 프로그래밍
Self Check - 쿵쿵따게임 만들기
Let's Get IT 자바스크립트 프로그래밍: Self Check
thebook.io
'MINI PROJECT > JavaScript' 카테고리의 다른 글
| 대출계산기 (0) | 2021.09.05 |
|---|---|
| 명언제조기 (0) | 2021.08.22 |
| 끝말잇기 게임을 만들었다. (0) | 2021.08.18 |
| 무작위로 HEX 코드를 생성해 배경색으로 설정하기 (0) | 2021.08.16 |
| 버튼을 클릭하면 배경색이 바뀌도록 설정하기 (0) | 2021.08.16 |
댓글