From 63fe966fa5678a8505f027ec4a06f2b85ddbab90 Mon Sep 17 00:00:00 2001 From: Gyuho Lee Date: Tue, 24 Oct 2023 16:45:32 +0900 Subject: [PATCH 1/2] =?UTF-8?q?=EB=B3=B5=EA=B5=AC=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 21 ++++++++++ src/index.js | 111 +++++++++++++++++++++++++++++++++++++++++++++++++ src/style.css | 59 ++++++++++++++++++++++++++ src/words.json | 13 ++++++ 4 files changed, 204 insertions(+) create mode 100644 index.html create mode 100644 src/index.js create mode 100644 src/style.css create mode 100644 src/words.json diff --git a/index.html b/index.html new file mode 100644 index 0000000..890002f --- /dev/null +++ b/index.html @@ -0,0 +1,21 @@ + + + + + + HANGMAN + + + + +
+

H A N G M A N

+
+
+

The word to be guessed goes here

+

Guess left: 5

+ +
+ + + diff --git a/src/index.js b/src/index.js new file mode 100644 index 0000000..68db487 --- /dev/null +++ b/src/index.js @@ -0,0 +1,111 @@ +let fruits = [ + "apple", + "banana", + "grape", + "pear", + "strawberry", + "lemon", + "melon", + "watermelon", + "tomato", + "orange", + "kiwi", + "pineapple", +]; + +let answer = ""; +let life = 5; +let guessed = []; +let wordStatus = null; + +function $(selector) { + return document.querySelector(selector); +} + +function addClass(element, className) { + element.classList.add(className); +} + +function createElement(tagName) { + return document.createElement(tagName); +} + +// //랜덤 단어 생성 +// const createRandomWords = async () => { +// const response = await fetch("src/words.json"); +// const result = await response.json(); +// const { randomWords } = result; + +// const randomNumber = Math.floor(Math.random() * randomWords.length); +// const { word } = randomWords[randomNumber]; +// // missionWord.inputWord = word; +// // console.log(word); +// // return word; +// }; + +function randomWord() { + answer = fruits[Math.floor(Math.random() * fruits.length)]; +} + +function handleGuess(chosenLetter) { + guessed.indexOf(chosenLetter) === -1 ? guessed.push(chosenLetter) : null; + document.getElementById(chosenLetter).setAttribute("disabled", true); + + if (answer.indexOf(chosenLetter) >= 0) { + guessedWord(); + checkGameWin(); + } else if (answer.indexOf(chosenLetter) === -1) { + life--; + checkGameLose(); + } +} + +function checkGameWin() { + if (wordStatus === answer) { + alert("You Win!!"); + } +} + +function checkGameLose() { + if (life === 0) { + alert("You Lose!!"); + } +} + +function guessedWord() { + wordStatus = answer + .split("") + .map((letter) => (guessed.indexOf(letter) >= 0 ? letter : " _ ")) + .join(""); + + document.getElementById("wordSpotlight").innerHTML = wordStatus; +} + +function reset() { + life = 5; + guessed = []; + + randomWord(); + guessedWord(); +} + +randomWord(); +guessedWord(); +// //1~2까지 랜덤 숫자 생성 +// function randomNumber() { +// return Math.floor(Math.random() * 2) + 1; +// } + +//랜덤 단어 생성 +// async function createRandomWords() { +// //const wordCount = randomNumber(); +// try { +// const response = await fetch("http://puzzle.mead.io/puzzle?wordCount=1"); +// const result = await response.json(); +// console.log(result); +// } catch (error) { +// console.error(error); +// } +// } + +// createRandomWords(); diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..07edee9 --- /dev/null +++ b/src/style.css @@ -0,0 +1,59 @@ +* { + margin: 0; + box-sizing: border-box; +} + +body { + margin: 0; + height: 100%; + background-color: #29252c; +} + +/* .root { + display: flex; +} */ + +.container { + margin-top: 300px; +} + +h1 { + display: flex; + justify-content: center; + font-size: 38px; + font-weight: 600; + color: #5b5860; +} + +.text-center { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +#wordSpotlight { + display: relative; + margin: 80px 0 40px 0; + background-color: #363239; + height: 100px; + width: 800px; + border-radius: 20px; +} + +p { + color: #5b5860; + margin-bottom: 80px; + font-size: 20px; +} + +button { + background-color: #5e427a; + color: #fff; + border-radius: 10px; + border: none; + width: 90px; + height: 40px; + font-size: 18px; + margin-top: 20px; +} diff --git a/src/words.json b/src/words.json new file mode 100644 index 0000000..3ffda64 --- /dev/null +++ b/src/words.json @@ -0,0 +1,13 @@ +{ + "randomWords": [ + { + "word": "STUDY CODING TEST" + }, + { + "word": "STUDY DEEP DIVE" + }, + { + "word": "STUDY FUNCTION" + } + ] +} From aee6eaa1b2599119c8a43cf2a43744c16013ab31 Mon Sep 17 00:00:00 2001 From: Gyuho Lee Date: Tue, 24 Oct 2023 23:27:14 +0900 Subject: [PATCH 2/2] =?UTF-8?q?Feat:=20=EA=B8=B0=EB=8A=A5=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 4 ++-- package-lock.json | 6 ++++++ src/index.js | 43 ++++++++++++++++++++++++++++++------------- src/style.css | 4 +++- 4 files changed, 41 insertions(+), 16 deletions(-) create mode 100644 package-lock.json diff --git a/index.html b/index.html index 890002f..cf155bb 100644 --- a/index.html +++ b/index.html @@ -12,9 +12,9 @@

H A N G M A N

-

The word to be guessed goes here

+

Guess left: 5

- +
diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..8b14c2d --- /dev/null +++ b/package-lock.json @@ -0,0 +1,6 @@ +{ + "name": "vanillaJSproject", + "lockfileVersion": 3, + "requires": true, + "packages": {} +} diff --git a/src/index.js b/src/index.js index 68db487..d864e47 100644 --- a/src/index.js +++ b/src/index.js @@ -17,18 +17,12 @@ let answer = ""; let life = 5; let guessed = []; let wordStatus = null; - -function $(selector) { - return document.querySelector(selector); -} - -function addClass(element, className) { - element.classList.add(className); -} - -function createElement(tagName) { - return document.createElement(tagName); -} +/* const aaaa = { + answer : "", + life: 5, + guessed: [], + wordStatus: null, +} */ // //랜덤 단어 생성 // const createRandomWords = async () => { @@ -43,13 +37,18 @@ function createElement(tagName) { // // return word; // }; +const gameButton = document.querySelector(".game-button"); +const mistakes = document.querySelector("#mistakes"); + +//랜덤으로 단어를 생성해주는 함수 function randomWord() { answer = fruits[Math.floor(Math.random() * fruits.length)]; } +//알파벳을 맞추면 보여주고 틀리면 life를 깎는 함수 function handleGuess(chosenLetter) { guessed.indexOf(chosenLetter) === -1 ? guessed.push(chosenLetter) : null; - document.getElementById(chosenLetter).setAttribute("disabled", true); + console.log(guessed); if (answer.indexOf(chosenLetter) >= 0) { guessedWord(); @@ -57,22 +56,30 @@ function handleGuess(chosenLetter) { } else if (answer.indexOf(chosenLetter) === -1) { life--; checkGameLose(); + mistakes.innerHTML = `${life}`; } } +//초기화 하는 함수 +//만들기 + +//정답을 맞췄을 때 실행되는 함수 function checkGameWin() { if (wordStatus === answer) { alert("You Win!!"); } } +//목숨이 0이 됐을 때 실행되는 함수 function checkGameLose() { if (life === 0) { alert("You Lose!!"); } } +//답을 '_'로 바꿔주는 함수 function guessedWord() { + console.log(answer); wordStatus = answer .split("") .map((letter) => (guessed.indexOf(letter) >= 0 ? letter : " _ ")) @@ -81,6 +88,7 @@ function guessedWord() { document.getElementById("wordSpotlight").innerHTML = wordStatus; } +//리셋하는 함수 function reset() { life = 5; guessed = []; @@ -89,6 +97,15 @@ function reset() { guessedWord(); } +//이벤트를 넘겨주는 함수 +function handleKeyDown(event) { + console.log(event); + handleGuess(event.key); +} + +gameButton.addEventListener("click", reset); +window.addEventListener("keydown", handleKeyDown); + randomWord(); guessedWord(); // //1~2까지 랜덤 숫자 생성 diff --git a/src/style.css b/src/style.css index 07edee9..544bd3a 100644 --- a/src/style.css +++ b/src/style.css @@ -33,12 +33,14 @@ h1 { } #wordSpotlight { - display: relative; + display: flex; margin: 80px 0 40px 0; background-color: #363239; height: 100px; width: 800px; border-radius: 20px; + justify-content: center; + align-items: center; } p {