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 :
- window.onload = function(){
- var blocJeu = document.getElementById("blocJeu" );
- menuChoixDeVotreCamps();
- //blocJeu.innerHTML = ("salut" );
- }
- function menuChoixDeVotreCamps(){
- var boutonFaction1 = document.createElement("button" );
- var boutonFaction2 = document.createElement("button" );
- var boutonFaction3 = document.createElement("button" );
- var annonce = document.createElement("div" );
- annonce.className = "annonce";
- annonce.innerHTML = ("Choississez votre camp et combattez pour lui !" );
- boutonFaction1.className = "boutonChoixClan";
- boutonFaction1.style.backgroundImage = "url('imageGrec.png')";
- boutonFaction2.className = "boutonChoixClan";
- boutonFaction2.style.left = 37 +"%";
- boutonFaction2.style.backgroundImage = "url('imageRomain.png')";
- boutonFaction3.className = "boutonChoixClan";
- boutonFaction3.style.left = 69 + "%";
- boutonFaction3.style.backgroundImage = "url('imageEgyptien.png')";
- blocJeu.appendChild(annonce);
- blocJeu.appendChild(boutonFaction1);
- blocJeu.appendChild(boutonFaction2);
- blocJeu.appendChild(boutonFaction3);
- boutonFaction1.addEventListener("click", clickSurGrec);
- boutonFaction2.addEventListener("click", clickSurRomain);
- boutonFaction3.addEventListener("click", clickSurEgyptien);
- }
- function informationFaction(){
- }
- function clickSurGrec(){
- var informationGrec = document.createElement("div" );
- informationGrec.className = "boutonInformation";
- blocJeu.appendChild(informationGrec);
- }
- function clickSurRomain(){
- var informationRomain = document.createElement("div" );
- informationRomain.className = "boutonInformation";
- informationRomain.style.left = 37 +"%";
- blocJeu.appendChild(informationRomain);
- }
- function clickSurEgyptien(){
- var informationEgyptien = document.createElement("div" );
- informationEgyptien.className = "boutonInformation";
- informationEgyptien.style.left = 69 + "%";
- blocJeu.appendChild(informationEgyptien);
- }
|
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 :
- boutonFaction1.addEventListener("click", testFaction);
- boutonFaction2.addEventListener("click", testFaction);
- boutonFaction3.addEventListener("click", testFaction);
- // 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
