클론코딩
- 오늘은 자바스크립트 영상을 보면서 여태까지 배워왔던 것들을 토대로 게임을 만들었다. 총 50분짜리의 영상을 보면서 코드를 이해하고 리팩토링도 해보았다. 혼자서 만들기에는 어렵겠지만 다시 시도한다면 강의를 보기 전에 1/10 정도의 완성을 했다면 지금은 5/10 정도는 완성할 것 같다.
// html 파일
<!DOCTYPE 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" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css"
/>
<title>Score Keeper</title>
</head>
<body>
<section class="section">
<div class="container">
<div class="columns">
<div class="column is-half is-offset-one-quarter">
<div class="card">
<div class="card-image">
<figure class="image is-2by1">
<img
src="https://img.freepik.com/premium-photo/top-view-black-and-red-table-tennis-racket-and-a-white-ping-pong-ball-on-the-blue-ping-pong-table-with-a-bright-spotlight-two-table-tennis-paddle-is-a-sports-competition-equipment-for-indoor-exercise_536080-31.jpg"
alt=""
/>
</figure>
</div>
<header class="card-header">
<p class="card-header-title">Ping Pong Score Keeper</p>
</header>
<div class="card-content">
<div class="content">
<h1 class="title is-1">
<span id="p1Display">0</span> to
<span id="p2Display">0</span>
</h1>
<p class="subtitle">Use the buttons below to keep score</p>
<label for="playto" class="label is-large is-inline"
>Playing To</label
>
<div class="select is-rounded">
<select name="" id="playto">
<option value="3">3</option>
<option value="5">5</option>
<option value="7">7</option>
<option value="9">9</option>
<option value="11">11</option>
</select>
</div>
</div>
</div>
<footer class="card-footer">
<button
id="p1Button"
class="is-primary button card-footer-item is-large"
>
+1 Plater One
</button>
<button
id="p2Button"
class="is-info button card-footer-item is-large"
>
+1 Plater Two
</button>
<button
id="reset"
class="is-danger button card-footer-item is-large"
>
Reset
</button>
</footer>
</div>
</div>
</div>
</div>
</section>
<script src="refactoring.js"></script>
</body>
</html>// app.js 파일
const p1Button = document.querySelector("#p1Button");
const p2Button = document.querySelector("#p2Button");
const resetButton = document.querySelector("#reset");
const p1Display = document.querySelector("#p1Display");
const p2Display = document.querySelector("#p2Display");
const winningScoreSelect = document.querySelector("#playto");
let p1Score = 0;
let p2Score = 0;
let winningScore = 3;
let isGameOver = false;
p1Button.addEventListener("click", function () {
if (!isGameOver) {
// 게임 오버가 아니라면 스코어 1씩 더한다.
// p1Display에 p1Score 표시해준다.
p1Score += 1;
if (p1Score === winningScore) {
// 스코어가 승점과 같다면 게임오버를 true로 바꾼다.
isGameOver = true;
// 스코어가 승점과 같다면 p1,p2 Display에 ()안에 있는 class를 추가한다.
p1Display.classList.add("has-text-success");
p2Display.classList.add("has-text-danger");
// 스코어가 승점과 같다면 클릭이 되지 않도록 한다.
p1Button.disabled = true;
p2Button.disabled = true;
}
p1Display.textContent = p1Score;
}
});
p2Button.addEventListener("click", function () {
if (!isGameOver) {
p2Score += 1;
if (p2Score === winningScore) {
isGameOver = true;
p2Display.classList.add("has-text-success");
p1Display.classList.add("has-text-danger");
p1Button.disabled = true;
p2Button.disabled = true;
}
p2Display.textContent = p2Score;
}
});
winningScoreSelect.addEventListener("change", function () {
winningScore = parseInt(this.value); // value 값은 문자이므로 숫자로 바꿔준다.
reset(); // 옵션에서 숫자를 바꿔주면 reset 함수가 실행된다.
});
const reset = () => {
isGameOver = false;
p1Score = 0;
p2Score = 0;
p1Display.textContent = 0;
p2Display.textContent = 0;
// reset 버튼을 눌르면 p1,p2 Display에서 해당 class를 지워준다.
p1Display.classList.remove("has-text-success", "has-text-danger");
p2Display.classList.remove("has-text-success", "has-text-danger");
// reset 버튼을 누르면 다시 클릭 가능하도록 한다.
p1Button.disabled = false;
p2Button.disabled = false;
};
resetButton.addEventListener("click", reset);// refactoring.js
// p1과 p2를 객체에 담아준다.
const p1 = {
score: 0,
button: document.querySelector("#p1Button"),
display: document.querySelector("#p1Display"),
};
const p2 = {
score: 0,
button: document.querySelector("#p2Button"),
display: document.querySelector("#p2Display"),
};
const resetButton = document.querySelector("#reset");
const winningScoreSelect = document.querySelector("#playto");
let winningScore = 3;
let isGameOver = false;
function updateScores(player, opponent) {
if (!isGameOver) {
// player.score는 p1이 될수도, p2가 될수도 있다.
player.score += 1;
if (player.score === winningScore) {
// 스코어가 승점과 같다면 게임오버를 true로 바꾼다.
isGameOver = true;
// player이 p1이면 opponent는 p2이다. 아니라면 그 반대
player.display.classList.add("has-text-success");
opponent.display.classList.add("has-text-danger");
player.button.disabled = true;
opponent.button.disabled = true;
}
player.display.textContent = player.score;
}
}
p1.button.addEventListener("click", function () {
updateScores(p1, p2); // player = p1이고 opponent = p2이다.
});
p2.button.addEventListener("click", function () {
updateScores(p2, p1); // player = p2이고 opponent = p1이다.
});
winningScoreSelect.addEventListener("change", function () {
winningScore = parseInt(this.value); // value 값은 문자이므로 숫자로 바꿔준다.
reset(); // 옵션에서 숫자를 바꿔주면 reset 함수가 실행된다.
});
const reset = () => {
isGameOver = false;
for (let p of [p1, p2]) {
console.log(p);
p.score = 0;
p.display.textContent = 0;
p.display.classList.remove("has-text-success", "has-text-danger");
p.button.disabled = false;
}
};
resetButton.addEventListener("click", reset);
취준 개발자