[Résolu] [Vanilla Javascript] Comment quitter une fonction et ses list

Bonjour,

J'ai pas mal d'expérience avec html et css cependant je ne suis pas très bon avec javascript.

J'essaie de faire un petit jeu : la page se charge et le jeu se lance puis une liste de mots à deviner s'affiche en ajax. Si l'utilisateur appuie sur "Esc" le jeu s'arrête et le div qui contient le jeu disparait.

Voici ci-dessous ce que j'ai réussi à produire pour l'instant. Puisque j'aimerai partir sur de bonnes bases je souhaiterai simplement savoir si je n'ai pas fait de grosse erreur au niveau de la structure, en d'autes mots est-ce que mon début de code vous parrait une bonne base pour continuer:

var Game = function(gameDiv) {

    var settings = {};  
    settings.gameDiv = gameDiv; 

    function setupEvents() {

        document.addEventListener('keyup', function(event){

            var keyName = event.key;
        
            console.log(keyName);

            switch(keyName) {

                case "Escape":

                    quitGame(gameDiv);
                    break;
         
                default:

                    break;

            }

        });

    }

    setupEvents();
    var l = new ajaxLoadWords(settings);

}

var ajaxLoadWords = function(settings) {

  var xhttp = new XMLHttpRequest();

  xhttp.onreadystatechange = function() {

    if (this.readyState == 4 && this.status == 200) {
 
        settings.gameDiv.innerHTML = this.responseText;

    }

  };

  xhttp.open("POST", "https://www.mysite.fr/ajax.json", true);
  xhttp.send();

}

function quitGame(gameDiv) {

    gameDiv.classList.remove('visible');
    return false;
 
}

const gameDiv = document.querySelector("#gameDiv");
var g = new Game(gameDiv);

Merci et un bon confinement !
Modifié par ZlatenSkunk (07 Nov 2020 - 05:24)

Bonjour,

1) J'aurais mis toutes les déclarations de fonctions à l'intérieur de la déclaration de Game=function(){}

La raison, c'est que tu limites ainsi le nombre de déclarations globales, et donc le nombre de conflits potentiels avec d'autres codes javascript qui seraient aussi présents dans ta page. Et tout se fait par rapport à l'objet déclaré au départ (dans le code ci-dessus, représenté par la variable g).

Idéalement, il faudrait même encapsuler le tout dans une fonction anonyme dont le lancement se fait ainsi :

(function(){... tout ton code ici ...})();

Cela nécessitera peut-être quelques adaptations dans ton code si tu fais ça puisque tu n'auras plus rien de déclaré globalement. Mais a priori, rien d'impossible.

2) Je n'aurais pas utilisé la touche "esc" pour sortir du jeu pour 2 raisons principales :
- cette touche sert souvent déjà à autre chose dans les navigateurs, ce qui ne peut qu'engendrer de la confusion chez l'utilisateur (même si en pratique, ils finissent par arriver à s'en sortir, vu toutes les difficultés auxquelles ils sont confrontés),
- avec les machines à écran tactile, c'est "compliqué" pour l'utilisateur de sortir du jeu en appuyant sur une touche. Et comme tu voudras tôt ou tard que ton jeu marche aussi sur écran tactile, il te faudra faire des corrections potentiellement compliquées à ce moment-là.

Il vaut mieux un bon bouton "Quitter" ou bien un bouton avec une croix dans un rond ou bien encore un menu (éventuellement déroulant) avec un menu-item "Quitter".

3) Quand tu quittes le jeu, mieux vaut supprimer le contenu html dans lequel est le jeu plutôt que de le cacher avec du css.

Amicalement,
Modifié par parsimonhi (07 Nov 2020 - 10:10)

Merci Parsimonhi !