diff --git a/index.css b/index.css index 494ffcb..87f17ef 100644 --- a/index.css +++ b/index.css @@ -1,10 +1,106 @@ .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; + +position: absolute; +width: 365px; +height: 100px; +left: 458px; +top: 165px; +align-items: center; +justify-content: center; + +} + + +#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; + +top: 150px; +justify-content: center; + + +font-family: 'Inter'; +font-style: normal; +font-weight: 400; +font-size: 16px; +line-height: 19px; + +color: #000000; + + + + +} + diff --git a/index.html b/index.html index 1664d39..c6d06cd 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,12 @@
-

카드 뒤집기 1단계

+

카드 뒤집기 2단계

+
+
+ +
diff --git a/src/Card.js b/src/Card.js index 9c91fb2..cf2d5c1 100644 --- a/src/Card.js +++ b/src/Card.js @@ -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; @@ -10,8 +9,62 @@ class Card { } render() { - this.cardsContainer.appendChild(this.card); //부모 노드와 자식 노드 연결 + this.cardsContainer.appendChild(this.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"); + this.cardsContainer = document.getElementById("cards"); + this.cardsContainer.appendChild(this.information); + } + + initButtons(randomNum) { + const buttons = document.querySelectorAll("button"); + buttons.forEach((button, index) => { + this.startGame(button, randomNum, index); + }); + } + + startGame(button, randomNum, index) { + this.information.textContent = `남은 횟수 : ${this.chance} 회`; + + button.addEventListener("click", () => { + if (this.gameOver) return; + + if (randomNum === index) { + button.textContent = "당첨"; + this.endGame("(성공!) 당첨되었습니다.", randomNum); + } else { + button.textContent = "꽝"; + this.chance = this.chance - 1; + + if (this.chance === 0) { + this.endGame("(실패!) 게임이 종료되었습니다.", randomNum); + } else { + this.startGame(button, this.cardsContainer, randomNum, index); + } + } + }); + } + + endGame(message, randomNum) { + this.gameOver = true; + this.information.textContent = message; + + let restart = document.createElement("button"); + restart.textContent = "재시작"; + restart.classList.add("restart"); + document.body.appendChild(restart); + restart.addEventListener("click", () => { + location.reload(true); + }); + } +} + +export { Card, GameManager }; diff --git a/src/index.js b/src/index.js index 59cce36..2b14660 100644 --- a/src/index.js +++ b/src/index.js @@ -1,26 +1,13 @@ 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를 생성자에 전달 +var cards = {}; +for (var i = 1; i < 5; i++) { + cards[`card${i}`] = new Card(cardsContainer); +} +var randomNum = Math.floor(Math.random() * 4); +const gameManager = new GameManager(); -const buttons = document.querySelectorAll("button"); - -const randomNum = Math.floor(Math.random() * 3); - -const numbers = [0, 1, 2]; -numbers.forEach(function (number) { - buttons[number].addEventListener("click", () => { - cardsContainer.innerHTML = ""; - const result = document.createElement("p"); // 새로운

엘리먼트 생성 - if (randomNum == number) { - result.textContent = "정답입니다"; - } else { - result.textContent = "꽝입니다"; - } - cardsContainer.appendChild(result); - }); -}); +gameManager.initButtons(randomNum);