pb push
This commit is contained in:
parent
a7b0c95c57
commit
3e907a929e
3 changed files with 244 additions and 0 deletions
119
CSS/discretion.css
Normal file
119
CSS/discretion.css
Normal file
|
|
@ -0,0 +1,119 @@
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
color:white;
|
||||||
|
font-family: 'Special Elite', cursive;
|
||||||
|
background-color: black;
|
||||||
|
height: 95vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
color: #BF0909;
|
||||||
|
font-family: 'Special Elite', cursive;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
h1 {
|
||||||
|
font-size: 4vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
header a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #494949;
|
||||||
|
}
|
||||||
|
|
||||||
|
header a:hover {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#main {
|
||||||
|
display: flex;
|
||||||
|
flex: 4;
|
||||||
|
}
|
||||||
|
|
||||||
|
#content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-around;
|
||||||
|
width: 50vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#text {
|
||||||
|
font-family: 'Special Elite', cursive;
|
||||||
|
font-size: 2vw;
|
||||||
|
text-align: center;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
#buttons {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button {
|
||||||
|
outline: none;
|
||||||
|
border:0.2vw solid #b9b9b9;
|
||||||
|
border-radius: 4vw;
|
||||||
|
min-width: 15vw;
|
||||||
|
width :20vw;
|
||||||
|
padding: 1vw 1.2vw 1vw 1.2vw;
|
||||||
|
color: black;
|
||||||
|
font-family: 'Special Elite', cursive;
|
||||||
|
font-size: 1.5vw;
|
||||||
|
background-image: linear-gradient(to top, black -50%, #BF0909 80%);
|
||||||
|
cursor : pointer;
|
||||||
|
position: absolute;
|
||||||
|
left: 39%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:hover {
|
||||||
|
border: 0.2vw solid white;
|
||||||
|
box-shadow: 0 0 3vw #B0C4DE;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button:active {
|
||||||
|
background-image: linear-gradient(to top, #BF0909 20%, black 150%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Test d'animation */
|
||||||
|
@keyframes oscille {
|
||||||
|
from {
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
25% {
|
||||||
|
transform: rotate(8deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
75% {
|
||||||
|
transform: rotate(-8deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: rotate(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
footer{
|
||||||
|
flex:0.5;
|
||||||
|
display:flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content:flex-end;
|
||||||
|
align-items: center;
|
||||||
|
font-size:1vw;
|
||||||
|
margin-top:2vw;
|
||||||
|
}
|
||||||
|
|
||||||
|
#names{
|
||||||
|
margin : 0;
|
||||||
|
}
|
||||||
89
HTML/course.html
Normal file
89
HTML/course.html
Normal file
|
|
@ -0,0 +1,89 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Courrez!</title>
|
||||||
|
<link rel="shortcut icon" href="../Images/Logo.png" type="image/png">
|
||||||
|
<link rel="stylesheet" href="../CSS/QTE.css">
|
||||||
|
</head>
|
||||||
|
<body style="background: #050505">
|
||||||
|
<canvas id="display" width="1288" height="666">
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var amorti=0.8;
|
||||||
|
var t=0;
|
||||||
|
function Particle(x, y) {
|
||||||
|
this.x = this.oldX = x;
|
||||||
|
this.y = this.oldY = y;
|
||||||
|
}
|
||||||
|
//une bonne partie de ce code vient de PlayfulJS
|
||||||
|
Particle.prototype.integrate = function() {
|
||||||
|
var velocityX = (this.x - this.oldX) * amorti;
|
||||||
|
var velocityY = (this.y - this.oldY) * amorti;
|
||||||
|
this.oldX = this.x;
|
||||||
|
this.oldY = this.y;
|
||||||
|
this.x += velocityX;
|
||||||
|
this.y += velocityY;
|
||||||
|
t++
|
||||||
|
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");}
|
||||||
|
//j'ai round parce que sinon au pixel près c'était ridicule
|
||||||
|
// /!\ rediriger vers une age d'échec une fois qu'elles seront faites
|
||||||
|
if (t==220){amorti=0.86;}
|
||||||
|
if (t==400){amorti=0.92;}
|
||||||
|
if (t==480){amorti=0.97;}//on augmente la vitesse de suivi
|
||||||
|
if (t==680){amorti=0.99;}
|
||||||
|
if (t==1000){amorti=0.8;}
|
||||||
|
if (t==1080){window.location.replace("./couloir.html")}//condition de succès: tenir assez longtemps
|
||||||
|
};
|
||||||
|
//on ajoute des méthodes à l'objet Particle
|
||||||
|
Particle.prototype.attract = function(x, y) {
|
||||||
|
var dx = x - this.x;
|
||||||
|
var dy = y - this.y;
|
||||||
|
var distance = Math.sqrt(dx * dx + dy * dy);
|
||||||
|
this.x += dx / distance;
|
||||||
|
this.y += dy / distance;
|
||||||
|
};
|
||||||
|
//ctx permet de tracer sur le canvas
|
||||||
|
Particle.prototype.draw = function() {
|
||||||
|
ctx.strokeStyle = '#f00000';
|
||||||
|
ctx.lineWidth = 42;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.moveTo(this.oldX, this.oldY);
|
||||||
|
ctx.lineTo(this.x, this.y);
|
||||||
|
ctx.stroke();
|
||||||
|
};
|
||||||
|
|
||||||
|
var display = document.getElementById('display');
|
||||||
|
var ctx = display.getContext('2d');
|
||||||
|
var particles = [];
|
||||||
|
var width = display.width = window.innerWidth;
|
||||||
|
var height = display.height = window.innerHeight;
|
||||||
|
var mouse = { x: width * 0.5, y: height * 0.5 };
|
||||||
|
|
||||||
|
particle= new Particle(0.9*width, 0.1 * height);
|
||||||
|
|
||||||
|
display.addEventListener('mousemove', onMousemove);
|
||||||
|
|
||||||
|
function onMousemove(e) {
|
||||||
|
mouse.x = e.clientX;
|
||||||
|
mouse.y = e.clientY;
|
||||||
|
}
|
||||||
|
|
||||||
|
requestAnimationFrame(frame);
|
||||||
|
|
||||||
|
function frame() {
|
||||||
|
requestAnimationFrame(frame);
|
||||||
|
ctx.clearRect(0, 0, width, height);
|
||||||
|
particle.attract(mouse.x, mouse.y);
|
||||||
|
particle.integrate();
|
||||||
|
particle.draw();
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</canvas></body>
|
||||||
|
</html>
|
||||||
36
HTML/discretion.html
Normal file
36
HTML/discretion.html
Normal file
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>INSAïde</title>
|
||||||
|
<link rel="shortcut icon" href="../Images/Logo.png" type="image/png">
|
||||||
|
<link rel="stylesheet" href="../CSS/discretion.css">
|
||||||
|
<link rel="preconnect" href="https://fonts.gstatic.com">
|
||||||
|
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>De la discrétion!</h1>
|
||||||
|
<nav><a href='./menu.html'>Retourner au menu</a></nav>
|
||||||
|
</header>
|
||||||
|
<main id="main">
|
||||||
|
<section id="content">
|
||||||
|
<article id="text">
|
||||||
|
<p>
|
||||||
|
Vous suivez l'étudiant à pas de velours, mais cela ne suffit pas.
|
||||||
|
Dans l'obscurité vous pouvez à peine vous voir, mais il risque quand même de vous trouver...
|
||||||
|
Échappez-lui en bougeant votre souris!
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
<div id="qtevent">
|
||||||
|
<button class="button"><a id="buttontext" href="./course.html">Courir!</a></button>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
</main>
|
||||||
|
<footer>
|
||||||
|
<p id="names">Copyright © 2020 Florian EHR - Pierre FAVARY - Baptiste MARTY</p>
|
||||||
|
<p id="rights">Tous droits réservés </p>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in a new issue