Skip to content

[이규호] HangMan #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
leegyuho-programer wants to merge 3 commits into
base: part-KH
Choose a base branch
from
Open

[이규호] HangMan #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
63fe966
복구중
leegyuho-programer Oct 24, 2023
aee6eaa
Feat: 기능 구현
leegyuho-programer Oct 24, 2023
b8b312a
Merge branch 'part-KH' into part-KH
leegyuho-programer Oct 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,9 @@
<h1 class="text-center">H A N G M A N</h1>
</div>
<div class="text-center">
<p id="wordSpotlight">The word to be guessed goes here</p>
<p id="wordSpotlight"></p>
<p id="life">Guess left: <span id="mistakes">5</span></p>
<div id="keyboard"></div>
<button class="btn btn-info" onClick="reset()">Reset</button>
<button type="button" class="game-button">Reset</button>
</div>
<script type="module" src="./src/index.js"></script>
</body>
Expand Down
146 changes: 53 additions & 93 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,28 @@
// 1. 알파벳 버튼을 누른다.
// 2-1. 단어에 있으면 위치에 들어가고 목숨이 줄어들지 않고 그림이 바뀌지 않는다.
// 2-2. 단어에 없으면 목숨이 줄어들고 그림이 그림이 바뀐다.
// 3. 그 단어가 비활성화 된다.
// 4. 계속 반복된다.
// 5-1. 답을 맞춘 경우 승리 메세지가 뜬다.
// 5-2. 답을 틀린 경우 패매 메시지가 뜬다.
// 6. 위의 메세지와 함께 다시 시작할건지 묻는 버튼이 생긴다.
let programming_languages = [
"python",
"javascript",
"mongodb",
"json",
"java",
"html",
"css",
"c",
"csharp",
"golang",
"kotlin",
"php",
"sql",
"ruby",
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 aaaa = {
answer : "",
life: 5,
guessed: [],
wordStatus: null,
} */

// //랜덤 단어 생성
// const createRandomWords = async () => {
Expand All @@ -53,73 +37,49 @@ function createElement(tagName) {
// // return word;
// };

const gameButton = document.querySelector(".game-button");
const mistakes = document.querySelector("#mistakes");

//랜덤으로 단어를 생성해주는 함수
function randomWord() {
answer =
programming_languages[
Math.floor(Math.random() * programming_languages.length)
];
answer = fruits[Math.floor(Math.random() * fruits.length)];
}

// function generateButtons() {
// let buttonsHTML = "abcdefghijklmnopqrstuvwxyz"
// .split("")
// .map(
// (letter) =>
// `
// <button
// class="btn btn-lg btn-primary m-2"
// id='` +
// letter +
// `'
// onClick="handleGuess('` +
// letter +
// `')"
// >
// ` +
// letter +
// `
// </button>
// `
// )
// .join("");

// document.getElementById("keyboard").innerHTML = buttonsHTML;
// }

//알파벳을 맞추면 보여주고 틀리면 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();
checkIfGameWon();
checkGameWin();
} else if (answer.indexOf(chosenLetter) === -1) {
//mistakes++;
//updateMistakes();
checkIfGameLost();
//updateHangmanPicture();
life--;
checkGameLose();
mistakes.innerHTML = `${life}`;
}
}

// function updateHangmanPicture() {
// document.getElementById("hangmanPic").src = "./images/" + mistakes + ".jpg";
// }
//초기화 하는 함수
//만들기

function checkIfGameWon() {
//정답을 맞췄을 때 실행되는 함수
function checkGameWin() {
if (wordStatus === answer) {
document.getElementById("keyboard").innerHTML = "You Won!!!";
alert("You Win!!");
}
}

// function checkIfGameLost() {
// if (mistakes === maxWrong) {
// document.getElementById("wordSpotlight").innerHTML =
// "The answer was: " + answer;
// document.getElementById("keyboard").innerHTML = "You Lost!!!";
// }
// }
//목숨이 0이 됐을 때 실행되는 함수
function checkGameLose() {
if (life === 0) {
alert("You Lose!!");
}
}

//답을 '_'로 바꿔주는 함수
function guessedWord() {
console.log(answer);
wordStatus = answer
.split("")
.map((letter) => (guessed.indexOf(letter) >= 0 ? letter : " _ "))
Expand All @@ -128,25 +88,25 @@ function guessedWord() {
document.getElementById("wordSpotlight").innerHTML = wordStatus;
}

// function updateMistakes() {
// document.getElementById("mistakes").innerHTML = mistakes;
// }

//리셋하는 함수
function reset() {
//mistakes = 0;
life = 5;
guessed = [];
//document.getElementById("hangmanPic").src = "./images/0.jpg";

randomWord();
guessedWord();
//updateMistakes();
//generateButtons();
}

//document.getElementById("maxWrong").innerHTML = maxWrong;
//이벤트를 넘겨주는 함수
function handleKeyDown(event) {
console.log(event);
handleGuess(event.key);
}

gameButton.addEventListener("click", reset);
window.addEventListener("keydown", handleKeyDown);

randomWord();
//generateButtons();
guessedWord();
// //1~2까지 랜덤 숫자 생성
// function randomNumber() {
Expand Down
4 changes: 3 additions & 1 deletion src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down