Browse Source

Ajout de l'echec de course

Pierre Favary 3 years ago
parent
commit
196add2314
4 changed files with 342 additions and 2 deletions
  1. 276
    0
      CSS/coursefail.css
  2. 1
    2
      HTML/course.html
  3. 41
    0
      HTML/coursefail.html
  4. 24
    0
      JAVASCRIPT/coursefail.js

+ 276
- 0
CSS/coursefail.css View File

@@ -0,0 +1,276 @@
1
+body {
2
+    display: flex;
3
+    flex-direction: column;
4
+    justify-content: space-between;
5
+    align-items: center;
6
+    color:white;
7
+    font-family: 'Special Elite', cursive;
8
+    background-color: black;
9
+    height: 95vh;
10
+}
11
+
12
+    header {
13
+        color: #BF0909;
14
+        font-family: 'Special Elite', cursive;
15
+        display: flex;
16
+        flex-direction: column;
17
+        justify-content: space-between;
18
+        align-items: center;
19
+        height:15vh;
20
+        z-index:0;
21
+    }
22
+        h1 {
23
+            font-size: min(4vw,7vh);
24
+            margin-bottom:0.5vw;
25
+        }
26
+
27
+        header a {
28
+            font-size: min(1vw,1.7vh);
29
+            text-decoration: none;
30
+            color: #494949;
31
+        }
32
+
33
+        header a:hover {
34
+            color: white;
35
+        }
36
+
37
+    #main {
38
+        display: flex;
39
+        height:65vh;
40
+    }
41
+
42
+        #content {
43
+            display: flex;
44
+            flex-direction: column;
45
+            justify-content: space-around;
46
+            width: 50vw;
47
+        }
48
+
49
+            #text {
50
+                margin-top:4vh;
51
+                font-family: 'Special Elite', cursive;
52
+                font-size: min(1.8vw,3.6vh);
53
+                text-align: center;
54
+                color: white;
55
+                cursor:default;
56
+            }
57
+
58
+
59
+
60
+
61
+                .phrase{
62
+                    opacity:0;
63
+                    margin:0.1vh 0vw 0.1vh 0vw;
64
+                    
65
+                }
66
+
67
+                #p1{
68
+                    animation: fade 2s forwards;
69
+                }
70
+
71
+                @keyframes fade {
72
+                    0% {opacity :0}
73
+                    100% {opacity:1}
74
+                }
75
+
76
+                @keyframes fade-reverse {
77
+                    0% {opacity :1}
78
+                    100% {opacity:0}
79
+                }
80
+
81
+                    #p1{animation-delay:0.5s}
82
+
83
+
84
+
85
+
86
+                .mot{
87
+                    margin:0;
88
+                }
89
+
90
+                #boisson{
91
+                    color:#086CA5;
92
+                    font-weight: bold;
93
+                    text-align: center;
94
+                    font-size: min(1.8vw,3.6vh);
95
+                    font-family: 'Special Elite', cursive;
96
+                    background:black;
97
+                    border:none;
98
+                    cursor: pointer;
99
+                    -moz-appearance: none;
100
+                    background: transparent;
101
+                    background-image: url("../Images/Arrow.png");
102
+                    background-repeat: no-repeat;
103
+                    background-size:min(1vw,1.7vh);
104
+                    background-position-x: 0vw;
105
+                    background-position-y: min(0.4 vw,1vh);
106
+                    padding-left:1.2vw;
107
+                }
108
+
109
+                #boisson:focus{
110
+                    outline:none
111
+                }
112
+
113
+                #boisson option{
114
+                    background:black;
115
+                    border:none;
116
+                    font: -moz-pull-down-menu;
117
+                }
118
+
119
+            #arrowBlock{
120
+                height:2vh;
121
+                width:50vw;
122
+                
123
+            }
124
+
125
+                #space{
126
+                    font-size: 1vw;
127
+                    font-family: 'Special Elite', cursive;
128
+                    position:relative;
129
+                    right:-20vw;
130
+                    top:2.5vh;
131
+                }
132
+
133
+                #arrow{
134
+                    height:2vh;
135
+                    width:auto;
136
+                    position:relative;
137
+                    right:-25vw;
138
+                    top:-3vh;
139
+                    animation: bounce 1s forwards;
140
+                    animation-iteration-count:infinite;
141
+                }
142
+
143
+            @keyframes bounce {
144
+                50% {top:-6vh}
145
+            }
146
+
147
+            #buttons {
148
+                display: flex;
149
+                justify-content: space-around;
150
+                margin-top:5vh;
151
+                opacity:0;
152
+            }
153
+
154
+            .button {
155
+                outline: none;
156
+                border:0.2vw solid #b9b9b9;
157
+                border-radius: 4vw;
158
+                width:20vw;
159
+                padding: 1vw 1.2vw 1vw 1.2vw;
160
+                color: black;
161
+                font-family: 'Special Elite', cursive;
162
+                font-size: 1.5vw;
163
+				font-style: oblique;
164
+				min-height: 5vw;
165
+                background-image: linear-gradient(to top, black -50%, #BF0909 80%);
166
+                cursor : pointer;
167
+                display: flex;
168
+                justify-content: center;
169
+                align-items: center;
170
+            }
171
+
172
+            .button:hover {
173
+                border: 0.2vw solid white;
174
+                box-shadow: 0 0 3vw  #B0C4DE;
175
+            }
176
+
177
+            .button:active {
178
+                background-image: linear-gradient(to top, #BF0909 20%, black 150%);
179
+            }
180
+
181
+            #link{
182
+                text-decoration:none;
183
+                padding:0;
184
+                
185
+            }
186
+
187
+            #link:hover{
188
+                text-decoration:none;
189
+            }
190
+
191
+            footer{
192
+                height:15vh;
193
+                display:flex;
194
+                flex-direction: column;
195
+                justify-content:flex-end;
196
+                align-items: center;
197
+                font-size:1vw;
198
+                margin-top:2vw;
199
+            }
200
+            
201
+                #names{
202
+                    margin : 0;
203
+                }
204
+
205
+                #rights{
206
+                    margin-bottom:0;
207
+                }
208
+
209
+#eyeBlock{
210
+    width:100vw;
211
+    height:95vh;
212
+    position:absolute;
213
+    display:flex;
214
+    flex-direction: column;
215
+    opacity:0;
216
+}
217
+
218
+
219
+    #supEye{
220
+        flex:1;
221
+        background-color:black;
222
+        display:flex;
223
+        justify-content: center;
224
+        align-items: flex-end;
225
+    }
226
+
227
+    #eye{
228
+        flex:1;
229
+        background:radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0) 73.44%, black 100%);
230
+        
231
+    }
232
+
233
+        .endText{
234
+            opacity:0;
235
+            flex:1;
236
+            text-align: center;
237
+            font-family: 'Special Elite', cursive;
238
+            
239
+        }
240
+
241
+        #loose{
242
+            font-size:3vw;
243
+        }
244
+
245
+        #return {
246
+            text-decoration: none;
247
+            color: #494949;
248
+            font-size:1.5vw
249
+        }
250
+
251
+        #return:hover {
252
+            color: white;
253
+        }
254
+
255
+    #infEye{
256
+        flex:1;
257
+        background-color:black;
258
+        display:flex;
259
+        justify-content: center;
260
+        align-items: flex-start;
261
+    }
262
+
263
+    @keyframes blinking1 {
264
+        100% {flex:0.3}
265
+    }
266
+
267
+    @keyframes blinking2 {
268
+        0% {flex:0.3}
269
+        100% {flex:0.7}
270
+    }
271
+
272
+    @keyframes blinking3 {
273
+        0% {flex:0.7}
274
+        100% {flex:0}
275
+    }
276
+

+ 1
- 2
HTML/course.html View File

@@ -28,9 +28,8 @@
28 28
         this.x += velocityX;
29 29
         this.y += velocityY;
30 30
 		t++
31
-		if (t>10 && Math.round(this.x/10)==Math.round(mouse.x/10) && Math.round(this.y/12)==Math.round(mouse.y/12)){window.location.replace("./menu.html");}
31
+		if (t>10 && Math.round(this.x/10)==Math.round(mouse.x/10) && Math.round(this.y/12)==Math.round(mouse.y/12)){window.location.replace("./coursefail.html");}
32 32
 		//j'ai round parce que sinon au pixel près c'était ridicule
33
-		//	/!\ rediriger vers une age d'échec une fois qu'elles seront faites
34 33
 		if (t==220){amorti=0.86;}
35 34
 		if (t==400){amorti=0.92;}
36 35
 		if (t==480){amorti=0.97;}//on augmente la vitesse de suivi

+ 41
- 0
HTML/coursefail.html View File

@@ -0,0 +1,41 @@
1
+<!DOCTYPE html>
2
+<html lang="en">
3
+<head>
4
+    <meta charset="UTF-8">
5
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+    <title>Attrapé</title>
7
+    <link rel="shortcut icon" href="../Images/Logo.png" type="image/png">
8
+    <link rel="stylesheet" href="../CSS/coursefail.css">
9
+    <link rel="preconnect" href="https://fonts.gstatic.com">
10
+    <link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet"> 
11
+    <script defer type="text/javascript" src="../JAVASCRIPT/coursefail.js"></script>
12
+</head>
13
+<body>
14
+    <header>
15
+        <h1>Oh-oh...</h1>
16
+    </header>
17
+    <main id="main">
18
+        <section id="content">
19
+            <article id="text">
20
+                <p class="phrase" id="p1">Oh non!</p><br/>
21
+                <p class="phrase">Non seulement vous êtes repéré, mais dans l'obscurité vous sentez la main de l'inconnu se refermer sur votre épaule!</p>
22
+                <br/>
23
+				<p class="phrase">Ce n'est pas vraiment ce que vous vouliez...</p>
24
+                <div id="arrowBlock">
25
+                    <p id="space">Press enter</p>
26
+                    <img id="arrow" src="../Images/Lecture.png" alt="Texte suivant"/>
27
+                </div>
28
+            </article>
29
+            <div id="buttons">
30
+                <a id="link" class="button" href="./menu.html">Abandonner le jeu?</a>
31
+				<!-- rediriger vers une page de réssite spécifique??-->
32
+                <a id="link" class="button" href="./course.html">Réessayer?</a>
33
+            </div>
34
+        </section>
35
+    </main>
36
+    <footer>
37
+        <p id="names">Copyright © 2020 Florian EHR - Pierre FAVARY - Baptiste MARTY</p>
38
+        <p id="rights">Tous droits réservés </p>
39
+    </footer>
40
+</body>
41
+</html>

+ 24
- 0
JAVASCRIPT/coursefail.js View File

@@ -0,0 +1,24 @@
1
+// select elements
2
+let buttons = document.getElementById("buttons")
3
+let text = document.getElementById("text")
4
+
5
+let counter_p = 1
6
+let childs = []
7
+
8
+
9
+
10
+function handleDisplayText(event){
11
+    if (event.keyCode == 32 || event.keyCode == 13){
12
+        if (counter_p < text.childElementCount-1){
13
+            text.children[counter_p].style.cssText = "animation : fade 2s forwards"
14
+            counter_p += 1
15
+        } else {
16
+            text.children[counter_p].children[0].style.cssText = "animation : fade-reverse 1s forwards"
17
+            text.children[counter_p].children[1].style.cssText = "animation : none"
18
+            buttons.style.cssText = "animation : fade 2s forwards"
19
+        }
20
+    }
21
+}
22
+
23
+
24
+document.addEventListener("keypress",handleDisplayText)

Loading…
Cancel
Save