make new page

슬랙의 열어를 두번 눌렀을 때 게임오버가 되도록 변경, catcha page추가
HTMLhead · Jan 3, 2019 · 9af114b · 9af114b
1 parent b6a0416
commit 9af114b
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 2 deletions.
diff --git a/catcha.html b/catcha.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>시험지를 훔쳤다 - 잡았다.요놈.</title>
+  <link rel="stylesheet" href="./css/catcha.css">
+</head>
+
+<body>
+  <div class="container" id="app" @click="addIndex">
+    <div class="catcha" v-for="(story, index) in stories" v-if="index === activeIndex">
+      <div class="main">
+        <img v-bind:src="'./photo/' + story.imageUrl + '.jpeg'" class="main-image">
+        <div class="main-icon"></div>
+      </div>
+      <div class="chat">
+        <div class="chat-text">
+        </div>
+      </div>
+    </div>
+  </div>
+  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+  <script src="./js/catcha.js"></script>
+</body>
+
+</html>
diff --git a/css/catcha.css b/css/catcha.css
@@ -0,0 +1,2 @@
+@import url("./reset.css");
+@import url("./common.css");
diff --git a/css/common.css b/css/common.css
@@ -6,7 +6,7 @@
 
 .main-image {
   display: block;
-  max-height: 100vh;
+  height: 100vh;
 }
 
 .info {

diff --git a/door.html b/door.html
@@ -17,7 +17,7 @@
       <div @click="activeChat('문이 잠겨있다.')" class='door info'></div>
       <div @click="getKey" class='signBoard info'></div>
       <div @click="openDoor" class='security info'></div>
-      <div @click="activeChat('슬랙에 들어가서 열어라고 치면 될 것 같지만 경비가 울릴 것 같다.')" class='floor info'></div>
+      <div @click="catcha()" class='floor info'></div>
     </div>
     <div class="chat" v-show="showChat">
       <div class="chat-text">

diff --git a/js/catcha.js b/js/catcha.js
@@ -0,0 +1,70 @@
+var app = new Vue({
+  el: "#app",
+  data: {
+    stories: [
+      {
+        imageUrl: "intro1",
+        text: ["", "헐레벌떡 학원을 빠져나왔다."]
+      },
+      {
+        imageUrl: "intro1",
+        text: ["", "그래, 지금이라도 집으로 돌아가자"]
+      },
+      {
+        imageUrl: "catcha",
+        text: ["", "'잡았다 요놈!'"]
+      },
+      {
+        imageUrl: "catcha",
+        text: ["", "..."]
+      },
+      {
+        imageUrl: "blank",
+        text: ["", "화들짝 놀라며 H군은 잠에서 깨어났다."]
+      },
+      {
+        imageUrl: "blank",
+        text: ["", "매달 마지막 주 목요일에 프론트엔드 클래스는 쪽지시험을 본다."]
+      },
+      {
+        imageUrl: "blank",
+        text: ["", "지난 시험에 10점을 맞은 H 군은 이번 시험은 잘 보기 위해 시험지를 훔치러 늦은 밤 코드스쿼드에 잠입하기로 결심했다..."]
+      }
+    ],
+    activeIndex: 0,
+    isLoaded: false
+  },
+  methods: {
+    addIndex() {
+      if (this.isLoaded && this.activeIndex === 1) {
+        const catcha = new Audio("./sound/catcha.wav");
+        catcha.play();
+      }
+      if (this.isLoaded && this.activeIndex < 6) {
+        this.activeIndex++;
+        this.activeChat();
+      } else if (this.isLoaded && this.activeIndex === 6) {
+        window.location.href = "./end.html";
+      }
+    },
+    activeChat() {
+      const vm = this;
+      vm.isLoaded = false;
+      const typed = new Typed(".chat-text", {
+        strings: this.stories[this.activeIndex].text,
+        typeSpeed: 40,
+        backDelay: 500,
+        fadeOut: true,
+        onComplete: () => {
+          vm.doneLoading();
+        }
+      });
+    },
+    doneLoading() {
+      this.isLoaded = true;
+    }
+  },
+  mounted() {
+    this.activeChat();
+  }
+});
diff --git a/js/door.js b/js/door.js
@@ -1,3 +1,4 @@
+let count = 0
 const app = new Vue({
   el: '#app',
   data: {
@@ -36,6 +37,17 @@ const app = new Vue({
         this.activeChat("경비를 해제해야 할 것 같다.");
       }
     },
+    catcha() {
+      count++;
+      if(count !== 2) {
+        this.activeChat("열어. 라고 슬랙에 입력했지만 아무런 반응이 없다.");
+      } else {
+        this.activeChat('열어. 라고 슬랙에 입력하자 사이렌이 울렸다.')
+        setTimeout(() => {
+          window.location.href = "./catcha.html";
+        }, 3000)
+      }
+    },
     closeChat(self) {
       setTimeout(() => {
         this.showChat = false;

diff --git a/photo/blank.jpeg b/photo/blank.jpeg
diff --git a/photo/catcha.jpeg b/photo/catcha.jpeg
diff --git a/sound/catcha.wav b/sound/catcha.wav
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import url("./reset.css");
		@import url("./common.css");