Add 'Text-Adventure-Game/' from commit '4fa65742a79d9250bd3a7105b2b1f…

…2938d136e65' git-subtree-dir: Text-Adventure-Game git-subtree-mainline: 5016dc1 git-subtree-split: 4fa6574
asa9874 · Sep 15, 2024 · dd6a205 · dd6a205
2 parents 5016dc1 + 4fa6574
commit dd6a205
Show file tree

Hide file tree

Showing 72 changed files with 3,452 additions and 0 deletions.
diff --git a/Text-Adventure-Game/.gitignore b/Text-Adventure-Game/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/Text-Adventure-Game/README.md b/Text-Adventure-Game/README.md
@@ -0,0 +1,29 @@
+# 텍스트 어드벤쳐 게임
+### [플레이하기](https://asa9874.github.io/Text-Adventure-Game/)
+
+
+![image](https://github.com/user-attachments/assets/1054e21a-25cb-4994-8e24-35b02639bd04)
+
+![image](https://github.com/user-attachments/assets/8a2f4411-b377-4916-ae5e-b52d04852b83)
+
+# 개요
+> ### 제목: 텍스트 어드벤쳐 게임
+> ### 제작기간: 2024.07.28~2024.08.3
+> ### 배포주소: https://asa9874.github.io/Text-Adventure-Game/
+
+
+
+# 🛠️Stacks
+![NodeJS](https://img.shields.io/badge/node.js-6DA55F?style=for-the-badge&logo=node.js&logoColor=white)
+![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white)
+![JavaScript](https://img.shields.io/badge/javascript-%23323330.svg?style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)
+![jQuery](https://img.shields.io/badge/jquery-%230769AD.svg?style=for-the-badge&logo=jquery&logoColor=white)    
+![Github Pages](https://img.shields.io/badge/github%20pages-121013?style=for-the-badge&logo=github&logoColor=white)
+![HTML5](https://img.shields.io/badge/html5-%23E34F26.svg?style=for-the-badge&logo=html5&logoColor=white)
+![CSS3](https://img.shields.io/badge/css3-%231572B6.svg?style=for-the-badge&logo=css3&logoColor=white)
+![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)
+
+
+# 이미지, BGM
+- 이미지는 [stable diffusion](https://ko.wikipedia.org/wiki/%EC%8A%A4%ED%85%8C%EC%9D%B4%EB%B8%94_%EB%94%94%ED%93%A8%EC%A0%84) 기반 ai 로 생성되었습니다.
+- BGM은 [Suno](https://suno.com/)의 AI 음원 제작으로 생성되었습니다. 
diff --git a/Text-Adventure-Game/animation.css b/Text-Adventure-Game/animation.css
@@ -0,0 +1,44 @@
+@keyframes backgroundfadein {
+    0% { opacity: 0; }
+    100% { opacity: 100;}
+}
+
+.backgroundfadein {
+    animation-name: backgroundfadein;
+    animation-duration: 1s;
+    animation-timing-function: ease-in-out;
+    animation-fill-mode: forwards; /* 애니메이션이 끝난 후에도 최종 상태를 유지 */
+}
+
+@keyframes updatingnumber {
+    0% { 
+        transform: scale(1); 
+    }
+    50% { 
+        transform: scale(1.1); 
+        filter: brightness(0.8);
+    }
+    100% { 
+        transform: scale(1); 
+    }
+}
+
+.updatingnumber{
+    animation-name: updatingnumber;
+    animation-duration: 0.5s;
+    animation-timing-function: ease-in-out;
+    animation-fill-mode: forwards; 
+}
+
+@keyframes healthfadeinout {
+    0% { opacity: 0; }
+    50% { opacity: 0.2; }
+    100% { opacity: 0; }
+}
+
+.healthfadeinout{
+    animation-name: healthfadeinout;
+    animation-duration: 0.5s;
+    animation-timing-function: ease-in-out;
+    animation-fill-mode: forwards; 
+}
diff --git a/Text-Adventure-Game/index.html b/Text-Adventure-Game/index.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>생존게임</title>
+  </head>
+  <body>
+    <div class="test">for test</div>
+    <div class="backgroundimg"></div>
+    <div class="startbox">
+      <div class="GameTitle">멸명한 세계에서 살아남기</div>
+      <div class="GameSubTitle">(😀멸망한 세계에서 살아남기😎)</div>
+      <div class="GameStartBox SelectBox">게임시작버튼</div>
+      <div class="OpeningSkipBox SelectBox">오프닝 스킵</div>
+    </div>
+
+
+    <div class="gamebox">
+      <div class="healtheffect"></div>
+      <div class="infobox">
+        <div class="health info">0</div>
+        <div class="money info">0</div>
+      </div>
+
+      <div class="gamebackgroundimg"></div>
+      <div class="choicebox">
+        <div class="choiceboxelement">
+          <div class="choice choice1"></div>
+          <div class="choiceimg choiceimg1">as</div>
+        </div>
+        <div class="choiceboxelement">
+          <div class="choice choice2"></div>
+          <div class="choiceimg choiceimg2">as</div>
+        </div>
+
+        <div class="choiceboxelement">
+          <div class="choice choice3"></div>
+          <div class="choiceimg choiceimg3">as</div>
+        </div>
+
+      </div>
+
+      <img class="character object">
+      <img class="character character1">
+      <img class="character character2">
+      <img class="character character3">
+      <div class="mainbox"></div>
+      <div class="skipbox"></div>
+      <div class="textbox">
+        <div class="namebox"></div>
+        <div class="conversation anim-typewriter"></div>
+      </div>
+    </div>
+
+
+    <script type="module" src="./src/main.js"></script>
+  </body>
+</html>