유데미에서 Brad Traversy의 20 Web Projects With Vanilla JavaScript
를 하나씩 직접 코딩해보면서 정리하기 위한 글이다.
데모 페이지
Hangman (vanillawebprojects.com)
코드 링크
github.com/rshak8912/20-Web-Projects
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>행맨</title>
</head>
<body>
<h1>행맨</h1>
<p>Find the hidden word - Enter a letter</p>
<div class="game-container">
<!-- Rod -->
<svg height="250" width="200" class="figure-container">
<line x1="60" y1="20" x2="140" y2="20"></line>
<line x1="140" y1="20" x2="140" y2="50"></line>
<line x1="60" y1="20" x2="60" y2="230"></line>
<line x1="20" y1="230" x2="100" y2="230"></line>
<!-- 머리 -->
<circle cx="140" cy="70" r="20" class="figure-part"></circle>
<!-- 몸통-->
<line x1="140" y1="90" x2="140" y2="150" class="figure-part" />
<!-- 팔 --->
<line x1="140" y1="120" x2="120" y2="100" class="figure-part"></line>
<line x1="140" y1="120" x2="160" y2="100" class="figure-part"></line>
<!-- 다리 --->
<line x1="140" y1="150" x2="120" y2="180" class="figure-part"></line>
<line x1="140" y1="150" x2="160" y2="180" class="figure-part"></line>
</svg>
<div class="wrong-letters-container">
<div id="wrong-letters"></div>
</div>
<div class="word" id="word"></div>
</div>
<div class="popup-container" id="popup-container">
<div class="popup">
<h2 id="final-message"></h2>
<button id="play-button">Play Again</button>
</div>
</div>
<!-- Notification-->
<div class="notification-container" id="notification-container">
<p>You have already entered this letter</p>
</div>
<script src="script.js"></script>
</body>
</html>
style.css
* {
box-sizing: border-box;
}
body {
background-color: #34495e;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
height: 80vh;
margin:0;
overflow: hidden;
}
h1 {
margin: 20px 0 0;
}
.game-container {
padding: 20px 30px;
position: relative;
margin: auto;
height: 350px;
width: 450px;
}
.figure-container {
fill: transparent;
stroke: #fff;
stroke-width: 4px;
stroke-linecap: round;
}
.figure-part {
display: none;
}
.wrong-letters-container {
position: absolute;
top: 20px;
right: 20px;
display: flex;
flex-direction: column;
text-align: right;
}
.wrong-letters-container p {
margin: 0 0 5px;
}
.wrong-letters-container span {
font-size: 24px;
}
.word {
display: flex;
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
}
.letter {
border-bottom: 3px solid #2980b9;
display: inline-flex;
font-size: 30px;
align-items: center;
justify-content: center;
margin: 0 3px;
height: 50px;
width: 20px;
}
.popup-container {
background-color: rgba(0, 0, 0, 0.3);
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
/*display: flex;*/
display: none;
align-items: center;
justify-content: center;
}
.popup {
background: #2980b9;
border-radius: 5px;
box-shadow: 0 15px 10px 3px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align:center;
}
.popup button {
cursor: pointer;
background-color: #fff;
color:#2980b9;
border: 0;
margin-top: 20px;
padding: 12px 20px;
font-size: 16px;
}
.popup button:active {
transform: scale(0.98);
}
.popup button:focus {
outline: 0;
}
.notification-container {
background-color: rgba(0, 0, 0, 0.3);
border-radius: 10px 10px 0 0;
padding: 15px 20px;
position: absolute;
bottom: -50px;
transition: transform 0.3s ease-in-out;
}
.notification-container p {
margin: 0;
}
.notification-container.show {
transform: translateY(-50px);
}
script.js
const wordEl = document.getElementById('word');
const wrongLettersEl = document.getElementById('wrong-letters');
const playAgainBtn = document.getElementById('play-button');
const popup = document.getElementById('popup-container');
const notification = document.getElementById('notification-container');
const finalMessage = document.getElementById('final-message');
const figureParts = document.querySelectorAll('.figure-part');
const words = ['application', 'programming', 'interface', 'wizard'];
let selectedWord = words[Math.floor(Math.random() * words.length)];
const correctLetters = ['w','i','z'];
const wrongLetters = [];
// Show hidden word
const displayWord = () => {
wordEl.innerHTML = `
${selectedWord
.split('')
.map(letter => `<span class="letter">${correctLetters.includes(letter) ? letter: ''}</span> `)
.join('')}`;
const innerWord = wordEl.innerText.replace(/\n/g, '');
if (innerWord === selectedWord) {
finalMessage.innerText = '축하합니다😀';
popup.style.display='flex';
}
}
// Update the wrong letters
const updateWrongLettersEl = () => {
// Display wrong letters
wrongLettersEl.innerHTML = `${wrongLetters.length > 0 ? '<p>Wrong</p>' : ''}
${wrongLetters.map(letter=> `<span>${letter}</span>`)}`;
// Display parts
figureParts.forEach((part, index) => {
const errors = wrongLetters.length;
if (index < errors) {
part.style.display = 'block';
} else {
part.style.display = 'none';
}
});
// Check if lost
if (wrongLetters.length === figureParts.length) {
finalMessage.innerText = '패배하였습니다. 😂';
popup.style.display = 'flex';
}
}
const showNotification = () => {
notification.classList.add('show');
setTimeout(() => {
notification.classList.remove('show');
}, 2000);
}
// Keydown letter press
window.addEventListener('keydown', e => {
///console.log(e.key);
if (e.keyCode >= 65 && e.keyCode <= 90) {
const letter = e.key;
if (selectedWord.includes(letter)) {
if (!correctLetters.includes(letter)) {
correctLetters.push(letter);
displayWord();
} else {
showNotification();
}
} else {
if (!wrongLetters.includes(letter)) {
wrongLetters.push(letter);
updateWrongLettersEl();
} else {
showNotification();
}
}
}
});
// Restart game and play again
playAgainBtn.addEventListener('click', () => {
// Empty arrays
correctLetters.splice(0);
wrongLetters.splice(0);
selectedWord = words[Math.floor(Math.random() * words.length)];
displayWord();
updateWrongLettersEl();
popup.style.display = 'none';
})
displayWord();
강의를 통해 배운 점(생각, 내용 정리)
- SVG(Scalable Vector Graphics) 태그가 무엇인지 알게 되었고, 대략적인 사용법을 익힐 수 있었다.
- transform(위치 이동 관련) 속성 및 transition(효과 입히기) 속성을 사용해 볼 수 있었다.
'HTML&CSS&Javascript' 카테고리의 다른 글
| [Udemy]20 Web Projects With Vanilla JavaScript -Project#9 (0) | 2020.12.29 |
|---|---|
| [Udemy]20 Web Projects With Vanilla JavaScript -Project#8 (0) | 2020.12.13 |
| [Udemy]20 Web Projects With Vanilla JavaScript -Project#6 (0) | 2020.12.11 |
| [Udemy]20 Web Projects With Vanilla JavaScript -Project#5 (0) | 2020.12.10 |
| [Udemy]20 Web Projects With Vanilla JavaScript -Project#4 (0) | 2020.12.09 |