Page 1 sur 1

javascript orienté objet

Posté : 15 avr. 2020, 17:13
par rakima001
Bonjour tout le monde,

je maîtrise vraiment pas js orienté objet, et il faut que je transforme cette ex à une classe avec constructeur et functions.
est ce que quelqu'un pourra regarder et me donner un coup de main svp!?
jeuModulePattern.js:

Code : Tout sélectionner


let jeuModulePattern = function () {
	
	// déclarer les variables du module
	// ce sont les variables communes à plusieurs des 3 fonctions du module pattern
	let td,tr,count=0,cibleTrouver;
	let eNbCoups, eGrille, eNbLigne, eNbColonne;
	let oCibleDansGrille = {
		 
		
		// fonction au chargement de la page
		// =================================

		initialiserPage: function () {
            // initialisation de la page
            eNbCoups = document.getElementById('nbCoups');
			eNbCoups.innerHTML = count;
			//count = 0;
			console.log("debut "+count);
            eGrille = document.getElementById('grille');
			frm=document.getElementById("frm");

            frm.nouveauJeu.addEventListener('click', function () {
                /* Effacer une éventuelle grille pré-existante : */
                while (eGrille.children.length > 0) {
                    eGrille.removeChild(eGrille.firstChild);
                }
                /*bind(this) pour récuérer le contexte de l'objet oCibleDansGrille et pouvoir utiliser la méthde initialiserJeu() : */
                this.initialiserJeu();
            }.bind(this)); 

            this.initialiserJeu();
        },
		// fonction d'initialisation d'un nouveau jeu
		// ==========================================

		initialiserJeu: function () {

            // initialisation du jeu
           		 eNbLigne = frm.nbLignes.value;
			eNbColonne = frm.nbColonnes.value;
			
			
			cibleTrouver = Math.floor(Math.random() * Math.floor(eNbLigne * eNbColonne)) ;
			
            /* Création de la grille de jeu */
            for (let i = 1; i <= eNbLigne; i++) {
                let eTableRow = document.createElement('tr');
                eTableRow.dataset.l = i;

                for (let j = 1; j <= eNbColonne; j++) {
                    let eTableData = document.createElement('td');
                    eTableData.dataset.c = j;
                    eTableRow.appendChild(eTableData);
                }
                eGrille.appendChild(eTableRow);
            }

            eGrille.addEventListener('click', f=function(e){
				count++;
				eNbCoups.innerText = count;
				
				this.jouer(e);
				
				eGrille.removeEventListener('click',f);
			}.bind(this));
			
        },
		
		// fonction de traitement d'un clic sur une case
		// =============================================

		jouer :	function (evt) {
	
			// gestion d'un clic sur une case (filtrer les noeuds TD non déjà cliqués)
				
			eGrille.addEventListener('click', func=function(evt){
				count++;
				eNbCoups.innerText = count;
				console.log(evt.target);
				td=document.querySelectorAll('#grille td')[cibleTrouver];
				tr = td.parentNode;
				var ligneClicked=(evt.target.parentNode),
				difference=0;
				if(ligneClicked.getAttribute('data-l')== tr.getAttribute("data-l")){
					
					if(parseInt(evt.target.getAttribute('data-c')) > parseInt(td.getAttribute('data-c'))){
						
						difference = evt.target.getAttribute('data-c') - td.getAttribute('data-c');
					}else{
						difference = td.getAttribute('data-c') - evt.target.getAttribute('data-c');
					}
					
				}
				else{
					
					if(parseInt(ligneClicked.getAttribute('data-l'))>parseInt(tr.getAttribute('data-l'))){
						difference = ligneClicked.getAttribute('data-l') - tr.getAttribute('data-l');
					}else{
						difference = tr.getAttribute('data-l') - ligneClicked.getAttribute('data-l');
					}
				}
				
				
				if(parseInt(difference)==0){
						td.style.backgroundColor = "green";
						eGrille.removeEventListener('click',func);
						
						
				}else{
					evt.target.innerHTML = difference;
					evt.target.style.backgroundColor = "red";
					
					
				}
				
			});
			
		}
	}
	return oCibleDansGrille;
} ();

html:

Code : Tout sélectionner

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>TP2, partie 1 avec un module pattern</title>
	<style>
		body                 { margin: 40px auto; width: 80%; font-family: Arial, sans-serif }
		label                { margin-right: 20px; }
		label:nth-of-type(2) { margin-left: 40px; }
		input                { padding: 0 5px; line-height: 28px; font-size: 16px; font-family: Arial, sans-serif; } 
		input[type="button"] { display: block; margin: 20px 0; padding: 5px 20px; }
		#nbCoups             { font-weight: bold }
		table                { border-collapse: collapse; text-align: center }
		.cliquable           { cursor: pointer}
		td                   { width: 40px; height: 40px; border: 1px solid #000 }
		.ok                  { background-color: limegreen }
		.ko                  { background-color: salmon }
		
	</style>

	
	<script>
		
		window.addEventListener("load", function(){
			
			jeuModulePattern.initialiserPage();
			
				
		});

	</script>

</head>
<body>
	<form name="frm" id='frm'>
		<label>Nombre de lignes</label><input name="nbLignes" type=number value=10 min=2 max=20 id="nbLignes">
		<label>Nombre de colonnes</label><input name="nbColonnes" type=number value=10 min=2 max=20 id="nbColonnes">
		<input type="button" name="nouveauJeu" value="Nouveau jeu" id='nouveauJeu'>
	</form>
	<section>
		<h2>Trouvez la cible</h2>
		<p>Nombre de coups joués : <span id="nbCoups"></span></p>
		<table id="grille">
			
		</table>
	</section>
	<script src=jeuModulePattern.js></script>
</body>
</html>