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;
} ();
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>