<!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.
Bon c'est pas la peine de faire tout les forums de France comme tu as pus voire j'y suis.
Et à chaque fois je te dit la même chose, z-index, si tu ne demande pas pourquoi c'est que tu cherche du tout cuit mais ca ne t'aideras pas.
Alors voila, mais bon, prend le temps de comprendre quand même que j'ai déplacé ton canvas en 1er et après que je lui ai intégré un z-index pour qu'il passe sous tous les ensembles restant, son z-index est de (-10) ca te laisse 9 couches au cas ou tu voudrais en rajouter une entre tes élément et le canvas.
<!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>
Compos sui.
Effet pluie de couleur
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Compos sui.
Compos sui.