Imprimer
Catégorie : Tuto : Créer un site web pour la 3DS
Affichages : 622

Voilà pour la dernière partie du tuto. Dans cet exercice, vous devrez créer un petit script qui va détecter les boutons de la console (reportez-vous au chapitre précédent) et afficher le bouton appuyé sur l'écran du bas. C'est assez simple. Cliquez sur afficher la solution pour voir la solution commentée, une fois que vous aurez terminé. Bonne chance !

title-active=Masquer la solution

Exemple en ligne...


<!doctype html>
<html>
	<head>
		<title>Détection des boutons de la Nintendo 3DS et affichage du bouton appuyé</title>
		<meta name="viewport" content="width=320" /> <!-- indispensable pour afficher convenablement la page web -->
		<style type="text/css">
			div#ecranHaut
			{
				position: absolute;
				height: 218px;
				width: 320px;
				top: 0px;
				left: 0px;
				overflow: hidden;
			}
			div#ecranBas
			{
				position: absolute;
				height: 212px;
				width: 320px;
				top: 218px;
				left: 0px;
				overflow: auto;
			}
		</style>
		<script type="text/javascript">
		document.onkeydown = function(event) { // détecte l'appui sur un bouton quelconque et appelle une fonction anonyme
		var key_pressed; // déclaration de la variable qui va contenir le bouton qui a été appuyé
		if(event == null) {
			key_pressed = window.event.keyCode; 
		}
		else {
			key_pressed = event.keyCode; 
		}
		switch(key_pressed){ // switch avec comme paramètre la variable contenant le bouton pressé
			case 13: // si le bouton A est pressé (bouton Entrée sur un clavier standard d'ordinateur)
				document.getElementById("afficheurBouton").innerHTML='Bouton A pressé !'; // affiche le texte "Bouton A pressé !" dans l'élément ID "afficheurBouton"
				break;
			case 37: // si la croix directionnelle gauche est pressée
				document.getElementById("afficheurBouton").innerHTML='Bouton gauche pressé !';
				break;
			case 38: // si la croix directionnelle haut est pressée
				document.getElementById("afficheurBouton").innerHTML='Bouton haut pressé !';
				break;
			case 39: // si la croix directionnelle droite est pressée
				document.getElementById("afficheurBouton").innerHTML='Bouton droit pressé !';
				break;
			case 40: // si la croix directionnelle bas est pressée
				document.getElementById("afficheurBouton").innerHTML='Bouton bas pressé !';
				break;
		} 
	}
	</script>
	</head>
	<body>
	<div id="ecranHaut"></div>
	<div id="ecranBas">
	<span id="afficheurBouton"></span> <!-- élément qui va afficher le bouton pressé -->
	</div>
	<script type="text/javascript">
		window.setInterval(function () {window.scrollTo(40, 218);  }, 1);
	</script>
	</body>
</html>

Voilà, le tuto est terminé. L'étape suivante est une étape optionnelle, elle explique comment détecter en PHP si une Nintendo 3DS visite la page pour rediriger le visiteur. Pour toute suggestion, envoyez-moi un e-mail via le formulaire de contact.