diff --git a/index.css b/index.css index 07ba4e0..5250304 100644 --- a/index.css +++ b/index.css @@ -1,10 +1,47 @@ +body { + display: flex; + align-items: center; + justify-content: center; + height: 70vh; +} + +h1 { + text-align: center; +} + .card { /*Card.js에서 사용*/ width: 80px; height: 100px; border-radius: 3px; + background-color: orange; + border: none; + box-shadow: 0px 15px 8px -10px gray; + color: white; + font-weight: bolder; } #cards { display: flex; gap: 10px; + padding: 15px; + padding-top: 20px; + padding-bottom: 20px; + border-radius: 10px; + width: 350px; + background-color: rgb(255, 200, 3); + position: relative; } + +#contents { + text-align: center; +} + +#RestartBtn { + position: relative; + top: -80px; + left: 163px; + border-radius: 3px; + background-color: rgb(238, 230, 216); + border: none; + height: 25px; +} \ No newline at end of file diff --git a/index.html b/index.html index 1664d39..65bf3d2 100644 --- a/index.html +++ b/index.html @@ -6,8 +6,10 @@
-

카드 뒤집기 1단계

+

카드 뒤집기 2단계

+
+
diff --git a/src/Card.js b/src/Card.js index 219daac..86518f9 100644 --- a/src/Card.js +++ b/src/Card.js @@ -1,30 +1,41 @@ class Card { // 필드 값은 - constructor(isGoodCard) { + constructor(isGoodCard, cardClickHandler) { this.isGoodCard = isGoodCard; + this.isClicked = false; + this.cardClickHandler = cardClickHandler; + this.alreadyClicked = false; } //카드버튼 생성. 개수는? createCardBtn() { const btn = document.createElement('button'); - btn.className = "card"; //css - btn.innerText = "카드입니다"; + btn.className = "card"; //html -> css + //btn.innerText = "카드입니다"; - btn.addEventListener('click', this.WhenCardClick.bind(this)); + btn.addEventListener('click', () => { + if (!this.isClicked && !this.alreadyClicked) { + this.isClicked = true; + this.WhenCardClick(btn); + this.cardClickHandler(this); + } + }); return btn; } - WhenCardClick() { - //'당첨입니다' 혹은 '꽝입니다' 문구 생성. + WhenCardClick(btn) { + //if (this.alreadyClicked) return; //이미 고른 카드는 고르지 말고 종료해라. + //this.alreadyClicked = true; + //this.remainingChances--; //아 여기서 계속 2->1 로 줄어들어서 문제 발생. + + //'당첨!' 혹은 '꽝' 문구 생성. const clickMessage = this.createClickMessage(); - //alert(clickMessage); - const showMessage = document.getElementById('cards'); - showMessage.innerText = clickMessage; + btn.innerText = clickMessage; } createClickMessage() { - return this.isGoodCard ? '당첨입니다' : '꽝입니다'; //삼항연산자 사용. + return this.isGoodCard ? '당첨!' : '꽝'; //삼항연산자 사용. } } diff --git a/src/CardGame.js b/src/CardGame.js new file mode 100644 index 0000000..badb9c3 --- /dev/null +++ b/src/CardGame.js @@ -0,0 +1,93 @@ +import Shuffle from './Shuffle'; + +class CardGame { + constructor(cardCount, initialChances) { + this.cardClickHandler = this.cardClickHandler.bind(this); + this.shuffle = new Shuffle(cardCount, this.cardClickHandler); + this.initialChances = initialChances; + this.clickedCard = null; + } + + startGame() { + const underRestartBtn = document.getElementById('RestartButton'); + underRestartBtn.innerHTML = ''; + this.remainingChances = this.initialChances; + this.shuffle.shuffleCards(); + this.shuffle.displayCards(); + this.displayChances(); + } + + //1. Card.js에서 cardClickHandler() 안에 this안주고 이 메서드 사용해도 됨. + /*cardClickHandler() { + this.shuffle.cards.forEach(card => { + if (card.isClicked) { + if (card.isGoodCard) { + this.displayResult('(성공!) 게임이 종료되었습니다.') + this.createRestartBtn(); + } else if (!card.isGoodCard) { + this.giveExtraChance(); + } + } + }) + }*/ + + //2. + cardClickHandler(clickedCard) { + //console.log(this); + if (clickedCard.isClicked) { + if (clickedCard.isGoodCard) { + this.displayResult('(성공!) 게임이 종료되었습니다.') + this.createRestartBtn(); + } else if (!clickedCard.isGoodCard) { + this.giveExtraChance(); + } + } + } + + displayResult(result) { + const resultDiv = document.getElementById('contents'); + resultDiv.innerText = result; + } + + giveExtraChance() { + this.remainingChances--; + this.displayChances(); + if (this.remainingChances <= 0) { + this.displayResult('(실패!) 게임이 종료되었습니다.'); + this.createRestartBtn(); + } else { + this.displayChances(); + } + } + + displayChances() { + const chanceMessage = document.getElementById('contents'); + chanceMessage.innerText = `남은 횟수: ${this.remainingChances}`; + } + + createRestartBtn() { + const RestartBtn = document.createElement('button'); + RestartBtn.innerText = '재시작'; + RestartBtn.id = 'RestartBtn'; + + /*const undercards = document.getElementById('cards'); + undercards.innerHTML = ''; // + undercards.appendChild(RestartBtn);*/ + + const undercards = document.getElementById('RestartButton'); + undercards.innerHTML = ''; // + undercards.appendChild(RestartBtn); + + RestartBtn.addEventListener('click', this.WhenBtnClick.bind(this, RestartBtn)); + } + + WhenBtnClick() { + this.restartGame(); + } + + restartGame() { + this.startGame(); + } +} + +export default CardGame; \ No newline at end of file diff --git a/src/Shuffle.js b/src/Shuffle.js index 14792bd..8eeb15c 100644 --- a/src/Shuffle.js +++ b/src/Shuffle.js @@ -1,36 +1,44 @@ import Card from './Card'; class Shuffle { - constructor(cardCount) { - this.cardCount = cardCount; - } - - //카드 섞기 위한 사전작업_ 배열 생성. - generateCards() { - const cards = []; //배열 생성. - for (let i = 0; i < this.cardCount; i++) { - const isGoodCard = (i === 1); - const card = new Card(isGoodCard); //Card 클래스의 인스턴스 생성. - cards.push(card); - } - return cards; - } - - shuffleCards() { - this.cards = this.generateCards(); - for (let i = this.cards.length - 1; i > 0; i--) { //this.cards.length는 생성된 배열의 길이. - const j = Math.floor(Math.random() * (i + 1)); - [this.cards[i], this.cards[j]] = [this.cards[j], this.cards[i]]; //배열 순서 바꾸기 - } + constructor(cardCount, cardClickHandler) { + this.cardCount = cardCount; + this.cardClickHandler = cardClickHandler; + //this.initialChances = initialChances; + } + + //카드 섞기 위한 사전작업_ 배열 생성. + generateCards() { + const cards = []; //배열 생성. + for (let i = 0; i < this.cardCount; i++) { + const isGoodCard = (i === 1); + const card = new Card(isGoodCard, this.cardClickHandler); //Card 클래스의 인스턴스 생성. + cards.push(card); } - - displayCards() { - const undercards = document.getElementById('cards'); - this.cards.forEach(card => { //모든 배열 요소에 대해 수행. - const btn = card.createCardBtn(); - undercards.appendChild(btn); - }); + return cards; + } + + shuffleCards() { + this.cards = this.generateCards(); + for (let i = this.cards.length - 1; i > 0; i--) { //this.cards.length는 생성된 배열의 길이. + const j = Math.floor(Math.random() * (i + 1)); + [this.cards[i], this.cards[j]] = [this.cards[j], this.cards[i]]; //배열 순서 바꾸기 } } - export default Shuffle; \ No newline at end of file + displayCards() { + const undercards = document.getElementById('cards'); + undercards.innerHTML = ''; + this.cards.forEach(card => { //모든 배열 요소에 대해 수행. + const btn = card.createCardBtn(); + undercards.appendChild(btn); + }); + } + + /*displayInfo() { + const contents = document.getElementById('contents'); + contents.innerText = `남은 횟수: ${this.initialChances}`; + }*/ +} + +export default Shuffle; \ No newline at end of file diff --git a/src/index.js b/src/index.js index 947d175..a15fc7d 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,13 @@ import '../index.css'; -import Shuffle from './Shuffle'; +//import Shuffle from './Shuffle'; +import CardGame from './CardGame'; -const cardCount = 3; -const shuffle = new Shuffle(cardCount); +const cardCount = 4; +const initialChances = 2; +/*const shuffle = new Shuffle(cardCount, initialChances); shuffle.shuffleCards(); shuffle.displayCards(); +shuffle.displayInfo();*/ +const cardGame = new CardGame(cardCount, initialChances); +cardGame.startGame(); +