kakaotrack · yunrry · Dec 10, 2023 · Dec 20, 2023
diff --git a/.DS_Store b/.DS_Store
diff --git a/kimyunyeong/app.js b/kimyunyeong/app.js
diff --git a/kimyunyeong/assets/5d1f692b-9940-4e35-b166-d768286b7097.png b/kimyunyeong/assets/5d1f692b-9940-4e35-b166-d768286b7097.png
diff --git a/kimyunyeong/assets/Pplayer.png b/kimyunyeong/assets/Pplayer.png
diff --git a/kimyunyeong/assets/attack.png b/kimyunyeong/assets/attack.png
diff --git a/kimyunyeong/assets/enemyShip.png b/kimyunyeong/assets/enemyShip.png
diff --git a/kimyunyeong/assets/glitter.png b/kimyunyeong/assets/glitter.png
diff --git a/kimyunyeong/assets/house1.png b/kimyunyeong/assets/house1.png
diff --git a/kimyunyeong/assets/house2.png b/kimyunyeong/assets/house2.png
diff --git a/kimyunyeong/assets/house3.png b/kimyunyeong/assets/house3.png
diff --git a/kimyunyeong/assets/house4.png b/kimyunyeong/assets/house4.png
diff --git a/kimyunyeong/assets/house5.png b/kimyunyeong/assets/house5.png
diff --git a/kimyunyeong/assets/house6.png b/kimyunyeong/assets/house6.png
diff --git a/kimyunyeong/assets/house7.png b/kimyunyeong/assets/house7.png
diff --git a/kimyunyeong/assets/house8.png b/kimyunyeong/assets/house8.png
diff --git a/kimyunyeong/assets/laser.png b/kimyunyeong/assets/laser.png
diff --git a/kimyunyeong/assets/light.png b/kimyunyeong/assets/light.png
diff --git a/kimyunyeong/assets/player.png b/kimyunyeong/assets/player.png
diff --git a/kimyunyeong/assets/present1.png b/kimyunyeong/assets/present1.png
diff --git a/kimyunyeong/assets/present2.png b/kimyunyeong/assets/present2.png
diff --git a/kimyunyeong/assets/snowhill.png b/kimyunyeong/assets/snowhill.png
diff --git a/kimyunyeong/assets/starrynight.png b/kimyunyeong/assets/starrynight.png
diff --git a/kimyunyeong/assets/tree.png b/kimyunyeong/assets/tree.png
diff --git a/kimyunyeong/graphic.js b/kimyunyeong/graphic.js
@@ -0,0 +1,29 @@
+const canvas = document.getElementById("canvas");
+const ctx = canvas.getContext("2d");
+
+// 이미지 로드 함수
+function loadImages(imageSources) {
+  return Promise.all(
+    imageSources.map((src) => {
+      return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.onerror = (error) => reject(error);
+        img.src = src;
+      });
+    })
+  );
+}
+
+// 이미지 경로
+    const imageSource = "assets/snowhill.png";
+
+    // 이미지 로드 및 그리기
+    loadImage(imageSource)
+      .then((img) => {
+        // 이미지를 캔버스 하단에 그립니다.
+        ctx.drawImage(img, 0, canvas.height - img.height, canvas.width, img.height);
+      })
+      .catch((error) => {
+        console.error("Error loading image:", error);
+      });
diff --git a/kimyunyeong/index.html b/kimyunyeong/index.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Canvas Game</title>
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <div id="main" role="main">
+    <canvas id="canvas" width="1024" height="768"></canvas>
+    <div id="gameOverScreen" style="display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
+      <p>게임 오버!</p>
+      <button id="restartButton" style="margin-top: 10px;">게임 재시작</button>
+    </div>
+  </div>
+
+  <!-- Stats.js CDN 추가 -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/stats.js/r16/Stats.min.js"></script>
+  <script src="app.js"></script>
+  <script>
+    let gameLoopId;
+    const gameOverScreen = document.getElementById('gameOverScreen');
+    const restartButton = document.getElementById('restartButton');
+    // Stats.js로 프레임 속도 표시
+    const stats = new Stats();
+    stats.domElement.style.position = 'absolute';
+    stats.domElement.style.left = '0px';
+    stats.domElement.style.top = '0px';
+
+    document.getElementById('main').appendChild(stats.domElement);
+
+    setInterval(() => {
+      stats.update();
+    }, 1000 / 60);
+
+    // 페이지 로딩이 완료되면 게임 초기화 실행
+    window.onload = () => {
+      // resetCanvas();
+      initGame(); // initGame 함수 호출
+      handleEvents(); 
+      gameLoop(); // gameLoop를 초기에 실행하도록 수정
+    };
+
+
+
+    restartButton.addEventListener('click', () => {
+    resetCanvas(); // 캔버스 리셋
+    initGame(); // initGame 함수 호출
+    isGameOver = false;
+    gameOverScreen.style.display = 'none';
+    // cancelAnimationFrame(gameLoopId); // 현재의 게임 루프를 정지
+
+    // gameObjects 배열에서 hero 객체를 찾기
+    const heroIndex = gameObjects.findIndex(go => go === hero);
+
+    gameObjects = [];
+
+  });
+  </script>
+</body>
+</html>
diff --git a/kimyunyeong/styles.css b/kimyunyeong/styles.css
@@ -0,0 +1,29 @@
+body {
+    margin: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+    background-color: #222;
+    overflow: hidden;
+  }
+
+  #main {
+    position: relative;
+  }
+
+  #canvas {
+    border: 1px solid #fff;
+    background-image: url('assets/starrynight.png'); /* 배경 이미지 파일 경로로 수정해주세요 */
+    background-size: cover; /* 배경 이미지를 캔버스에 맞게 조절합니다 */
+  }
+
+  #merry-christmas {
+    height: 200px;
+    top: 10px; /* 캔버스 위쪽에 위치하도록 조정합니다. */
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: center;
+    font-size: 24px;
+    color: red;
+  }