No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

course.html 2.9KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  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>Courrez!</title>
  7. <link rel="shortcut icon" href="../Images/Logo.png" type="image/png">
  8. <link rel="stylesheet" href="../CSS/QTE.css">
  9. </head>
  10. <body style="background: #050505">
  11. <!-- mise en place de la musique PAS TERMINEE-->
  12. <audio autoplay hidden><source src="../Sounds/course.mp3" preload="auto" ></audio>
  13. <canvas id="display" width="1288" height="666">
  14. <script>
  15. var amorti=0.8;
  16. var t=0;
  17. function Particle(x, y) {
  18. this.x = this.oldX = x;
  19. this.y = this.oldY = y;
  20. }
  21. //une bonne partie de ce code vient de PlayfulJS
  22. Particle.prototype.integrate = function() {
  23. var velocityX = (this.x - this.oldX) * amorti;
  24. var velocityY = (this.y - this.oldY) * amorti;
  25. this.oldX = this.x;
  26. this.oldY = this.y;
  27. this.x += velocityX;
  28. this.y += velocityY;
  29. t++
  30. 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");}
  31. //j'ai round parce que sinon au pixel près c'était ridicule
  32. if (t==310){amorti=0.86;}
  33. if (t==550){amorti=0.92;}
  34. if (t==800){amorti=0.97;}//on augmente la vitesse de suivi (1 seconde tous les t+=60)
  35. if (t==1030){amorti=0.99;}
  36. if (t==1260){amorti=0.8;}
  37. if (t==1325){window.location.replace("./couloir.html")}//condition de succès: tenir assez longtemps
  38. };
  39. //on ajoute des méthodes à l'objet Particle
  40. Particle.prototype.Sattract = function(x, y) {
  41. var dx = x - this.x;
  42. var dy = y - this.y;
  43. var distance = Math.sqrt(dx * dx + dy * dy);//cela permet aussi d'avoir une valeur positive...
  44. this.x += dx / (distance+1);//...strictement
  45. this.y += dy / (distance+1);
  46. };
  47. //ctx permet de tracer sur le canvas
  48. Particle.prototype.draw = function() {
  49. ctx.strokeStyle = '#fa0000';
  50. ctx.lineWidth = 42;
  51. ctx.beginPath();
  52. ctx.moveTo(this.oldX, this.oldY);
  53. ctx.lineTo(this.x, this.y);
  54. ctx.stroke();
  55. };
  56. var display = document.getElementById('display');
  57. var ctx = display.getContext('2d');
  58. var particles = [];
  59. var width = display.width = window.innerWidth;
  60. var height = display.height = window.innerHeight;
  61. var mouse = { x: width * 0.5, y: height * 0.5 };
  62. particle= new Particle(0.9*width, 0.1 * height);
  63. display.addEventListener('mousemove', onMousemove);
  64. function onMousemove(e) {
  65. mouse.x = e.clientX;
  66. mouse.y = e.clientY;
  67. }
  68. requestAnimationFrame(frame);
  69. function frame() {
  70. requestAnimationFrame(frame);
  71. ctx.clearRect(0, 0, width, height);
  72. particle.Sattract(mouse.x, mouse.y);
  73. particle.integrate();
  74. particle.draw();
  75. }
  76. </script>
  77. </canvas></body>
  78. </html>