Sujet Précédent Sujet Suivant

Effet pluie de couleur

Résolu/Fermé
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 - 9 mai 2019 à 18:15
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 - 19 mai 2019 à 17:43
Bonjour,

J'ai trouvé ça qui me plaît : https://codepen.io/kyllaz/pen/qGdPvR 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Site web HTML CSS</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="JEU.css"/>
    <style>
     canvas {
      position: absolute;
      top: 80;
      left: 0;
      background-color: #111;
    }
    </style>
  </head>
  <body>
  <nav>
      <ul>
          <li class="menu-html"><a href="html.html">Acceuil</a>
              <ul class="submenu">
        <li><a href="page1.html">JEU MAX</a></li>
      <li><a href="page2.html">LOGICIEL</a></li>
              </ul>
          </li>
          <li class="menu-css"><a href="html.html">A propos</a>
              <ul class="submenu">
                  <li><a href="page3.html">FAQ</a></li>
      <li><a href="page4.html">Space Invader</a></li>
              </ul>
          </li>
          <li class="menu-javascript"><a href="javascript.html">Contact</a>
              <ul class="submenu">
                  <li><a href="page5.html">M'envoyer un Message</a></li>
              </ul>
          </li>
      </ul>
  </nav>
 
  <h2> SPACE INVADER </h2>
  <p>Space Invaders スペースインベーダー (Supēsu Inbēdā?) est un jeu vidéo développé par la société japonaise Taito, sorti en 1978 sur borne d'arcade. Il s'agit d'un shoot them up fixe. Tomohiro Nishikado conçoit et programme le jeu. Il s'inspire de plusieurs médias populaires de l'époque pour réaliser Space Invaders tels que Breakout ou La Guerre des mondes. Considéré comme le premier archétype du shoot them up, il est aussi l'un des titres les plus influents et célèbres de l'histoire du jeu vidéo.</p>
  <p>Le principe est de détruire des vagues d'aliens au moyen d'un canon laser en se déplaçant horizontalement sur l'écran. Il fait partie des classiques du jeu vidéo au même titre que Pac-Man et d'autres de ses contemporains. Il contribue à élargir l'industrie du jeu vidéo au niveau mondial. Space Invaders rencontre un énorme succès populaire. Après sa sortie au Japon, il aurait entraîné une pénurie de pièces de 100 yens. En 2007, Taito annonce que le jeu a rapporté 500 millions de dollars de recettes depuis sa parution.</p>
  <p>Ce jeu influence beaucoup de titres et connaît plusieurs suites. Il est adapté sur de nombreux supports (Atari 2600, Atari 5200, MSX, NES, etc.). En 1980, la sortie de la version pour l'Atari 2600 permet de quadrupler les ventes de la plate-forme. De ce fait, il devient le premier titre dit « killer application » pour les consoles de jeux vidéo. Space Invaders est référencé et parodié dans de nombreuses émissions de télévision et expositions culturelles. La représentation par des pixels des aliens dans le jeu devient une icône médiatique pour symboliser le monde des jeux vidéo.</p>
 
  <canvas id=c></canvas>
  <script type="text/javascript">
      var gl = c.getContext( 'experimental-webgl', { preserveDrawingBuffer: true } )
      ,   w = c.width = window.innerWidth
      ,   h = c.height = window.innerHeight
 
      ,   opts = {
          dropWidth: .5,
          dropSpacing: 1,
          dropsParColumn: 3,
          dropBaseSpeed: .01,
          dropAddedSpeed: .005,
          dropAlpha: .6,
          dropRespawnChance: .1,
          acc: .1,
          tickSpeed: 1/360
      };
 
  var webgl = {};
  webgl.vertexShaderSource = `
  attribute vec2 a_pos;
  uniform vec2 u_res;
  uniform vec2 u_params;
  varying float hue;
 
  void main(){
      gl_Position = vec4( vec2(1,-1) * ( ( ( a_pos + vec2(.5,0) ) / u_res ) * 2. - 1. ), 0, 1 );
      hue = u_params.y == 1. ? -1. : ( a_pos.x + a_pos.y * .1 ) / u_res.x + u_params.x;
  }
  `
  webgl.fragmentShaderSource = `
  precision mediump float;
  varying float hue;
 
  void main(){
      gl_FragColor = hue == -1. ? vec4( 0, 0, 0, .04 ) : vec4( clamp( abs( mod( hue * 6. + vec3( 0, 4, 2 ), 6. ) - 3. ) -1., 0., 1. ), ${opts.dropAlpha} );
  }
  `
 
  webgl.vertexShader = gl.createShader( gl.VERTEX_SHADER );
  gl.shaderSource( webgl.vertexShader, webgl.vertexShaderSource );
  gl.compileShader( webgl.vertexShader );
 
  webgl.fragmentShader = gl.createShader( gl.FRAGMENT_SHADER );
  gl.shaderSource( webgl.fragmentShader, webgl.fragmentShaderSource );
  gl.compileShader( webgl.fragmentShader );
 
  webgl.shaderProgram = gl.createProgram();
  gl.attachShader( webgl.shaderProgram, webgl.vertexShader );
  gl.attachShader( webgl.shaderProgram, webgl.fragmentShader );
 
  gl.linkProgram( webgl.shaderProgram );
  gl.useProgram( webgl.shaderProgram );
 
  webgl.posAttribLoc = gl.getAttribLocation( webgl.shaderProgram, 'a_pos' );
  webgl.posBuffer = gl.createBuffer();
 
  gl.enableVertexAttribArray( webgl.posAttribLoc );
  gl.bindBuffer( gl.ARRAY_BUFFER, webgl.posBuffer );
  gl.vertexAttribPointer( webgl.posAttribLoc, 2, gl.FLOAT, false, 0, 0 );
 
  webgl.resUniformLoc = gl.getUniformLocation( webgl.shaderProgram, 'u_res' );
  webgl.paramsUniformLoc = gl.getUniformLocation( webgl.shaderProgram, 'u_params' );
 
  gl.viewport( 0, 0, w, h );
  gl.uniform2f( webgl.resUniformLoc, w, h );
 
  gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA );
  gl.enable( gl.BLEND );
 
  gl.lineWidth( opts.dropWidth );
 
  webgl.posData = [];
  webgl.clear = function(){
      webgl.posData = [
          0, 0,
          w, 0,
          0, h,
          0, h,
          w, 0,
          w, h
      ];
      gl.uniform2f( webgl.paramsUniformLoc, 0, 1 );
      webgl.draw( gl.TRIANGLES );
      webgl.posData.length = 0;
  }
  webgl.draw = function( glType ){
      gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( webgl.posData ), gl.STATIC_DRAW );
      gl.drawArrays( glType, 0, webgl.posData.length / 2 );
  }
 
  function Drop( x ){
      this.x = x;
      this.reset();
      this.y = Math.random() * h;
  }
  Drop.prototype.reset = function(){
      this.y = 0;
      this.vy = opts.dropBaseSpeed + opts.dropAddedSpeed * Math.random();
  }
  Drop.prototype.step = function(){
       
      if( this.y > h ){
          if( Math.random() < opts.dropRespawnChance )
              return this.reset();
          else
              return 0;
      }
       
      var ny = this.y + ( this.vy += opts.acc );
       
      webgl.posData.push(
          this.x, this.y,
          this.x, ny
      );
      this.y = ny;
       
  }
  var drops = []
      ,   tick = 0;
 
  createDrops();
 
  function createDrops(){
      drops.length = 0;
       
      for( var i = 0; i < w; i += opts.dropSpacing ){
          for( var j = 0; j < opts.dropsParColumn; ++j )
              drops.push( new Drop( i ) );
      }
  }
  function anim(){
      window.requestAnimationFrame( anim );
      tick += opts.tickSpeed;
       
      webgl.clear();
      gl.uniform2f( webgl.paramsUniformLoc, tick, 0 );
       
      drops.map( function( drop ){ drop.step(); } );
       
      webgl.draw( gl.LINES );
  }
  anim();
 
  window.addEventListener( 'resize', function(){
       
      w = c.width = window.innerWidth;
      h = c.height = window.innerHeight;
      gl.viewport( 0, 0, w, h );
      gl.uniform2f( webgl.resUniformLoc, w, h );
       
      createDrops();
  })
    </script>
  </body>
</html>


Le problème, c'est que l'animation est en dessous du texte.

Je voudrais qu'elle soit en fond.
A voir également:

6 réponses

Réponse 1 / 6
SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 100
Modifié le 18 mai 2019 à 18:12
Regarde mieux ce que je t'ai passer :/ c'est pas compliqué, il y a juste à adapter.

PS: J'ai modifier 2, 3 truc pour si ton texte depasse de la page et commenter vite fait mes ajouts et corrections du code. 

<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Site web HTML CSS</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="'text/css" href="JEU.css"/><!--On doit definir l'attribut "type"-->
    <style>
    html, body{
     margin: 0;
     padding: 0;
        overflow:hidden;/*On masque si ça depasse de la page*/
    }

     canvas {      
      background-color: #111;
    }
    
    h1{
     color: white;
     font-size: 2em;
     text-shadow: red 1px 2px;
    }
 p{
  color: rgb(181, 181, 170);
  font-size: 1.5em; 
  text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
 }
 p, h1{
  margin-left: 1vw;
  margin-right: 1vw;
 }
    </style>
  </head>
  <body>
  <div style="float:left;"><!--On place le canvas en haut à gauche-->
   <canvas id="c"></canvas><!--N'oublie pas de mettre le c entre guillemets (") !-->
    </div>
    <div style="position:fixed;color:white;"><!--On dit que la div ne doit pas bouger et "ignorer" le canvas-->
  <div style="overflow: auto; max-height: 100vh;"><!--On permet au bar de defilement sur le coté de s'afficher-->
<!--TU PLACE A L'INTERIEUR TOUT LE CONTENU DE TA PAGE (menu, footers, texte…)-->
  <nav>
      <ul>
          <li class="menu-html"><a href="html.html">Acceuil</a>
              <ul class="submenu">
        <li><a href="page1.html">JEU MAX</a></li>
      <li><a href="page2.html">LOGICIEL</a></li>
              </ul>
          </li>
          <li class="menu-css"><a href="html.html">A propos</a>
              <ul class="submenu">
                  <li><a href="page3.html">FAQ</a></li>
      <li><a href="page4.html">Space Invader</a></li>
              </ul>
          </li>
          <li class="menu-javascript"><a href="javascript.html">Contact</a>
              <ul class="submenu">
                  <li><a href="page5.html">M'envoyer un Message</a></li>
              </ul>
          </li>
      </ul>
  </nav>
 
  <h1> SPACE INVADER </h1>
  <p>Space Invaders スペースインベーダー (Supēsu Inbēdā?) est un jeu vidéo développé par la société japonaise Taito, sorti en 1978 sur borne d'arcade. Il s'agit d'un shoot them up fixe. Tomohiro Nishikado conçoit et programme le jeu. Il s'inspire de plusieurs médias populaires de l'époque pour réaliser Space Invaders tels que Breakout ou La Guerre des mondes. Considéré comme le premier archétype du shoot them up, il est aussi l'un des titres les plus influents et célèbres de l'histoire du jeu vidéo.</p>
  <p>Le principe est de détruire des vagues d'aliens au moyen d'un canon laser en se déplaçant horizontalement sur l'écran. Il fait partie des classiques du jeu vidéo au même titre que Pac-Man et d'autres de ses contemporains. Il contribue à élargir l'industrie du jeu vidéo au niveau mondial. Space Invaders rencontre un énorme succès populaire. Après sa sortie au Japon, il aurait entraîné une pénurie de pièces de 100 yens. En 2007, Taito annonce que le jeu a rapporté 500 millions de dollars de recettes depuis sa parution.</p>
  <p>Ce jeu influence beaucoup de titres et connaît plusieurs suites. Il est adapté sur de nombreux supports (Atari 2600, Atari 5200, MSX, NES, etc.). En 1980, la sortie de la version pour l'Atari 2600 permet de quadrupler les ventes de la plate-forme. De ce fait, il devient le premier titre dit « killer application » pour les consoles de jeux vidéo. Space Invaders est référencé et parodié dans de nombreuses émissions de télévision et expositions culturelles. La représentation par des pixels des aliens dans le jeu devient une icône médiatique pour symboliser le monde des jeux vidéo.</p>
<!--FIN DU CONTENU DE TA PAGE (menu, footers, texte…)-->
 </div>
 </div>

<!-- Pour les <script> plus besoin de mettre : type="text/javascript" car ça l'est déjà de base en HTML5.-->
  <script>
      var gl = c.getContext( 'experimental-webgl', { preserveDrawingBuffer: true } )
      ,   w = c.width = window.innerWidth
      ,   h = c.height = window.innerHeight + 30
 
      ,   opts = {
          dropWidth: .5,
          dropSpacing: 1,
          dropsParColumn: 3,
          dropBaseSpeed: .01,
          dropAddedSpeed: .005,
          dropAlpha: .6,
          dropRespawnChance: .1,
          acc: .1,
          tickSpeed: 1/360
      };
 
  var webgl = {};
  webgl.vertexShaderSource = `
  attribute vec2 a_pos;
  uniform vec2 u_res;
  uniform vec2 u_params;
  varying float hue;
 
  void main(){
      gl_Position = vec4( vec2(1,-1) * ( ( ( a_pos + vec2(.5,0) ) / u_res ) * 2. - 1. ), 0, 1 );
      hue = u_params.y == 1. ? -1. : ( a_pos.x + a_pos.y * .1 ) / u_res.x + u_params.x;
  }
  `
  webgl.fragmentShaderSource = `
  precision mediump float;
  varying float hue;
 
  void main(){
      gl_FragColor = hue == -1. ? vec4( 0, 0, 0, .04 ) : vec4( clamp( abs( mod( hue * 6. + vec3( 0, 4, 2 ), 6. ) - 3. ) -1., 0., 1. ), ${opts.dropAlpha} );
  }
  `
 
  webgl.vertexShader = gl.createShader( gl.VERTEX_SHADER );
  gl.shaderSource( webgl.vertexShader, webgl.vertexShaderSource );
  gl.compileShader( webgl.vertexShader );
 
  webgl.fragmentShader = gl.createShader( gl.FRAGMENT_SHADER );
  gl.shaderSource( webgl.fragmentShader, webgl.fragmentShaderSource );
  gl.compileShader( webgl.fragmentShader );
 
  webgl.shaderProgram = gl.createProgram();
  gl.attachShader( webgl.shaderProgram, webgl.vertexShader );
  gl.attachShader( webgl.shaderProgram, webgl.fragmentShader );
 
  gl.linkProgram( webgl.shaderProgram );
  gl.useProgram( webgl.shaderProgram );
 
  webgl.posAttribLoc = gl.getAttribLocation( webgl.shaderProgram, 'a_pos' );
  webgl.posBuffer = gl.createBuffer();
 
  gl.enableVertexAttribArray( webgl.posAttribLoc );
  gl.bindBuffer( gl.ARRAY_BUFFER, webgl.posBuffer );
  gl.vertexAttribPointer( webgl.posAttribLoc, 2, gl.FLOAT, false, 0, 0 );
 
  webgl.resUniformLoc = gl.getUniformLocation( webgl.shaderProgram, 'u_res' );
  webgl.paramsUniformLoc = gl.getUniformLocation( webgl.shaderProgram, 'u_params' );
 
  gl.viewport( 0, 0, w, h );
  gl.uniform2f( webgl.resUniformLoc, w, h );
 
  gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA );
  gl.enable( gl.BLEND );
 
  gl.lineWidth( opts.dropWidth );
 
  webgl.posData = [];
  webgl.clear = function(){
      webgl.posData = [
          0, 0,
          w, 0,
          0, h,
          0, h,
          w, 0,
          w, h
      ];
      gl.uniform2f( webgl.paramsUniformLoc, 0, 1 );
      webgl.draw( gl.TRIANGLES );
      webgl.posData.length = 0;
  }
  webgl.draw = function( glType ){
      gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( webgl.posData ), gl.STATIC_DRAW );
      gl.drawArrays( glType, 0, webgl.posData.length / 2 );
  }
 
  function Drop( x ){
      this.x = x;
      this.reset();
      this.y = Math.random() * h;
  }
  Drop.prototype.reset = function(){
      this.y = 0;
      this.vy = opts.dropBaseSpeed + opts.dropAddedSpeed * Math.random();
  }
  Drop.prototype.step = function(){
       
      if( this.y > h ){
          if( Math.random() < opts.dropRespawnChance )
              return this.reset();
          else
              return 0;
      }
       
      var ny = this.y + ( this.vy += opts.acc );
       
      webgl.posData.push(
          this.x, this.y,
          this.x, ny
      );
      this.y = ny;
       
  }
  var drops = []
      ,   tick = 0;
 
  createDrops();
 
  function createDrops(){
      drops.length = 0;
       
      for( var i = 0; i < w; i += opts.dropSpacing ){
          for( var j = 0; j < opts.dropsParColumn; ++j )
              drops.push( new Drop( i ) );
      }
  }
  function anim(){
      window.requestAnimationFrame( anim );
      tick += opts.tickSpeed;
       
      webgl.clear();
      gl.uniform2f( webgl.paramsUniformLoc, tick, 0 );
       
      drops.map( function( drop ){ drop.step(); } );
       
      webgl.draw( gl.LINES );
  }
  anim();
 
  window.addEventListener( 'resize', function(){
       
      w = c.width = window.innerWidth;
      h = c.height = window.innerHeight + 30;
      gl.viewport( 0, 0, w, h );
      gl.uniform2f( webgl.resUniformLoc, w, h );
       
      createDrops();
  })
    </script>
  </body>
</html>


1
uniuc Messages postés 196 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 29 juin 2023 8
Modifié le 19 mai 2019 à 00:46
@SioGabx
En fait ne te prend pas trop la tête, Max est du genre à manger à tout les râteliers en le faisant faire et ne dit merci qu'une fois sur 10. Cette question on lui a déjà résolu depuis le 9 mai.

https://openclassrooms.com/forum/sujet/effet-pluie-de-couleur-1
0
Réponse 2 / 6
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 1
16 mai 2019 à 19:55
Up
0
Réponse 3 / 6
SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 100
16 mai 2019 à 21:37
Tu pourrais envoyer ton code css?
0
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 1
16 mai 2019 à 21:50 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>TEST</title>
    <style>
     canvas {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #111;
}
    </style>
 </head>
  <body>
    <canvas id=c></canvas>
    <script type="text/javascript">
    var gl = c.getContext( 'experimental-webgl', { preserveDrawingBuffer: true } )
    ,   w = c.width = window.innerWidth
    ,   h = c.height = window.innerHeight

    ,   opts = {
        dropWidth: .5,
        dropSpacing: 1,
        dropsParColumn: 3,
        dropBaseSpeed: .01,
        dropAddedSpeed: .005,
        dropAlpha: .6,
        dropRespawnChance: .1,
        acc: .1,
        tickSpeed: 1/360
    };

var webgl = {};
webgl.vertexShaderSource = `
attribute vec2 a_pos;
uniform vec2 u_res;
uniform vec2 u_params;
varying float hue;

void main(){
    gl_Position = vec4( vec2(1,-1) * ( ( ( a_pos + vec2(.5,0) ) / u_res ) * 2. - 1. ), 0, 1 );
    hue = u_params.y == 1. ? -1. : ( a_pos.x + a_pos.y * .1 ) / u_res.x + u_params.x;
}
`
webgl.fragmentShaderSource = `
precision mediump float;
varying float hue;

void main(){
    gl_FragColor = hue == -1. ? vec4( 0, 0, 0, .04 ) : vec4( clamp( abs( mod( hue * 6. + vec3( 0, 4, 2 ), 6. ) - 3. ) -1., 0., 1. ), ${opts.dropAlpha} );
}
`

webgl.vertexShader = gl.createShader( gl.VERTEX_SHADER );
gl.shaderSource( webgl.vertexShader, webgl.vertexShaderSource );
gl.compileShader( webgl.vertexShader );

webgl.fragmentShader = gl.createShader( gl.FRAGMENT_SHADER );
gl.shaderSource( webgl.fragmentShader, webgl.fragmentShaderSource );
gl.compileShader( webgl.fragmentShader );

webgl.shaderProgram = gl.createProgram();
gl.attachShader( webgl.shaderProgram, webgl.vertexShader );
gl.attachShader( webgl.shaderProgram, webgl.fragmentShader );

gl.linkProgram( webgl.shaderProgram );
gl.useProgram( webgl.shaderProgram );

webgl.posAttribLoc = gl.getAttribLocation( webgl.shaderProgram, 'a_pos' );
webgl.posBuffer = gl.createBuffer();

gl.enableVertexAttribArray( webgl.posAttribLoc );
gl.bindBuffer( gl.ARRAY_BUFFER, webgl.posBuffer );
gl.vertexAttribPointer( webgl.posAttribLoc, 2, gl.FLOAT, false, 0, 0 );

webgl.resUniformLoc = gl.getUniformLocation( webgl.shaderProgram, 'u_res' );
webgl.paramsUniformLoc = gl.getUniformLocation( webgl.shaderProgram, 'u_params' );

gl.viewport( 0, 0, w, h );
gl.uniform2f( webgl.resUniformLoc, w, h );

gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA );
gl.enable( gl.BLEND );

gl.lineWidth( opts.dropWidth );

webgl.posData = [];
webgl.clear = function(){
    webgl.posData = [
        0, 0,
        w, 0,
        0, h,
        0, h,
        w, 0,
        w, h
    ];
    gl.uniform2f( webgl.paramsUniformLoc, 0, 1 );
    webgl.draw( gl.TRIANGLES );
    webgl.posData.length = 0;
}
webgl.draw = function( glType ){
    gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( webgl.posData ), gl.STATIC_DRAW );
    gl.drawArrays( glType, 0, webgl.posData.length / 2 );
}

function Drop( x ){
    this.x = x;
    this.reset();
    this.y = Math.random() * h;
}
Drop.prototype.reset = function(){
    this.y = 0;
    this.vy = opts.dropBaseSpeed + opts.dropAddedSpeed * Math.random();
}
Drop.prototype.step = function(){
    
    if( this.y > h ){
        if( Math.random() < opts.dropRespawnChance )
            return this.reset();
        else
            return 0;
    }
    
    var ny = this.y + ( this.vy += opts.acc );
    
    webgl.posData.push(
        this.x, this.y,
        this.x, ny
    );
    this.y = ny;
    
}
var drops = []
    ,   tick = 0;

createDrops();

function createDrops(){
    drops.length = 0;
    
    for( var i = 0; i < w; i += opts.dropSpacing ){
        for( var j = 0; j < opts.dropsParColumn; ++j )
            drops.push( new Drop( i ) );
    }
}
function anim(){
    window.requestAnimationFrame( anim );
    tick += opts.tickSpeed;
    
    webgl.clear();
    gl.uniform2f( webgl.paramsUniformLoc, tick, 0 );
    
    drops.map( function( drop ){ drop.step(); } );
    
    webgl.draw( gl.LINES );
}
anim();

window.addEventListener( 'resize', function(){
    
    w = c.width = window.innerWidth;
    h = c.height = window.innerHeight;
    gl.viewport( 0, 0, w, h );
    gl.uniform2f( webgl.resUniformLoc, w, h );
    
    createDrops();
})
    </script>
  </body>
</html>
0
SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 100 > MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021
16 mai 2019 à 22:09
Le css c'est le contenu de : 
<link rel="stylesheet" href="JEU.css"/>
donc "JEU.css"
0
Réponse 4 / 6
SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 100
16 mai 2019 à 22:39
Bon, je t'ai fait le truc : 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>TEST</title>
    <style>
     canvas {
    top: 0;
    left: 0;
    background-color: #111;
}
    </style>
 </head>
  <body style="margin:0;">
  <div style="float:left;">
    <canvas id="c"></canvas>
    </div>
    <div style="position:fixed;color:white;">
    <a>Je suis un texte. Je peux être remplacer par une div ou autre. De rien</a>
    </div>
    
    <script type="text/javascript">
    var gl = c.getContext( 'experimental-webgl', { preserveDrawingBuffer: true } )
    ,   w = c.width = window.innerWidth
    ,   h = c.height = window.innerHeight

    ,   opts = {
        dropWidth: .5,
        dropSpacing: 1,
        dropsParColumn: 3,
        dropBaseSpeed: .01,
        dropAddedSpeed: .005,
        dropAlpha: .6,
        dropRespawnChance: .1,
        acc: .1,
        tickSpeed: 1/360
    };

var webgl = {};
webgl.vertexShaderSource = `
attribute vec2 a_pos;
uniform vec2 u_res;
uniform vec2 u_params;
varying float hue;

void main(){
    gl_Position = vec4( vec2(1,-1) * ( ( ( a_pos + vec2(.5,0) ) / u_res ) * 2. - 1. ), 0, 1 );
    hue = u_params.y == 1. ? -1. : ( a_pos.x + a_pos.y * .1 ) / u_res.x + u_params.x;
}
`
webgl.fragmentShaderSource = `
precision mediump float;
varying float hue;

void main(){
    gl_FragColor = hue == -1. ? vec4( 0, 0, 0, .04 ) : vec4( clamp( abs( mod( hue * 6. + vec3( 0, 4, 2 ), 6. ) - 3. ) -1., 0., 1. ), ${opts.dropAlpha} );
}
`

webgl.vertexShader = gl.createShader( gl.VERTEX_SHADER );
gl.shaderSource( webgl.vertexShader, webgl.vertexShaderSource );
gl.compileShader( webgl.vertexShader );

webgl.fragmentShader = gl.createShader( gl.FRAGMENT_SHADER );
gl.shaderSource( webgl.fragmentShader, webgl.fragmentShaderSource );
gl.compileShader( webgl.fragmentShader );

webgl.shaderProgram = gl.createProgram();
gl.attachShader( webgl.shaderProgram, webgl.vertexShader );
gl.attachShader( webgl.shaderProgram, webgl.fragmentShader );

gl.linkProgram( webgl.shaderProgram );
gl.useProgram( webgl.shaderProgram );

webgl.posAttribLoc = gl.getAttribLocation( webgl.shaderProgram, 'a_pos' );
webgl.posBuffer = gl.createBuffer();

gl.enableVertexAttribArray( webgl.posAttribLoc );
gl.bindBuffer( gl.ARRAY_BUFFER, webgl.posBuffer );
gl.vertexAttribPointer( webgl.posAttribLoc, 2, gl.FLOAT, false, 0, 0 );

webgl.resUniformLoc = gl.getUniformLocation( webgl.shaderProgram, 'u_res' );
webgl.paramsUniformLoc = gl.getUniformLocation( webgl.shaderProgram, 'u_params' );

gl.viewport( 0, 0, w, h );
gl.uniform2f( webgl.resUniformLoc, w, h );

gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA );
gl.enable( gl.BLEND );

gl.lineWidth( opts.dropWidth );

webgl.posData = [];
webgl.clear = function(){
    webgl.posData = [
        0, 0,
        w, 0,
        0, h,
        0, h,
        w, 0,
        w, h
    ];
    gl.uniform2f( webgl.paramsUniformLoc, 0, 1 );
    webgl.draw( gl.TRIANGLES );
    webgl.posData.length = 0;
}
webgl.draw = function( glType ){
    gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( webgl.posData ), gl.STATIC_DRAW );
    gl.drawArrays( glType, 0, webgl.posData.length / 2 );
}

function Drop( x ){
    this.x = x;
    this.reset();
    this.y = Math.random() * h;
}
Drop.prototype.reset = function(){
    this.y = 0;
    this.vy = opts.dropBaseSpeed + opts.dropAddedSpeed * Math.random();
}
Drop.prototype.step = function(){
    if( this.y > h ){
        if( Math.random() < opts.dropRespawnChance )
            return this.reset();
        else
            return 0;
    }
    
    var ny = this.y + ( this.vy += opts.acc );
    webgl.posData.push(
        this.x, this.y,
        this.x, ny
    );
    this.y = ny;
}
var drops = []
    ,   tick = 0;
createDrops();
function createDrops(){
    drops.length = 0;
    for( var i = 0; i < w; i += opts.dropSpacing ){
        for( var j = 0; j < opts.dropsParColumn; ++j )
            drops.push( new Drop( i ) );
    }
}
function anim(){
    window.requestAnimationFrame( anim );
    tick += opts.tickSpeed;
    webgl.clear();
    gl.uniform2f( webgl.paramsUniformLoc, tick, 0 );
    drops.map( function( drop ){ drop.step(); } );
    webgl.draw( gl.LINES );
}
anim();
window.addEventListener( 'resize', function(){
    w = c.width = window.innerWidth;
    h = c.height = window.innerHeight;
    gl.viewport( 0, 0, w, h );
    gl.uniform2f( webgl.resUniformLoc, w, h );
    createDrops();
})
    </script>
  </body>
</html>

0
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 1
17 mai 2019 à 19:30
Ça fonctionne, mais il manque le menu déroulant : 

<!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Site web HTML CSS</title>
  <meta charset="utf-8"/>
  <link rel="stylesheet" href="JEU.css"/>
    </head>
    <body>
        <nav>
            <ul>
                <li class="menu-html"><a href="JEU MAX.html">Acceuil</a>
                    <ul class="submenu">
					    <li><a href="page0.html">SOMMAIRE</a></li>
					    <li><a href="page1.html">JEU MAX</a></li>
						<li><a href="page2.html">LOGICIEL</a></li>
                    </ul>
                </li>
                <li class="menu-css"><a href="html.html">A propos</a>
                    <ul class="submenu">
                        <li><a href="page3.html">FAQ</a></li>
						<li><a href="page4.html">Space Invader</a></li>
                    </ul>
                </li>
                <li class="menu-javascript"><a href="javascript.html">Contact</a>
                    <ul class="submenu">
                        <li><a href="page5.html">M'envoyer un Message</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </body>
</html>
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 6
uniuc Messages postés 196 Date d'inscription samedi 23 juin 2007 Statut Membre Dernière intervention 29 juin 2023 8
17 mai 2019 à 19:50 
<!DOCTYPE html>
<html lang="fr">
  <head>
    <title>Site web HTML CSS</title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="JEU.css"/>
    <style>
    html, body{
    	margin: 0;
    	padding: 0;
    }

     canvas {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -10;
      background-color: #111;
    }
    h1{
    	color: white;
    	font-size: 2em;
    	text-shadow: red 1px 2px;
    }
	p{
		color: rgb(181, 181, 170);
		font-size: 1.5em;	
		text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
	}
	p, h1{
		margin-left: 1vw;
		margin-right: 1vw;
	}
    </style>
  </head>
  <body>
  	<canvas id=c></canvas>
  <nav>
      <ul>
          <li class="menu-html"><a href="html.html">Acceuil</a>
              <ul class="submenu">
        <li><a href="page1.html">JEU MAX</a></li>
      <li><a href="page2.html">LOGICIEL</a></li>
              </ul>
          </li>
          <li class="menu-css"><a href="html.html">A propos</a>
              <ul class="submenu">
                  <li><a href="page3.html">FAQ</a></li>
      <li><a href="page4.html">Space Invader</a></li>
              </ul>
          </li>
          <li class="menu-javascript"><a href="javascript.html">Contact</a>
              <ul class="submenu">
                  <li><a href="page5.html">M'envoyer un Message</a></li>
              </ul>
          </li>
      </ul>
  </nav>
 
  <h1> SPACE INVADER </h1>
  <p>Space Invaders スペースインベーダー (Supēsu Inbēdā?) est un jeu vidéo développé par la société japonaise Taito, sorti en 1978 sur borne d'arcade. Il s'agit d'un shoot them up fixe. Tomohiro Nishikado conçoit et programme le jeu. Il s'inspire de plusieurs médias populaires de l'époque pour réaliser Space Invaders tels que Breakout ou La Guerre des mondes. Considéré comme le premier archétype du shoot them up, il est aussi l'un des titres les plus influents et célèbres de l'histoire du jeu vidéo.</p>
  <p>Le principe est de détruire des vagues d'aliens au moyen d'un canon laser en se déplaçant horizontalement sur l'écran. Il fait partie des classiques du jeu vidéo au même titre que Pac-Man et d'autres de ses contemporains. Il contribue à élargir l'industrie du jeu vidéo au niveau mondial. Space Invaders rencontre un énorme succès populaire. Après sa sortie au Japon, il aurait entraîné une pénurie de pièces de 100 yens. En 2007, Taito annonce que le jeu a rapporté 500 millions de dollars de recettes depuis sa parution.</p>
  <p>Ce jeu influence beaucoup de titres et connaît plusieurs suites. Il est adapté sur de nombreux supports (Atari 2600, Atari 5200, MSX, NES, etc.). En 1980, la sortie de la version pour l'Atari 2600 permet de quadrupler les ventes de la plate-forme. De ce fait, il devient le premier titre dit « killer application » pour les consoles de jeux vidéo. Space Invaders est référencé et parodié dans de nombreuses émissions de télévision et expositions culturelles. La représentation par des pixels des aliens dans le jeu devient une icône médiatique pour symboliser le monde des jeux vidéo.</p>
 

  <script type="text/javascript">
      var gl = c.getContext( 'experimental-webgl', { preserveDrawingBuffer: true } )
      ,   w = c.width = window.innerWidth
      ,   h = c.height = window.innerHeight
 
      ,   opts = {
          dropWidth: .5,
          dropSpacing: 1,
          dropsParColumn: 3,
          dropBaseSpeed: .01,
          dropAddedSpeed: .005,
          dropAlpha: .6,
          dropRespawnChance: .1,
          acc: .1,
          tickSpeed: 1/360
      };
 
  var webgl = {};
  webgl.vertexShaderSource = `
  attribute vec2 a_pos;
  uniform vec2 u_res;
  uniform vec2 u_params;
  varying float hue;
 
  void main(){
      gl_Position = vec4( vec2(1,-1) * ( ( ( a_pos + vec2(.5,0) ) / u_res ) * 2. - 1. ), 0, 1 );
      hue = u_params.y == 1. ? -1. : ( a_pos.x + a_pos.y * .1 ) / u_res.x + u_params.x;
  }
  `
  webgl.fragmentShaderSource = `
  precision mediump float;
  varying float hue;
 
  void main(){
      gl_FragColor = hue == -1. ? vec4( 0, 0, 0, .04 ) : vec4( clamp( abs( mod( hue * 6. + vec3( 0, 4, 2 ), 6. ) - 3. ) -1., 0., 1. ), ${opts.dropAlpha} );
  }
  `
 
  webgl.vertexShader = gl.createShader( gl.VERTEX_SHADER );
  gl.shaderSource( webgl.vertexShader, webgl.vertexShaderSource );
  gl.compileShader( webgl.vertexShader );
 
  webgl.fragmentShader = gl.createShader( gl.FRAGMENT_SHADER );
  gl.shaderSource( webgl.fragmentShader, webgl.fragmentShaderSource );
  gl.compileShader( webgl.fragmentShader );
 
  webgl.shaderProgram = gl.createProgram();
  gl.attachShader( webgl.shaderProgram, webgl.vertexShader );
  gl.attachShader( webgl.shaderProgram, webgl.fragmentShader );
 
  gl.linkProgram( webgl.shaderProgram );
  gl.useProgram( webgl.shaderProgram );
 
  webgl.posAttribLoc = gl.getAttribLocation( webgl.shaderProgram, 'a_pos' );
  webgl.posBuffer = gl.createBuffer();
 
  gl.enableVertexAttribArray( webgl.posAttribLoc );
  gl.bindBuffer( gl.ARRAY_BUFFER, webgl.posBuffer );
  gl.vertexAttribPointer( webgl.posAttribLoc, 2, gl.FLOAT, false, 0, 0 );
 
  webgl.resUniformLoc = gl.getUniformLocation( webgl.shaderProgram, 'u_res' );
  webgl.paramsUniformLoc = gl.getUniformLocation( webgl.shaderProgram, 'u_params' );
 
  gl.viewport( 0, 0, w, h );
  gl.uniform2f( webgl.resUniformLoc, w, h );
 
  gl.blendFunc( gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA );
  gl.enable( gl.BLEND );
 
  gl.lineWidth( opts.dropWidth );
 
  webgl.posData = [];
  webgl.clear = function(){
      webgl.posData = [
          0, 0,
          w, 0,
          0, h,
          0, h,
          w, 0,
          w, h
      ];
      gl.uniform2f( webgl.paramsUniformLoc, 0, 1 );
      webgl.draw( gl.TRIANGLES );
      webgl.posData.length = 0;
  }
  webgl.draw = function( glType ){
      gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( webgl.posData ), gl.STATIC_DRAW );
      gl.drawArrays( glType, 0, webgl.posData.length / 2 );
  }
 
  function Drop( x ){
      this.x = x;
      this.reset();
      this.y = Math.random() * h;
  }
  Drop.prototype.reset = function(){
      this.y = 0;
      this.vy = opts.dropBaseSpeed + opts.dropAddedSpeed * Math.random();
  }
  Drop.prototype.step = function(){
       
      if( this.y > h ){
          if( Math.random() < opts.dropRespawnChance )
              return this.reset();
          else
              return 0;
      }
       
      var ny = this.y + ( this.vy += opts.acc );
       
      webgl.posData.push(
          this.x, this.y,
          this.x, ny
      );
      this.y = ny;
       
  }
  var drops = []
      ,   tick = 0;
 
  createDrops();
 
  function createDrops(){
      drops.length = 0;
       
      for( var i = 0; i < w; i += opts.dropSpacing ){
          for( var j = 0; j < opts.dropsParColumn; ++j )
              drops.push( new Drop( i ) );
      }
  }
  function anim(){
      window.requestAnimationFrame( anim );
      tick += opts.tickSpeed;
       
      webgl.clear();
      gl.uniform2f( webgl.paramsUniformLoc, tick, 0 );
       
      drops.map( function( drop ){ drop.step(); } );
       
      webgl.draw( gl.LINES );
  }
  anim();
 
  window.addEventListener( 'resize', function(){
       
      w = c.width = window.innerWidth;
      h = c.height = window.innerHeight;
      gl.viewport( 0, 0, w, h );
      gl.uniform2f( webgl.resUniformLoc, w, h );
       
      createDrops();
  })
    </script>
  </body>
</html>


--
0
Réponse 6 / 6
MaxBMX17 Messages postés 68 Date d'inscription vendredi 23 novembre 2018 Statut Membre Dernière intervention 20 octobre 2021 1
19 mai 2019 à 17:43
Merci pour vos réponses ;)
0

Discussions similaires

Transparence en tete et bas de page
Sabrina -
sabrina -

8 réponses
sertissage des cables rj45
lekludo -
brupala -

7 réponses
comment brancher cette multitude de fils
beaugilo -
baladur13 -

10 réponses
couleur personnage
Gasper -
Izzi -

9 réponses
Couleur transparente
ando26 -
Turtlee -

25 réponses