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