Transition entre deux pages.

Transition entre deux pages. - HTML/CSS - Programmation

Marsh Posté le 28-05-2014 à 11:17:48    

Bonjour tout le monde, tout d'abord désolé pour le titre peu explicite mais je ne savais pas trop quoi mettre. Ayant fini mon projet de cours sur le tower defense (d'ailleurs qui a bien plu aux profs), je viens vous demander un renseignement sur un projet personnel que je viens de commencer.
 
Voila donc ou en est le code pour l'instant même si je doute que cela vous aide pour ma question:
 
 

Code :
  1. window.onload = function(){
  3. var blocJeu = document.getElementById("blocJeu" );
  5. menuChoixDeVotreCamps();
  7. //blocJeu.innerHTML = ("salut" );
  9. }
  11. function menuChoixDeVotreCamps(){
  14. var boutonFaction1 = document.createElement("button" );
  15. var boutonFaction2 = document.createElement("button" );
  16. var boutonFaction3 = document.createElement("button" );
  17. var annonce = document.createElement("div" );
  20. annonce.className = "annonce";
  21. annonce.innerHTML = ("Choississez votre camp et combattez pour lui !" );
  23. boutonFaction1.className = "boutonChoixClan";
  24. boutonFaction1.style.backgroundImage = "url('imageGrec.png')";
  26. boutonFaction2.className = "boutonChoixClan";
  27. boutonFaction2.style.left = 37 +"%";
  28. boutonFaction2.style.backgroundImage = "url('imageRomain.png')";
  30. boutonFaction3.className = "boutonChoixClan";
  31. boutonFaction3.style.left =  69 + "%";
  32. boutonFaction3.style.backgroundImage = "url('imageEgyptien.png')";
  36. blocJeu.appendChild(annonce);
  37.     blocJeu.appendChild(boutonFaction1);
  38. blocJeu.appendChild(boutonFaction2);
  39. blocJeu.appendChild(boutonFaction3);
  41. boutonFaction1.addEventListener("click", clickSurGrec);
  42. boutonFaction2.addEventListener("click", clickSurRomain);
  43. boutonFaction3.addEventListener("click", clickSurEgyptien);
  47. }
  49. function informationFaction(){
  52. }
  54. function clickSurGrec(){
  56. var informationGrec = document.createElement("div" );
  58. informationGrec.className = "boutonInformation";
  60. blocJeu.appendChild(informationGrec);
  63. }
  64. function clickSurRomain(){
  66. var informationRomain = document.createElement("div" );
  68. informationRomain.className = "boutonInformation";
  69. informationRomain.style.left = 37 +"%";
  71. blocJeu.appendChild(informationRomain);
  74. }
  75. function clickSurEgyptien(){
  77. var informationEgyptien = document.createElement("div" );
  79. informationEgyptien.className = "boutonInformation";
  80. informationEgyptien.style.left =  69 + "%";
  82. blocJeu.appendChild(informationEgyptien);
  84. }


 
Je m'explique donc, le but du jeu n'a ici aucun importance, au début de la page, je laisse choisir au joueur, 3 choix pour la faction qu'il souhaite jouer. Selon le clic appliqué, je ferai donc fonctionner le programme. Là n'est pas l'important, c'est surtout, que je ne sais pas vraiment comment passer de la partie ou je clique sur le bouton pour le choix de la faction, à par exemple la vue du "nouveau" programme qui montre par exemple la vue sur les romains si le joueur a choisis ces derniers. J'ai pensé à faire tout simplement la suppression de annonce, bouton1/2/3 avec removeChild sur le blocJeu et ensuite lancer le code pour les romains, ou alors charger une nouvelle page dans blocJeu, supprimant donc je suppose le menu de choix. Y a t-il d'autres solutions ?  
 
Au passage une autre question, y a t'il un moyen de vérifier ou le joueur à cliquer ? Je m'explique, ici j'ai donc pour chaque addEventListener une fonction qui correspond à la faction choisis, serait-il possible de tout regrouper sur une même fonction du genre
 

Code :
  1. boutonFaction1.addEventListener("click", testFaction);
  2. boutonFaction2.addEventListener("click", testFaction);
  3. boutonFaction3.addEventListener("click", testFaction);
  5. // et donc ici de réaliser un test dans la fonction testFaction du style if(boutonFaction1 == "onclick" ){ /* executer un code*/ }


 
Même si la syntaxe n'est pas bonne, y a t-il moyen de faire ceci ?  
 
J'espère que c'est compréhensible sinon je reformulerai !
 
Merci bonne soirée

Reply

Marsh Posté le 28-05-2014 à 11:17:48   

Reply

Marsh Posté le 28-05-2014 à 13:23:08    

Tu es sur de vouloir te lancer dans la création d'un jeu from scratch sans aide d'un framework JS ?
 
Il faut au moins passer par un framework de manipulation du DOM (type JQuery), qui gère à minima les différences entre browser...
 
Pour le coup de l'eventListener comme vu ici ([ur]http://www.alsacreations.com/article/lire/578-La-gestion-des-evenements-en-JavaScript.html[/url]), il est possible d'interpréter l'objet "event" passé en paramètre (via event.target)
 
Mais sincèrement, utilise des librairies...

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed