Skip to content

Commit

Permalink
perf : koogkoogtta game improve function
Browse files Browse the repository at this point in the history
  • Loading branch information
@BoRamSon
BoRamSon committed Mar 3, 2024
1 parent 85ef75f commit 5ddb2c3
Show file tree
Hide file tree
Showing 5 changed files with 167 additions and 50 deletions.
25 changes: 18 additions & 7 deletions 30_html_Base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,19 +104,30 @@ <h1 id="bigTile"><a href="index.html">Welcome to My site~ I just Learn everythin



<!-- ======================================================== -->
<!-- 🟩 본문 -->

<div id="article">
<h2>◼︎ WEB 의 역사</h2>

<!-- ======================================================== -->
<!-- 🟩 이 주석 내부에 원하는 HTML 내용을 작성하세요! -->

<h1> 테스트 제목 1</h1>
<h2> 테스트 제목 2</h2>
<p>
● 1960년대 <br> 인터넷은 1960년대에 미국 국방부 산하의 고등 연구국에서 군사적인 목적으로 처음 개발되었습니다.
● 1960년대
<br>인터넷은 1960년대에 미국 국방부 산하의 고등 연구국에서 군사적인 목적으로 처음 개발되었습니다.
<br><br>
● 1989년 <br> 웹은 1989년 3월에 스위스와 프랑스 사이에 위치한 유럽 입자 물리 연구소 (CERN)의 컴퓨터과학자 팀 버너스-리 (Tim Berners-Lee, 영국 옥스퍼드대학 교수)가 만들었습니다123. 웹은 세계의 여러 대학과 연구기관에서 일하는 물리학자들 상호간의 신속한 정보교환과 공동연구를 위한 프로그램으로 고안되었습니다.
● 1989년
<br> 웹은 1989년 3월에 스위스와 프랑스 사이에 위치한 유럽 입자 물리 연구소 (CERN)의 컴퓨터과학자 팀 버너스-리 (Tim Berners-Lee, 영국 옥스퍼드대학 교수)가 만들었습니다123. 웹은 세계의 여러 대학과 연구기관에서 일하는 물리학자들 상호간의 신속한 정보교환과 공동연구를 위한 프로그램으로 고안되었습니다.
<br><br>
● 1990년대 <br> 우리가 흔히 "인터넷"이라고 하면 떠올리는 각종 웹사이트 등의 시초는 바로 1990년대 팀 버너스 리가 개발한 월드 와이드 웹 (World Wide Web)입니다.
● 1990년대
<br> 우리가 흔히 "인터넷"이라고 하면 떠올리는 각종 웹사이트 등의 시초는 바로 1990년대 팀 버너스 리가 개발한 월드 와이드 웹 (World Wide Web)입니다.
<br><br>
● 웹 시스템 아키텍처의 발전 <br> 웹 시스템 아키텍처는 시간이 지남에 따라 발전하였습니다. 초기에는 정적 웹이었으나, 사용자 상호작용이 증가함에 따라 동적 웹으로 발전하였습니다. 이후에는 SPA (Single Page Application)가 등장하였고, 이를 통해 프론트엔드와 백엔드가 구별되기 시작하였습니다.
● 웹 시스템 아키텍처의 발전
<br> 웹 시스템 아키텍처는 시간이 지남에 따라 발전하였습니다. 초기에는 정적 웹이었으나, 사용자 상호작용이 증가함에 따라 동적 웹으로 발전하였습니다. 이후에는 SPA (Single Page Application)가 등장하였고, 이를 통해 프론트엔드와 백엔드가 구별되기 시작하였습니다.
</p>

<!-- ======================================================== -->

</div>
</div>

Expand Down
15 changes: 7 additions & 8 deletions 511_[JS]word-relay.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,13 +15,13 @@

<body>
<!-- 🟩 01. [HTML] HTML로 베이스를 만들어줬습니다. -->

<div style="margin: 30px; font-size: 30px;"><a href="index.html">◼︎ HOME 으로 돌아가기</a></div>
<div style="margin: 20px; font-size: 25px;"><spen id="order">1</spen>번째 참가자</div>
<div style="margin: 20px; font-size: 20px">제시어:<spen id="word"></spen></div>
<input style="margin-left: 20px; margin-top: 0px; font-size: 20px" type='text' id="userInput" title="사용자 입력" placeholder="여기에 입력하세요">
<button style="margin-left: 0px; font-size: 20px">입력</button>

<div>
<div style="margin: 30px; font-size: 30px;"><a href="index.html">◼︎ HOME 으로 돌아가기</a></div>
<div style="margin: 20px; font-size: 25px;"><spen id="order">1</spen>번째 참가자</div>
<div style="margin: 20px; font-size: 20px">제시어:<spen id="word"></spen></div>
<input style="margin-left: 20px; margin-top: 0px; font-size: 20px" type='text' id="userInput" title="사용자 입력" placeholder="여기에 입력하세요">
<button style="margin-left: 0px; font-size: 20px">입력</button>
</div>

<!-- ============================================================== -->

Expand All @@ -34,7 +34,6 @@

const $order = document.querySelector('#order');


const $input = document.querySelector('input');
const $button = document.querySelector('button');
const $word = document.querySelector('#word');
Expand Down
22 changes: 22 additions & 0 deletions 512_[JS]koogkoogtta.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@



/* .howManyPeople {
} */

/* .whoIsTurn {
} */


.forMargin {
margin-left: 20px;
}

/* .presentWord*/


.inputOkButton {
margin-left: 5px;
}
37 changes: 9 additions & 28 deletions 512_[JS]koogkoogtta.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,30 +7,7 @@
<title>쿵쿵따 게임</title>

<link rel="stylesheet" href="40_css_Base.css">

<style>

/* .howManyPeople {

} */

/* .whoIsTurn {

} */


.forMargin {
margin-left: 20px;
}

/* .presentWord*/


.inputOkButton {
margin-left: 5px;
}

</style>
<link rel="stylesheet" href="512_[JS]koogkoogtta.css">


</head>
Expand Down Expand Up @@ -126,16 +103,20 @@ <h1 id="bigTile"><a href="index.html">Welcome to My site~ I just Learn everythin
</div>
<div><span class="whoIsTurn forMargin">1</span><span>번째 참가자 차례입니다.</span></div>
<br>
<div><span class="forMargin">마지막 입력 단어:</span><span class="presentWord"></span></div>
<div>
<span class="forMargin">마지막 입력 단어:</span>
<span class="presentWord"></span>
</div>
<br>
<div>
<span class="forMargin"><input type="text" id="userInput" title="사용자 입력" placeholder="여기에 입력하세요"></span>
<span class="forMargin"><input type="text" id="userInput" maxlength="3" title="사용자 입력" placeholder="여기에 입력하세요"></span>
<span><button class="inputOkBtn">완료</button></span>
<div class="forMargin" style="font-size: 12px;"> * 한글 3글자만 입력할 수 있습니다.</div>
</div>
<br>
<div>
<span class="reStartBtn forMargin"><button>재시작</button></span>
<span class="editPeopleBtn" style="margin-left: 10px;"><button>인원수정</button></span>
<span class="reStartBtn forMargin"><button>현재 게임 재시작</button></span>
<span class="allReSetBtn" style="margin-left: 10px;"><button>새로운 시작</button></span>
</div>

</div>
Expand Down
118 changes: 111 additions & 7 deletions 512_[JS]koogkoogtta.js
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,33 @@


// 📕 koogkoogtta.js


let howManyPeople = document.querySelector('.howManyPeople');

let whoIsTurn = document.querySelector('.whoIsTurn');

let presentWord = document.querySelector('.presentWord');

let userInput = document.querySelector('#userInput');

let confirmWord; //🆘 참 이 2개를 사용해서 한다는게.. 상식적으로 생각할 수 없는 부분이다.
let typingWord; //🆘 참 이 2개를 사용해서 한다는게.. 상식적으로 생각할 수 없는 부분이다.

let inputOkBtn = document.querySelector('.inputOkBtn');

let reStartBtn = document.querySelector('.reStartBtn');
let editPeopleBtn = document.querySelector('.editPeopleBtn');
let allReSetBtn = document.querySelector('.allReSetBtn');




// 🟩 prompt에 숫자만 입력하게 하는 방법은??
// const possOnlyNumber = (n) => {
// }
// 🆘 뭔가 function으로 만들어보려다가... 그냥 for문 잔머리를 굴려서 해봤습니다. 대단하다...
const numInputPromFc = () => {
for(let i = 0; i<=100; i++) {
const inputPromptText = window.prompt("참여할 인원은 몇 명입니까? (1~10의 숫자만 입력해주세요)");
const inputPrompt = Number(inputPromptText);
console.log(inputPrompt);
if(inputPromptText !== null){ //🔴대단하다... 근데 왜 prompt 취소버튼을 별도로 구분하는게 없을까... ㅠㅠ
if(inputPromptText !== null){ //🔴대단하다... 근데 왜 prompt 취소버튼을 별도로 구분하는게 없을까... ㅠㅠ
if(Number.isNaN(inputPrompt) || inputPrompt == "" || inputPrompt === 0 || inputPrompt > 10) {
console.log("ㄴ 숫자가 아니거나, 10보다 높은 숫자를 입력되었습니다.");
alert("숫자를 입력하지 않았거나, 10보다 높은 숫자를 입력했습니다. 다시 입력해주세요.");
Expand All @@ -37,7 +43,105 @@ const numInputPromFc = () => {
}
}

numInputPromFc();


const inputThreeTextFc = (event) => {
// 🆘 이 event가 제일 이해안되고 어려운 것 같습니다...
// 원래는 이벤트 행들러 함수는 자동으로 이벤트 객체를 매개변수로 받기는 하는데.
// 대충은 뭐 함수가 event를 받아서 그 event의 target의 value를 가져와서 그걸 typingWord에 넣는다는 것 같은데
typingWord = event.target.value;


// 🆘 input에 3글자 이상 입력하지 못하게 하는 방법은??? (🆘copliot의 힘을 빌림)
// 🆘 [응용] 한글만 입력될 수 있게 하는 방법
if (userInput.value.length > 3) {
userInput.value = userInput.value.slice(0, 3);
}

}



const nextTurnFc = () => {
confirmWord = typingWord.slice(0, 3);
presentWord.textContent = confirmWord.slice(0, 3);
console.log("\""+presentWord.textContent+"\"가 정상적으로 입력되었습니다.");
userInput.value = "";
userInput.focus();
if (Number(whoIsTurn.textContent) < Number(howManyPeople.textContent)) {
whoIsTurn.textContent = Number(whoIsTurn.textContent) + 1;
} else {
whoIsTurn.textContent = 1;
}

}



const reSetFc = () => {
let sadPerson = whoIsTurn.textContent;
alert("이 전 제시된 단어의 끝자리와 맞지 않아 게임이 종료되었습니다.\n벌칙을 수행할 사람은 "+sadPerson+"번째 참가자 입니다.");
confirmWord = "";
whoIsTurn.textContent = "1";
presentWord.textContent = "";
userInput.value = "";
userInput.focus();
// 🔥 게임을 더 이상 진행할 수 없어야 합니다!!!
}


const reStartFc = () => {
confirmWord = "";
whoIsTurn.textContent = "1";
presentWord.textContent = "";
userInput.value = "";
userInput.focus();
}


const allReSetFc = () => {
howManyPeople.textContent = "";
confirmWord = "";
whoIsTurn.textContent = "1";
presentWord.textContent = "";
userInput.value = "";
userInput.focus();
// 🔥 새로고침을 줘버려야겠다.
location.reload();
}


const inputOkBtnFc = () => {

console.log(confirmWord);

if (!confirmWord || confirmWord[confirmWord.length - 1] === typingWord[0]) {
nextTurnFc();
} else {
reSetFc();
}

}


numInputPromFc(); // 이건 언제나 그냥 실행되면 되지만,

userInput.addEventListener('input', inputThreeTextFc); // 이건 input에 작성되는 이벤트가 있을 때 실행되는거야.

// 🆘 enter키를 통한 입력을 가능하게 하는 코드입니다.
// (🆘copliot의 힘을 빌림) 근데 이거 틀렸음... 무조건 enter쳐버리니까 안되네
// userInput.addEventListener('keyup', (e) => {
// if(e.keyCode === 13) {
// inputOkBtn.click();
// }
// }
// );

inputOkBtn.addEventListener('click', inputOkBtnFc); // 이건 버튼클릭 이벤트가 있을 때 실행되는거야.

reStartBtn.addEventListener('click', reStartFc); // 이건 버튼클릭 이벤트가 있을 때 실행되는거야.

allReSetBtn.addEventListener('click', allReSetFc); // 이건 버튼클릭 이벤트가 있을 때 실행되는거야.



Expand Down

0 comments on commit 5ddb2c3

Please sign in to comment.