Une navigation web comme un jeu-vidéo avec jQuery et CSS.

Bonjour tout le monde, ça faisait un moment que je n’avais pas posté, mais ceux qui suivent un peu mon actualité savent que je suis l’heureux papa d’une adorable petite fille dont voici le blog : Bonjour de Nina.

Pour ce retour, je vous présente une nouvelle idée que je compte utiliser pour un prochain site.
L’idée est assez simple, faire du site un véritable jeu. On oublie la souris et le côté ‘point and click’ des sites conventionnels et on transforme le curseur en un personnage qui va évoluer dans une page web construite comme un stage de Mario Bros ou ce que vous imaginerez.

Pour cet exemple, j’ai justement utilisé l’univers du célèbre plombier et un gameplay semblable : Avancer dans 2 directions et la possibilité de sauter. Ici les liens deviennent les blocs suspendus dans l’air, en les heurtant vous pourrez changer de page.

Voici la démonstration du site/jeu

Pour réaliser ce mini-jeu, nous allons comme toujours utiliser notre inépuisable bibliothèque jQuery et quelques plugins vraiment très utiles :

  • Le background position
  • Le plugin ‘easing’
  • Plugin pour des courbes
  • La structure HTML est vraiment minimale, on place tous les éléments composant la page en absolut afin d’intéragir facilement avec eux.

    Frappe-moi,j'suis un lien !
    Hit me,I'm a link !
    Retour /Go back.

    Et le CSS qui va avec, rien de compliqué, on positionne nos éléments comme on souhaite les voir apparaître, même si c’est surtout le javascript qui va faire tout le boulôt.

    body {
    	margin:0;
    	font-size:9px;
    	font-family:Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
    }
    #container {
    	width:1000px;
    	height:450px;
    	margin:0 auto;
    	position:relative;
    	background:#cbefff url(../images/decor.png) 0px 500px no-repeat;
    	overflow:hidden;
    }
    #perso {
    	position:absolute;
    	width:30px;
    	height:44px;
    	top:377px;
    	left:100px;
    	background:url(../images/mario.png) 0px 0px no-repeat;
    	overflow:hidden;
    }
    .case {
    	position:absolute;
    	width:43px;
    	height:35px;
    	background:url(../images/case.png) no-repeat;
    	top:268px;
    }
    .c1 { left:461px; }
    .c2 { left:791px; }
    .c3 { left:891px; }
    #legend {
    	position:absolute;
    	width:147px;
    	height:97px;
    	background:url(../images/legend.png) no-repeat;
    	top:20px;
    	left:20px;
    }
    .smile {
    	width:95px;
    	height:51px;
    	padding-top:50px;
    	text-align:center;
    	position:absolute;
    	background:url(../images/smile.png) no-repeat;
    	top:150px;
    }
    .s1 { left:435px; }
    .s2 { left:765px; }
    .s3 { left:865px; }
    

    Voyons sans plus attendre le coeur du sujet, le javascript. Je vais détailler les 2 parties principales du script, la mise en place du décor et les évènements de navigations.
    En effet, il fallait une petite introduction sympa à cette page, alors tous les éléments sont positionnés avec des animate et compagnie.

    $("#container").delay(1000).animate( /*Noté le 'delay', très pratique pour faire une pause.*/
    	{"backgroundPosition": "0px 0px"},
    	{
    		duration: 800,
    		easing: 'easeOutBounce' /*L'effet de rebondissement*/
    	});
    
    $(".case").css({top:-100});
    $(".case").delay(1200).animate(
    	{top:268},
    	{
    		duration: 1000,
    		easing: 'easeOutBounce'
    	});
    $("#perso").delay(1600).css({top:-100});
    $("#perso").delay(500).animate(
    	{top:377},
    	{
    		duration: 1000,
    		easing: 'easeOutBounce'
    	});
    $("#legend").hide().delay(1500).fadeIn(500);
    setInterval (function(){ /*Va nous permettre de faire tourner en boucle cette animation*/
    	$(".smile").animate({top:140},800).animate({top:150},800);
    },1600);
    $(".smile").hide().css({top:170}).delay(2000).fadeIn(200);
    

    Il est possible de réaliser tout une animation linéaire d’introduction grâce au javascript, et pourquoi pas faire tout un dessin animé ? :)

    Voici la partie ‘intéractive’ du javascript, c’est à dire à partir du moment où on presse une touche du clavier. Dans notre exemple seulement 3 touches entrainent des animations, nous allons donc utiliser de multiples conditions.
    Ce qui est important dans la plupart des jeux, ce sont les collisions entre les éléments. Ici nous n’allons pas vraiment en faire, nous allons les simuler en récupérant la position du personnage, et s’il se trouve à certains endroits quand il saute, nous saurons qu’il doit entrer en contact avec les cases.

    $(window).keydown(function(event) { /*Dès qu'une touche du clavier est enfoncée...*/
    	var pos = $("#perso").position().left; /*Cette variable récupère la position du personnage*/
    
    	if (event.keyCode == '39') { /*Si la flèche de droite est enfoncée*/
    		if ((pos > -10) && (pos < 970)) { /*Pour que le personnage ne sorte pas du champ*/
    			$("#perso")
    			.removeClass("dos") /*Si le personnage était dans l'autre direction*/
    			.css({
    				backgroundPosition: '0px 0px'
    			}).animate({ /*On le déplace vers la gauche*/
    				left: '+=5'
    			}, 20, "linear");
    		}
    	}
    	if (event.keyCode == 37) { /*Si on presse la flèche de gauche*/
    		if ((pos > 0) && (pos < 980)) {
    			$("#perso")
    			.addClass("dos")
    			.css({
    				backgroundPosition: '0px -44px'
    			}).animate({
    				left: '-=5'
    			}, 20, "linear");
    		}
    	}
    
    	var bezier_paramsdos = { /*Les variables pour gérer les courbes des sauts*/
    	    start: {
    	      x: pos,
    	      y: 377,
    	      angle: 350
    	    },
    	    end: {
    	      x: pos - 60,
    	      y: 377,
    	      angle: 100,
    	      length: -4
    	    }
    	}
    	var bezier_params = {
    	    start: {
    	      x: pos,
    	      y: 377,
    	      angle: 10
    	    },
    	    end: {
    	      x: pos + 60,
    	      y: 377,
    	      angle: 80,
    	      length: 4
    	    }
    	}
    
    	if (event.keyCode == '38') { /*Si on presse la flèche du haut*/
    		if ($("#perso").hasClass("dos")) { /*Si le personnage est tourné vers la gauche*/
    			if ((pos > 60) && (pos < 980)) {
    				if ((pos < 511) && (pos > 461)) { /*Si le saut est effectué dans cette zone il 'heurtera' une case*/
    					$(".c1").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/wp-content/themes/default/tuto/game/test_navig.html");
    					}); /*A la fin de l'animation, réorientation de la page.*/
    				};
    				if ((pos < 841) && (pos > 791)) { /*Si le saut est effectué dans cette zone il 'heurtera' une case*/
    					$(".c2").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/wp-content/themes/default/tuto/game/test_navig.html");
    					});
    				};
    				if ((pos < 941) && (pos > 891)) { /*Si le saut est effectué dans cette zone il 'heurtera' une case*/
    					$(".c3").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/?p=244");
    					});
    				};
    				$("#perso").stop(true, true).css({
    						backgroundPosition: '-30px -44px'
    					}).animate({
    					path: new $.path.bezier(bezier_paramsdos)
    				}, 500,function(){
    					$("#perso").css({backgroundPosition:'0px -44px'})
    				});
    			}
    		}
    		else {
    			if ((pos > 0) && (pos < 920)) { /*Si le personnage est tourné dans l'autre direction*/
    				if ((pos > 411) && (pos < 461)) {
    					$(".c1").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/wp-content/themes/default/tuto/game/test_navig.html");
    					});
    				};
    				if ((pos > 741) && (pos < 791)) {
    					$(".c2").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/wp-content/themes/default/tuto/game/test_navig.html");
    					});
    				};
    				if ((pos > 841) && (pos < 891)) {
    					$(".c3").delay(160).animate({
    						'top': '210px'
    					}, 200).fadeOut(200, function(){
    						$(location).attr('href',"http://web.virtuousquare.com/?p=244");
    					});
    				};
    				$("#perso").stop(true, true).css({
    						backgroundPosition: '-30px 0px'
    					}).animate({
    					path: new $.path.bezier(bezier_params)
    				}, 500,function(){
    					$("#perso").css({backgroundPosition:'0px 0px'})
    				});
    			}
    		}
    	}
    });
    

    Voici pour cette première approche des sites/jeux. La prochaine étape va être d'animer les personnages lorsqu'ils se déplacent, et au lieu d'utiliser des gifs, nous le ferons avec des sprits et du javascript bien sûr. ;)
    Puis nous tenterons de corser un peu la chose avec des monstres à éviter ou à anéantir... Bref, beaucoup de choses en perspective.
    A bientôt.

Une réponse à “Une navigation web comme un jeu-vidéo avec jQuery et CSS.”

  1. 1