Skip to content
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

[카드 뒤집기 미션 - 2단계] 곽가영 미션 제출합니다. #10

Open
wants to merge 4 commits into
base: gykwak03
Choose a base branch
from
Open

[카드 뒤집기 미션 - 2단계] 곽가영 미션 제출합니다. #10

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7a03765
{css 추가 및 카드 추가}
gykwak03 Jan 14, 2024
15d23bb
{테스트 추가 외의 다른 기능 요구 사항 만족}
gykwak03 Jan 14, 2024
8a092a8
{글씨체 변경}
gykwak03 Jan 14, 2024
c0042ff
{피드백 반영하였습니다!}
gykwak03 Jan 16, 2024
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
95 changes: 93 additions & 2 deletions index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,101 @@
.card {
width: 80px;
height: 100px;

background: #F9A825;
box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
border-radius: 3px;

font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 24px;

color: #FFFFFF;


}


#cards {
display: flex;
gap: 10px;

display: flex;
gap: 10px;
Comment on lines +23 to +24
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

중앙 배치가 되어있지 않은데 align-items과 justify 속성에 대해서 알아볼까요?

Copy link
Author

@gykwak03 gykwak03 Jan 16, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

align-items: center; 를 추가하면 가로축을 기준으로 카드들이 정렬하게 되고,
justify-content: center; 를 추가하면 세로축을 기준으로 가운데 정렬하게 됩니다!
코드에 삽입하겠습니다.


position: absolute;
width: 365px;
height: 100px;
left: 458px;
top: 165px;

}


#title1{
white-space: nowrap;
position: absolute;
width: 152px;
height: 24px;
left: 561px;
top: 97px;

font-family: 'Inter';
font-style: normal;
font-weight: 600;
font-size: 20px;
line-height: 24px;

color: #000000;

}

#rect{
position: absolute;
width: 410px;
height: 160px;
left: 435px;
top: 138px;

background: #FDD853;
border-radius: 10px;

}

.restart{

position: absolute;
width: 140px;
height: 48px;
left: 560px;
top: 200px;

background: rgba(255, 255, 255, 0.86);
border-radius: 10px;



}

.information{

white-space: nowrap;
position: absolute;
width: 82px;
height: 19px;
left: 599px;
top: 310px;

font-family: 'Inter';
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 19px;

color: #000000;




}

6 changes: 5 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,12 @@
</head>
<body>
<div id="app">
<h1>카드 뒤집기 1단계</h1>
<p id="title1">카드 뒤집기 2단계</p>
<div id = "rect"></div>
<div id="cards"></div>
<div id="information"></div>


</div>
</body>
</html>
53 changes: 49 additions & 4 deletions src/Card.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
class Card {
constructor(cardsContainer) {
let card = document.createElement("button"); //
card.classList.add("card"); //
card.textContent = "카드입니다";
let card = document.createElement("button");
card.classList.add("card");

this.card = card;
this.cardsContainer = cardsContainer;
Expand All @@ -14,4 +13,50 @@ class Card {
}
}

export default Card;
class GameManager {
constructor() {
this.chance = 2;
this.numbers = [0, 1, 2, 3];
this.gameOver = false;
this.information = document.createElement("p");
this.information.classList.add("information");
document.body.appendChild(this.information);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

document.body에 삽입시키는 것보다 특정 html요소(cards 등) 에 삽입하는게 구조적으로 좋답니다!

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 수정했습니다!

}

startGame(button, cardsContainer, randomNum, index) {
this.information.textContent = `남은 횟수 : ${this.chance} 회`;

button.addEventListener("click", () => {
if (this.gameOver) return;

if (randomNum === index) {
button.textContent = "당첨";
this.endGame("(성공!) 당첨되었습니다.");
} else {
button.textContent = "꽝";
this.chance = this.chance - 1;

if (this.chance === 0) {
this.endGame("(실패!) 게임이 종료되었습니다.");
} else {
this.startGame(button, cardsContainer, randomNum, index);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if else문이 중첩되다보면 가독성이 떨어집니다.
해당 메소드를 나누어 메소드의 기능을 분리시키는 게 좋을 것 같아요!

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 게임 종료 메시지를 밖으로 빼겠습니다!

}
}
});
}

endGame(message) {
this.gameOver = true;
this.information.textContent = message;

let restart = document.createElement("button");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

button과 div element의 차이점은 무엇일까요?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

button은 사용자가 클릭하면 동작하는 상호작용이 가능한 엘리먼트이고
div는 구간을 나누는 엘리먼트로써 어떠한 의미를 가지진 않지만 복합적인 컨테이너로 사용됩니다.

restart.textContent = "재시작";
restart.classList.add("restart");
restart.addEventListener("click", () => {
location.reload(true);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

버튼을 클릭했을 때 새로고침을 함으로써 재시작이 되도록 기능을 작성해주셨네요!
좋은 아이디어입니다. 하지만 제가 의도드린 사항은 start메소드를 다시 재사용해보는 것이었습니다. 시간이 된다면 다시 작성해보시는걸 추천드려요!

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

start 메소드를 end에서 재활용을 해보려 했는데 재시작과 변수 변경 등등이 오류가 나서.. 좀만 시간을 두고 다시 해보겠습니다 ㅠㅠ

});
document.body.appendChild(restart);
}
}

export { Card, GameManager };
25 changes: 9 additions & 16 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,19 @@
import "../index.css";
import Card from "./Card.js";
import { Card, GameManager } from "./Card.js";

let cardsContainer = document.querySelector("#cards");

const card1 = new Card(cardsContainer); // cardsContainer를 생성자에 전달
const card2 = new Card(cardsContainer); // cardsContainer를 생성자에 전달
const card3 = new Card(cardsContainer); // cardsContainer를 생성자에 전달
const card2 = new Card(cardsContainer);
const card3 = new Card(cardsContainer);
const card4 = new Card(cardsContainer);

const buttons = document.querySelectorAll("button");

const randomNum = Math.floor(Math.random() * 3);
const randomNum = Math.floor(Math.random() * 4);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

카드 갯수를 상수화하고 반복문을 사용해서 코드를 개선해볼까요?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 수정하겠습니다!


const numbers = [0, 1, 2];
numbers.forEach(function (number) {
buttons[number].addEventListener("click", () => {
cardsContainer.innerHTML = "";
const result = document.createElement("p"); // 새로운 <p> 엘리먼트 생성
if (randomNum == number) {
result.textContent = "정답입니다";
} else {
result.textContent = "꽝입니다";
}
cardsContainer.appendChild(result);
});
const gameManager = new GameManager();

buttons.forEach((button, index) => {
gameManager.startGame(button, cardsContainer, randomNum, index);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

카드 버튼에 이벤트를 주입하는 코드인데요 해당 기능은 gameManager 클래스가 소유하고 있는게 적절하다고 생각됩니다.
gameManager 클래스에서 buttons를 소유하고 해당 코드를 실행시키도록 해보는건 어떨까요?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

넵 새로운 함수 만들어서 해보겠습니다!

});