LIN-KHU · Jan 6, 2024 · Jan 7, 2024 · Jan 7, 2024 · Jan 8, 2024 · Jan 14, 2024
Showing with 243 additions and 13 deletions.

+8 −0 .prettierrc.json

+15 −0 .vscode/launch.json

+98 −2 index.css

+5 −1 index.html

+29 −0 package-lock.json

+9 −4 package.json

+67 −3 src/Card.js

+12 −3 src/index.js
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+    "editor.formatOnSave": true,
+    "prettier.semi": false,
+    "prettier.javascriptEnable" : ["javascript", "javascriptreact"],
+    "prettier.printWidth" : 2,
+    "prettier.useTabs": false,
+    "prettier.tabWidth": 4
+}
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -0,0 +1,15 @@
+{
+    // IntelliSense를 사용하여 가능한 특성에 대해 알아보세요.
+    // 기존 특성에 대한 설명을 보려면 가리킵니다.
+    // 자세한 내용을 보려면 https://go.microsoft.com/fwlink/?linkid=830387을(를) 방문하세요.
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "localhost에 대해 Chrome 시작",
+            "url": "http://localhost:8080",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
diff --git 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
@@ -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>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,13 +24,18 @@
     "@types/jest": "^29.2.5",
     "babel-loader": "^9.1.2",
     "clean-webpack-plugin": "^4.0.0",
-    "html-webpack-plugin": "^5.5.0",
     "css-loader": "^6.6.0",
+    "cypress": "^13.1.0",
+    "html-webpack-plugin": "^5.5.0",
     "style-loader": "^3.3.1",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "^4.7.4",
-    "cypress": "^13.1.0"
+    "webpack-dev-server": "^4.7.4"
   },
-  "homepage": "https://github.com/tkdrb12/card-game-mission#readme"
+  "homepage": "https://github.com/tkdrb12/card-game-mission#readme",
+  "dependencies": {
+    "-": "0.0.1",
+    "prettier": "3.1.1",
+    "save-dev": "0.0.1-security"
+  }
 }
diff --git a/src/Card.js b/src/Card.js
@@ -1,6 +1,70 @@
 class Card {
-  // 필드 값은
-  constructor() {}
+  constructor(cardsContainer) {
+    let card = document.createElement("button");
+    card.classList.add("card");
+
+    this.card = card;
+    this.cardsContainer = cardsContainer;
+    this.render();
+  }
+
+  render() {
+    this.cardsContainer.appendChild(this.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 default Card;
+export { Card, GameManager };
diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,13 @@
-import '../index.css';
+import "../index.css";
+import { Card, GameManager } from "./Card.js";
 
-// 실제 실행 코드 작성
-// ex)cardGame.start()
+let cardsContainer = document.querySelector("#cards");
+
+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();
+
+gameManager.initButtons(randomNum);