🎉 add : 프로젝트 최초 등록

hyeonseol00 · Jun 17, 2024 · 8a0b411 · 8a0b411
commit 8a0b411
Show file tree

Hide file tree

Showing 21 changed files with 773 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,130 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -0,0 +1,8 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "always",
+  "semi": true
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "nbc5_websocket_game",
+  "version": "1.0.0",
+  "description": "",
+  "main": "src/app.js",
+  "scripts": {
+    "dev": "nodemon src/app.js"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module",
+  "dependencies": {
+    "dotenv": "^16.4.5",
+    "express": "^4.19.2",
+    "socket.io": "^4.7.5",
+    "uuid": "^10.0.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.1.3",
+    "prettier": "^3.3.1"
+  }
+}
diff --git a/tower_defense_client/images/.DS_Store b/tower_defense_client/images/.DS_Store
diff --git a/tower_defense_client/images/base.png b/tower_defense_client/images/base.png
diff --git a/tower_defense_client/images/bg.webp b/tower_defense_client/images/bg.webp
diff --git a/tower_defense_client/images/favicon.ico b/tower_defense_client/images/favicon.ico
diff --git a/tower_defense_client/images/monster1.png b/tower_defense_client/images/monster1.png
diff --git a/tower_defense_client/images/monster2.png b/tower_defense_client/images/monster2.png
diff --git a/tower_defense_client/images/monster3.png b/tower_defense_client/images/monster3.png
diff --git a/tower_defense_client/images/monster4.png b/tower_defense_client/images/monster4.png
diff --git a/tower_defense_client/images/monster5.png b/tower_defense_client/images/monster5.png
diff --git a/tower_defense_client/images/path.png b/tower_defense_client/images/path.png
diff --git a/tower_defense_client/images/tower.png b/tower_defense_client/images/tower.png
diff --git a/tower_defense_client/index.html b/tower_defense_client/index.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="author" content="Changmin Kang" />
+    <title>내일배움캠프 Node.js 트랙 타워 디펜스 게임</title>
+    <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
+    <style>
+      body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        background-color: #2d2d2d;
+        flex-direction: column;
+      }
+      #gameCanvas {
+        border: 2px solid #000;
+        display: none;
+      }
+      .button-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 20px;
+      }
+      .button-container button {
+        padding: 10px 20px;
+        font-size: 16px;
+        cursor: pointer;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="button-container">
+      <h1 style="color: white">내일배움캠프 Node.js 트랙 타워 디펜스 게임</h1>
+      <button id="registerButton">회원가입</button>
+      <button id="loginButton">로그인</button>
+      <button id="playButton">게임 플레이</button>
+    </div>
+    <canvas id="gameCanvas" width="1920" height="1080"></canvas>
+    <script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
+    <script type="module">
+      document
+        .getElementById("registerButton")
+        .addEventListener("click", () => {
+          window.location.href = "register.html";
+        });
+
+      document.getElementById("loginButton").addEventListener("click", () => {
+        window.location.href = "login.html";
+      });
+
+      document.getElementById("playButton").addEventListener("click", () => {
+        document.querySelector(".button-container").style.display = "none";
+        document.getElementById("gameCanvas").style.display = "block";
+        import("./src/game.js");
+      });
+    </script>
+  </body>
+</html>
diff --git a/tower_defense_client/login.html b/tower_defense_client/login.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="author" content="Changmin Kang" />
+    <title>내일배움캠프 Node.js 트랙 타워 디펜스 게임</title>
+    <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
+    <style>
+      body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        background-color: #2d2d2d;
+        color: white;
+        font-family: Arial, sans-serif;
+      }
+      .form-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .form-container input {
+        margin: 10px;
+        padding: 10px;
+        font-size: 16px;
+      }
+      .form-container button {
+        padding: 10px 20px;
+        font-size: 16px;
+        cursor: pointer;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="form-container">
+      <h1>내일배움캠프 Node.js 트랙 타워 디펜스 게임</h1>
+      <h2>로그인</h2>
+      <input type="text" id="username" placeholder="아이디" />
+      <input type="password" id="password" placeholder="비밀번호" />
+      <button id="login">로그인</button>
+      <button id="back">뒤로가기</button>
+    </div>
+    <script>
+      document.getElementById("login").addEventListener("click", () => {
+        const username = document.getElementById("username").value;
+        const password = document.getElementById("password").value;
+
+        /* 
+          로그인 API 호출 후 로그인 성공 시 index.html로 이동시켜주세요!
+          이 때, 엑세스 토큰은 어딘가에 저장을 해놔야겠죠?! 
+        */
+      });
+
+      document.getElementById("back").addEventListener("click", () => {
+        window.location.href = "index.html";
+      });
+    </script>
+  </body>
+</html>
diff --git a/tower_defense_client/register.html b/tower_defense_client/register.html
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="author" content="Changmin Kang" />
+    <title>내일배움캠프 Node.js 트랙 타워 디펜스 게임</title>
+    <link rel="icon" type="image/x-icon" href="/images/favicon.ico" />
+    <style>
+      body {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: 100vh;
+        margin: 0;
+        background-color: #2d2d2d;
+        color: white;
+        font-family: Arial, sans-serif;
+      }
+      .form-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+      }
+      .form-container input {
+        margin: 10px;
+        padding: 10px;
+        font-size: 16px;
+      }
+      .form-container button {
+        padding: 10px 20px;
+        font-size: 16px;
+        cursor: pointer;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="form-container">
+      <h1>내일배움캠프 Node.js 트랙 타워 디펜스 게임</h1>
+      <h2>회원가입</h2>
+      <input type="text" id="username" placeholder="아이디" />
+      <input type="password" id="password" placeholder="비밀번호" />
+      <button id="register">회원가입</button>
+      <button id="back">뒤로가기</button>
+    </div>
+    <script>
+      document.getElementById("register").addEventListener("click", () => {
+        const username = document.getElementById("username").value;
+        const password = document.getElementById("password").value;
+
+        /* 
+          회원가입 API 호출 후 회원가입 성공 시 index.html로 이동시켜주세요!
+        */
+      });
+
+      document.getElementById("back").addEventListener("click", () => {
+        window.location.href = "index.html";
+      });
+    </script>
+  </body>
+</html>
diff --git a/tower_defense_client/src/base.js b/tower_defense_client/src/base.js
@@ -0,0 +1,36 @@
+export class Base {
+  constructor(x, y, maxHp) {
+    // 생성자 안에서 기지의 속성을 정의한다고 생각하시면 됩니다!
+    this.x = x; // 기지 이미지 x 좌표
+    this.y = y; // 기지 이미지 y 좌표
+    this.width = 170; // 기지 이미지 가로 길이 (이미지 파일 길이에 따라 변경 필요하며 세로 길이와 비율을 맞춰주셔야 합니다!)
+    this.height = 225; // 기지 이미지 세로 길이
+    this.hp = maxHp; // 기지의 현재 HP
+    this.maxHp = maxHp; // 기지의 최대 HP
+  }
+
+  draw(ctx, baseImage) {
+    ctx.drawImage(
+      baseImage,
+      this.x - this.width,
+      this.y - this.height / 2,
+      this.width,
+      this.height
+    );
+
+    ctx.font = "16px Arial";
+    ctx.fillStyle = "white";
+    ctx.fillText(
+      `HP: ${this.hp}/${this.maxHp}`,
+      this.x - this.width,
+      this.y - this.height / 2 - 10
+    );
+  }
+
+  takeDamage(amount) {
+    // 기지가 데미지를 입는 메소드입니다.
+    // 몬스터가 기지의 HP를 감소시키고, HP가 0 이하가 되면 게임 오버 처리를 해요!
+    this.hp -= amount;
+    return this.hp <= 0; // 기지의 HP가 0 이하이면 true, 아니면 false
+  }
+}