🔍 완성 화면
🔍 HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/412379eca8.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="style.css">
<title>타이핑 게임</title>
</head>
<body>
<div class="settings show" id="settings">
<div>
<label for="difficulty">Difficulty</label>
<select id="difficulty" class="difficulty">
<option value="easy">Easy</option>
<option value="medium">Medium</option>
<option value="hard">Hard</option>
</select>
</div>
</div>
<div class="container">
<h2>🧑💻 타이핑 게임 🧑💻</h2>
<p class="time-container">남은 시간 : <span id="time"></span></p>
<p class="score-container">점수: <span id="score">0</span></p>
<small>제시어 : </small>
<h1 id="word"></h1>
<input id="wordInput" type="text" placeholder="단어를 입력하세요">
</div>
<div class="end-game-container" id="end-game-container">
</div>
<button id="settings-btn" class="settings-btn">
<i class="fa-solid fa-gear"></i>
</button>
<script src="main.js"></script>
</body>
</html>🔍 CSS
* {
box-sizing: border-box;
}
body {
margin: 0;
background-color: rgb(71, 71, 121);
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
height: 100vh;
position: relative;
}
.settings {
position: absolute;
top: 0;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
padding: 10px;
border: none;
color: #fff;
background-color: rgb(82, 82, 132);
transform: translateY(-100px);
transition: transform 0.2s ease-in;
}
.settings.show{
transform: translateY(0);
transition: transform 0.2s ease-in;
}
.settings label {
font-size: 20px;
}
.difficulty {
width: 200px;
margin: 15px;
padding: 5px;
border-radius: 5px;
}
.container {
width: 70%;
display: flex;
height: 300px;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
background-color: rgb(91, 91, 143);
box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.3);
position: relative;
}
.container h2 {
width: 90%;
text-align: center;
background-color: rgb(53, 53, 84);
padding: 10px;
border-radius: 10px;
position: absolute;
<top: 0;
}
.container small{
text-align: center;
position: absolute;
left: 190;
top: 130;
}
.container h1{
position: absolute;
top: 150;
}
.container input{
padding: 10px;
border-radius: 10px;
border: none;
position: absolute;
bottom: 30;
left: 70;
width: 70%;
text-align: center;
}
.container input:focus{
outline: 0;
}
.time-container {
position: absolute;
top: 70;
left: 30;
}
.score-container {
position: absolute;
top: 70;
right: 30;
}
.settings-btn{
position: absolute;
bottom: 30;
left: 30;
padding: 15px;
border-radius: 10px;
cursor: pointer;
}
.end-game-container{
display: none;
flex-direction: column;
background-color: rgb(91, 91, 143);
box-shadow: 1px 3px 10px rgba(0, 0, 0, 0.3);
border: none;
width: 70%;
justify-content: center;
align-content: center;
padding: 10px;
color: #fff;
z-index: 1;
position: absolute;
height: 300px;
}
.end-game-container h1{
text-align: center;
margin: 30px;
}
.end-game-container p{
text-align: center;
margin: 30px;
}
.buttonContainer{
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
}
.buttonContainer button{
padding: 10px;
cursor: pointer;
border-radius: 10px;
border: none;
}🔍 자바스크립트
const settingBtn = document.getElementById("settings-btn");
const settings = document.getElementById("settings");
const endGameContainer = document.getElementById("end-game-container");
const word = document.getElementById("word");
const wordInput = document.getElementById("wordInput");
const timeEl = document.getElementById("time");
const scoreEl = document.getElementById("score");
const difficulty = document.getElementById("difficulty");
let time = 10;
let score = 0;
// 랜덤 단어 만들기
const randomWordGenerator = async () => {
const res = await fetch(`https://random-word-api.herokuapp.com/word`);
const data = await res.json();
const randomWord = data[0];
addWordToDOM(randomWord);
};
// 브라우저에 띄우기
const addWordToDOM = (randomWord) => {
word.textContent = randomWord;
};
// 모달창 띄우기
const showDifficultyModal = () => {
settings.classList.toggle("show");
};
// 점수 업데이트
const updateScore = () => {
score++;
scoreEl.textContent = `${score}개`;
};
// 시간 업데이트
const addTime = () => {
if (difficulty.value === "easy") {
time += 5;
} else if (difficulty.value === "medium") {
time += 3;
} else if (difficulty.value === "easy") {
time += 2;
}
};
// 답 체크
const checkAnswer = (e) => {
if (e.target.value == word.textContent) {
randomWordGenerator();
updateScore();
addTime();
e.target.value = "";
} else {
return null;
}
};
// 시간 초과 됐을때
const updateTime = () => {
timeEl.innerText = `${time}초`;
time--;
if (time < 0) {
endGameContainer.innerHTML = ` <h1>시간 초과</h1>
<p>최종 점수는 ${score}점 입니다.</p>
<div class="buttonContainer"><button>다시 시작</button></div>`;
endGameContainer.style.display = "flex";
}
};
randomWordGenerator();
setInterval(() => {
updateTime();
}, 1000);
settingBtn.addEventListener("click", showDifficultyModal);
wordInput.addEventListener("input", checkAnswer);다시 시작 버튼을 클릭했을때, 다시 게임이 시작되는 기능을 어떻게 구현할까 고민했었는데,
window.reload() 기능을 통해서 페이지가 다시 새로고침 되는 기능을 구현할 수 있었다.
https://brgndy.me/ 로 옮기는 중입니다 :)
0개의 댓글
