Bonjour
J'ai trouvé ça qui me plaît : https://codepen.io/kyllaz/pen/qGdPvR
Le problème, c'est que l'animation est en dessous du texte.
Je voudrais qu'elle soit en fond.
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.